CD202 Interface, Representation & Sequence

Critically analysing website design

Course created by Sarah Phillipssphillips@lecturers.billyblue.edu.au

BBCD Melbourne BAPDCOM Version 1 – February 2013.http://bbcdcomdes.weebly.com/

History of web design

1989HTML invented by Tim Berners-Lee at CERN in Switzerland.

1994Netscape launches and becomes the leading browser. HTML2 was born. Can now design with resizable tables and background images!

History of Web Design 1995

HTML 3 is released, but everyone argues about what tags should be standard. No one agrees, hence why browsers support (or don’t support) tags in different ways. The academic engineering committee overseeing this kicks up a stink at some of the suggestions. They believe that HTML should only specify how a document is organised and not how it looks – therefore, text colour, font size and font choice are outside of scope. They are ignored.

History of web design

1997HTML 4 becomes standard. New features include

- frames - CSS integration - being able to embed external

scripts At this point, designs are made to fit

a 800x600 screen resolution!

History of Web design

Ye olde McDonalds website (1996/7)http://web.archive.org/web/19961221230104/http:/www.mcdonalds.com/

Lego website - 1996http://web.archive.org/web/19970110033427/http://www.lego.com/

History of web design Fastforward to 2010…. HTML5

includes features for playing audio & video HTML5 on its own cannot be used for animation and

interactivity — it must be supplemented with CSS3 or Javascript.

Some elements dropped because they are better written in CSS – like <center>, <strike> and <font>

According to a report released on 30 September 2011, 34 of the world's top 100 Web sites were using HTML5 

History of web design

HTML5 and compatability Most modern browsers support HTML –

to a degree. ie8 is still one of the most common

browsers – and doesn’t support HTML5. Browsers will ignore markups it doesn’t

understand, so we need to keep this in mind when coding in HTML5 – make sure you test in a few different browsers.

History of web design

So… web design trends tend to follow the capabilities and average adaption level. When HTML5 first came out, it wasn’t widely supported in browsers popular at the time, so take up was slow. Even now, it’s starting to gain momentum… it is on track to be the recommended way to go…by 2014.

Web design trends - today Adaptive design

http://nubbytwiglet.com/ Typography

http://www.designweekportland.com/ Long vertical scrolling

http://pinterest.com/

Web design practices

Consistent navigation area Contrast between text & background Important information above the fold Optimized graphics Hierarchy Consistency REMEMBER, IT’S ALL ABOUT THE

CONTENT (and don’t drive the user crazy)

Web design practices

Appeal to your target audience – even if that means breaking/bending a couple of rules.

http://pbskids.org/

Don’t do this.

http://www.neckandbackpainchiropractic.com/

http://www.dpgraph.com/

Supplementary links

Awards for leading industry standard web-design - http://www.webbyawards.com/

Looking for old websites?http://www.web.archive.org

HTML standards for web developershttp://developers.whatwg.org/

Best web design practiceshttp://terrymorris.net/bestpractices/

State of web design trends – 2012http://webdesign.tutsplus.com/articles/industry-trends/the-state-of-web-design-trends-2012-annual-edition/

Supplementary Links

101 Best HTML5 websitehttp://101besthtml5sites.com/

Video

Video – The Art of Web Design http://www.youtube.com/watch?v=3

iVVM_DgWY4

Wireframes

Wireframes

Describe the contents of a web page and their relative priorities.

Help establish functionalities, behaviours and assess feasibility

Look like web pages devoid of most visual/graphic styling

Simple wireframe

http://www.tokyowebdesigns.com/advice/1487/wireframing-your-site-what-why-and-how

Wireframes Great for visualising how much content per

page and the balance of content. Helps to get client feedback on layout and

placement, without them getting hung up on presentation.

Doing a wireframe first will allow you to spot problems early and make changes quickly.

If the wireframe is done to actual dimensions, then design will be ‘reskinning’ this template.

They are the storyboards of web design

Online wireframing tools

Cacoo http://cacoo.com/ Comes with drawing stencils to quickly

mockup your wireframes. Has tools to align elements, resulting in

cleaner wireframes Can share wireframes with multiple

users, who can add notes to the frames. Free trial account

Site screenshot http://www.cacoo.com. Accessed 6/2/13

Supplementary links

Beginners guide to wireframing http://webdesign.tutsplus.com

/tutorials/workflow-tutorials/a-beginners-guide-to-wireframing/