WEB DESIGN AND PROGRAMMING Planning your website

WEB DESIGN AND PROGRAMMING

Planning your website


Outline

1 The Brief2 Flowchart Site Map1 Website Wireframe2 User Profiles3 Use Case Scenarios4 Web Design - Navigation5 Web Design - Content


The Brief• Project description

– Why does this job need to be done?– What is required – What type of job is it?– Any other background info such as research and other findings

– Background can be attached as a more detailed appendix

• Business Issues– Core issues to be addressed– Problems to overcome


• Objectives– What the website is expected to accomplish

– If possible, quantify these expectations• Generate 3,000 inquiries• Sell 10,000 product units

• Target Audiences– Who are the targets

• Age, sex, geographical locations• Occupation

– What do we know about the• Spending habits• Results of user feedback

The Brief


The Brief

• Consumer Insight– What do we want them to think?

• eg WarnerDVD is a one stop shop for DVD news, reviews and purchases

– What do we want them to feel?• eg They can make an informed decision of the latest movies on DVD and buy in their own time

– What do we want them to do?• Buy DVDs and create a user community around the site


The Brief• Core Proposition

– What is the one key thought you want people to take away with them, or will compel them to action

– Be clear– Be simple– Include only 1 thought. There should be no “and” or “or” in your single minded proposition

• Personality and Tone– List a few traits that you wish to define your site

– Usually adjectives like bright, funny, irreverant

– Ideally no more than 5– Indicates the ideal personality for the site


The Brief

• Mandatories– Clients will usually have some specific conditions that accompany their name and logo

– May also include affiliates and third parties in partnership with your client

– Should only be treated as a guideline– Sometimes habit makes something mandatory that shouldn’t be

• Other campaign material– Any other advertising material related to the project• TV commercials• Print work


The Brief

• Specific Requirements– Any functional or design requirements that need to be required

– Usually more specific than anything mentioned in the project description• eg Shopping cart must be present on every page

• eg No font sizes smaller than 11pt

• Technical Specifications– Minimum screen resolution (eg 1024x768)– Platforms (Mac, PC, Linux)– Browsers (IE, Firefox, Safari)– Connection Speed (Dial-up, DSL)


Flowchart Site Map• Each page is represented by a box• Box must have at least a name or a description

• May also have a hierarchical number system– This number is useful to associate wireframes of pages to their position in the overall site

• Top of the tree is first page of the domain

• Colour coding of sections helps• Legals and Disclaimer is also on the top level


Flowchart Site Map• Each link from the home is then on the same level

• Gray areas will be launched later, or are still under consideration

• Note the section titles and small descriptions

• Note the hierarchical structure is not indicated by number value, but the decimal usage

• Each box represents a page not just a link


Flowchart Site Map• Primary sections from home page range horizontal while further subsections are placed vertical

• Numbering is inherited from parent with sequential identification after decimal– eg Shampoos & Conditioners is the second link in Our Products giving it the number 2.2

• Importance of link or page is evident in it's treatment on paper.

• To further catalogue content, color coding is used with less saturation of the parent section color

• Microsoft Viseo will make complex flowcharts a lot easier


Flowchart Site Map


Flowchart Site Map

• Flowchart different from site map usually found on a website


Website Wireframe• Basic website wireframe


Website Wireframe• Basically a skeleton of the website without the design

• Boxes represent images, sections or block of text

• Layout of boxes is a general guide and not set

• Helps to illustrate prominence of various content, links and CTAs (Call to action)

• Helps to number them according to the site map

• Highlighted menu items help to identify what part of the site is represented

• Size of elements should indicate the intended prominence of those items in the final design

• Producers often do these, but sometimes designers and art directors are better


Website Wireframe ElementsTitle Bar

Nav bar highlight Promo box with CTA

Explanation or note

Site footer

Note on future implementation


User Profiles• Help to avoid designing for one's self• Help to design only for real identified needs

• Future design and usability questions can be answered by considering what the user profile would do

• Must Identify the end user or target audience for the site

• Provide personal and demographic information– Name, age, gender, location etc

• Provide user technical information– computer, browser, internet usage, where and when they use the web


User Profiles

• Indicate why they are on the site• Describe their objectives for coming to the site

• Allow for insights gained from research and case studies– Dislikes difficult navigation– Won't wait for a long load time


User Profiles - Example• Unilever brands Dove and Sunsilk profile heavily

• They track every interaction with the brand– Opening emails– Responding to surveys

• Mandatory fields are specifically tailored– Name, email, address, age range, type of beauty products they use, what type of hair/skin they have, where they shop

• Advertising can then be focussed very well– Women aged 20-25, recent brand interaction– Allows for more relevant messaging


Website Design - Navigation• Navigation• Prepare the site nav first, it's location and size

• Must be clean, simple and UNIFORM across site• To deal with too many like, use drop down menus

• Provide a sitemap• Navigation must be flexible to deal with more links

• All important links should be prominent at a glance

• Showcase important links with promo boxes or in copy


Website Design - Navigation

• Make use of short, clear and concise links

• Good to design main navigation with html fonts

• Include a home link• Use breadcrumbs for complex, multilevel sites

• Use a search box for complex sites, Google.com and FreeFind.com can do this for you

• Place navigation within top 500px


Website Design - Colour• Find your dominant colour and derive secondary supporting colours from them

• This can be done using varying saturation and lightness levels

• Can be done by sampling images, colours found together in nature will be natural in design

• Or just start throwing colours togther on screen

• Or try this tool – http://slayeroffice.com/tools/color_palette/

• If you want to be REALLY careful, use websafe colours

• Google “colour theory” and have a look around

http://slayeroffice.com/tools/color_palette/





Website Design - Content• Website purpose is presenting information• Without a clean ordered layout, it will be a waste

• What resolution are you designing for?– Don't use more than 4 scroll lengths for one page– While there are flexible layouts, keep these in mind

– 800px by 600px = 780px by 420px– 1024px by 768px = 1008px by 592px

• Keep it simple, give everything it's own place and make use of whitespace

• Where appropriate, make use of small icons• Minimum font size for readability is 11px – 12px

• Use standard HTML fonts• Beware of file size


Web Design - Content• Be sure to experiment and refine

– Do a few versions of any design, even one you think is perfect. Try moving elements around to unusual places

– Try swapping elements from different designs– Don't be afraid to start over

• Once you make a choice, stick with it– If you begin with a 10px gutter, keep consistent– Consistency means your decisions were important

• Be complete in your designs– Don't leave any “To be completed later” in design– People will focus on something like this– If you don't have copy, use Lorem Ipsum


Web Design - Content• Step back from the design occasionally

– Get away for a break, even 15 mins– When you get back, approach as if you were a user seeing the site for the first time

– Note what works and what doesnt, what flows, what is clear, and what is cluttered

– Try to critique your work as if you were the client

• Be careful of needless complexity– If your content is interesting enough there is no need to clutter the design with lots of different elements

– A design should be useful, simple and straightforward


Web Design - Content

• Design is a problem solving exercise• Every problem needs to have parameters• Web design has both technical parameters and those of the brief

• There will be many solutions to the problem and it may take a while to get to one of the more optimised one

• It will take practice, but with time you will get used to the kinds of things that work and in what situations

• Never ignore the details

Documents

WEB DESIGN AND PROGRAMMING Planning your website