introduction and planning your site. planning your web site when designing a site for yourself you...
TRANSCRIPT
![Page 1: Introduction and Planning your Site. Planning Your Web Site When Designing a Site for Yourself You have the final say over the design and content There](https://reader034.vdocuments.net/reader034/viewer/2022051819/55168a9d550346a2698b61b2/html5/thumbnails/1.jpg)
Introduction and Planning your Site
![Page 2: Introduction and Planning your Site. Planning Your Web Site When Designing a Site for Yourself You have the final say over the design and content There](https://reader034.vdocuments.net/reader034/viewer/2022051819/55168a9d550346a2698b61b2/html5/thumbnails/2.jpg)
Planning Your Web SiteWhen Designing a Site for Yourself
You have the final say over the design and content
There is no cut off point as to the completion date
You are able to experiment with different styles of interaction
Rough edges don't really matter
You may be the only person to ever be involved with the source code
![Page 3: Introduction and Planning your Site. Planning Your Web Site When Designing a Site for Yourself You have the final say over the design and content There](https://reader034.vdocuments.net/reader034/viewer/2022051819/55168a9d550346a2698b61b2/html5/thumbnails/3.jpg)
However…When Designing a Site for a Client:
You are not in control of certain aspects of the site. (Corporate Image – Content)
You are working to a deadline, after which the site will "go live"
You need to get the styles of interaction, look and feel correct from the site's launch
Customers don't look kindly on "experimental" features
Rough edges do matter
Other people may be involved with your source code
![Page 4: Introduction and Planning your Site. Planning Your Web Site When Designing a Site for Yourself You have the final say over the design and content There](https://reader034.vdocuments.net/reader034/viewer/2022051819/55168a9d550346a2698b61b2/html5/thumbnails/4.jpg)
To address these issues you will need:A design strategy to make sure the Web site's
design is correct early on in the design process
Documentation to ensure that other people will understand what you have done
Procedures for testing your design to make sure it works as intended
Interaction with the client and the user. (To make sure you are getting it right.)
![Page 5: Introduction and Planning your Site. Planning Your Web Site When Designing a Site for Yourself You have the final say over the design and content There](https://reader034.vdocuments.net/reader034/viewer/2022051819/55168a9d550346a2698b61b2/html5/thumbnails/5.jpg)
Design ProcessExternal Design
Formative TestingThe Creative BriefDecide on a Navigation ModelCreate a paper based designCreate your “Wireframe”Develop you initial prototype
![Page 6: Introduction and Planning your Site. Planning Your Web Site When Designing a Site for Yourself You have the final say over the design and content There](https://reader034.vdocuments.net/reader034/viewer/2022051819/55168a9d550346a2698b61b2/html5/thumbnails/6.jpg)
Internal Design
Directory StructureSite MapStyle Sheets & Templates
![Page 7: Introduction and Planning your Site. Planning Your Web Site When Designing a Site for Yourself You have the final say over the design and content There](https://reader034.vdocuments.net/reader034/viewer/2022051819/55168a9d550346a2698b61b2/html5/thumbnails/7.jpg)
Formative TestingLook at similar and related material already
in existence.Guide lines forFontColour schemeLook and feel
Find related art work
![Page 8: Introduction and Planning your Site. Planning Your Web Site When Designing a Site for Yourself You have the final say over the design and content There](https://reader034.vdocuments.net/reader034/viewer/2022051819/55168a9d550346a2698b61b2/html5/thumbnails/8.jpg)
Colours Fonts and Tone
![Page 9: Introduction and Planning your Site. Planning Your Web Site When Designing a Site for Yourself You have the final say over the design and content There](https://reader034.vdocuments.net/reader034/viewer/2022051819/55168a9d550346a2698b61b2/html5/thumbnails/9.jpg)
The Creative BriefSpecifies the overall direction of the project
Gets the creative juices flowing
Outlines the audience
Expectations of the site
The content of the site
![Page 10: Introduction and Planning your Site. Planning Your Web Site When Designing a Site for Yourself You have the final say over the design and content There](https://reader034.vdocuments.net/reader034/viewer/2022051819/55168a9d550346a2698b61b2/html5/thumbnails/10.jpg)
King Kong Fan Site Creative brief 8th June 2012
Project SummaryKing Kong is a widely known film. This site will be a tribute to
the film in the form of a single page comic. The selected scene from the film will be the film’s climax where Kong falls from the Empire State Building.
Target Audience The site will be aimed at a wide audience however fans of the
films will be targeted.
ToneSince there are many versions of the film it will by mainly
inspired by the 1930s original. However there will be tonal elements taken from the Peter Jackson version. The written style will be appropriate to the films content.
![Page 11: Introduction and Planning your Site. Planning Your Web Site When Designing a Site for Yourself You have the final say over the design and content There](https://reader034.vdocuments.net/reader034/viewer/2022051819/55168a9d550346a2698b61b2/html5/thumbnails/11.jpg)
Linear Navigation Model (Slide show)Useful if you wish to control the users
movement through the site
e.g. Good for a tutorial or presentation
![Page 12: Introduction and Planning your Site. Planning Your Web Site When Designing a Site for Yourself You have the final say over the design and content There](https://reader034.vdocuments.net/reader034/viewer/2022051819/55168a9d550346a2698b61b2/html5/thumbnails/12.jpg)
Hierarchical Navigation ModelCommon on the Web, with a main page and
then sub pages linked off it and so on into the site
![Page 13: Introduction and Planning your Site. Planning Your Web Site When Designing a Site for Yourself You have the final say over the design and content There](https://reader034.vdocuments.net/reader034/viewer/2022051819/55168a9d550346a2698b61b2/html5/thumbnails/13.jpg)
Hub and Spoke Navigation ModelUser enters the central hub, the home pageAny page is available from the home pageEach page leads back to the home pageNever more than a couple of clicks from the
home page
![Page 14: Introduction and Planning your Site. Planning Your Web Site When Designing a Site for Yourself You have the final say over the design and content There](https://reader034.vdocuments.net/reader034/viewer/2022051819/55168a9d550346a2698b61b2/html5/thumbnails/14.jpg)
Full Web Navigation ModelEach page links to every other page
Risk of getting lost
![Page 15: Introduction and Planning your Site. Planning Your Web Site When Designing a Site for Yourself You have the final say over the design and content There](https://reader034.vdocuments.net/reader034/viewer/2022051819/55168a9d550346a2698b61b2/html5/thumbnails/15.jpg)
Which navigation model?
No specific model works best
Many sites are a mix of different models
![Page 16: Introduction and Planning your Site. Planning Your Web Site When Designing a Site for Yourself You have the final say over the design and content There](https://reader034.vdocuments.net/reader034/viewer/2022051819/55168a9d550346a2698b61b2/html5/thumbnails/16.jpg)
Paper based designCouldn't be more non technical
Paper – Pencil
"Rough out" your initial plans
Start with the main pages and think about how they might look
![Page 17: Introduction and Planning your Site. Planning Your Web Site When Designing a Site for Yourself You have the final say over the design and content There](https://reader034.vdocuments.net/reader034/viewer/2022051819/55168a9d550346a2698b61b2/html5/thumbnails/17.jpg)
![Page 18: Introduction and Planning your Site. Planning Your Web Site When Designing a Site for Yourself You have the final say over the design and content There](https://reader034.vdocuments.net/reader034/viewer/2022051819/55168a9d550346a2698b61b2/html5/thumbnails/18.jpg)
Wire-framing your siteA Wireframe is a digital rendering of the storyboard
A "bare bones" model of your site
No written content
No graphics
Just blank pages linked to each other identifying
The intention of each page
The means by which the pages are navigated
![Page 19: Introduction and Planning your Site. Planning Your Web Site When Designing a Site for Yourself You have the final say over the design and content There](https://reader034.vdocuments.net/reader034/viewer/2022051819/55168a9d550346a2698b61b2/html5/thumbnails/19.jpg)
Internal Structure of the SiteHow are your files to be stored?
Remember - The folder is your friend
Use a logical structure
Use folders that DreamWeaver can recogniseTemplatesGraphics
![Page 20: Introduction and Planning your Site. Planning Your Web Site When Designing a Site for Yourself You have the final say over the design and content There](https://reader034.vdocuments.net/reader034/viewer/2022051819/55168a9d550346a2698b61b2/html5/thumbnails/20.jpg)
Use Templates / External Cascading Style Sheet (CSS)
Templates define layout for similar pages.CSS defines colours, fonts (plus more) for
specific areas
Template (dwt file)
External CSS
Web page (html file)
Web page (html file)
Web page (html file)
Web page (html file) Web page
(html file)
Web page (html file)