1 / 23

Planning Your Web Site

Planning Your Web Site. When 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

helen-powers
Download Presentation

Planning Your Web Site

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Planning Your Web Site When 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

  2. 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

  3. 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.)

  4. Design Process External Design • The creative brief • Decide on a Navigation Model • Create a paper based design • Create your “Wireframe” • Develop you initial prototype

  5. Internal Design • Directory Structure • Site Map • Templates • External CSS

  6. The Creative Brief • Specifies the overall direction of the project • Gets the creative juices flowing • Outlines the audience • Expectations of the site • The content of the site

  7. Phones 4 Me Web Site Creative brief 17/10/06 Project Summary Phones 4 Me is a popular retailer of mobile phones and contracts. The site is intended to allow customers to purchase handsets and contracts over the Web. Target Audience Although all types of customers are welcome, the company specifically wishes to target the 18 – 30 age range. 90% of the existing customers fall within this bracket and the company is widely recognised as a brand for this group. Tone / Guidance The tone of the site should be youthful and dynamic with a slight professional edge in order to be in line with existing marketing strategy.

  8. Navigation Models • How will the pages link together? • Linear • Hierarchical • Hub and Spoke • Full Web

  9. 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

  10. Note navigation! http://www.webreference.com/html/tutorial1/

  11. Hierarchical Navigation Model • Common on the Web, with a main page and then sub pages linked off it and so on into the site

  12. www.cse.dmu.ac.uk

  13. Hub and Spoke Navigation Model • User enters the central hub, the home page • Any page is available from the home page • Each page leads back to the home page • Never more than a couple of clicks from the home page

  14. http://www.cse.dmu.ac.uk/~mjdean/notes/modules/multimedia/CSCI2608/0708/index.htmlhttp://www.cse.dmu.ac.uk/~mjdean/notes/modules/multimedia/CSCI2608/0708/index.html

  15. Full Web Navigation Model • Each page links to every other page • Risk of getting lost

  16. http://en.wikipedia.org/wiki/Main_Page

  17. Which navigation model? • No specific model works best • Many sites are a mix of different models

  18. Paper based design Couldn't be more non technical • Paper – Pencil • "Rough out" your initial plans • Start with the main pages and think about how they might look

  19. Creating Storyboards • Once you have an idea of how your site will look plan out a storyboard • This is a presentation of what each page will do and the type of content it will have • PowerPoint is a quick and easy tool for creating story boards • A story board (like a story) should have: • A beginning. • A middle. • And an end. Sample storyboard.

  20. Wire-framing your site A 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 Sample wireframe

  21. Internal Structure of the Site • How are your files to be stored? • Remember - The folder is your friend • Use a logical structure • Use folders that DreamWeaver can recognise • Templates • Graphics

  22. Web page (html file) Web page (html file) Web page (html file) External CSS Template (dwt file) Web page (html file) Web page (html file) Web page (html file) Use Templates / External Cascading Style Sheet (CSS) • Templates define layout for similar pages. • CSS defines colours, fonts (plus more) for specific areas

More Related