1 / 23

CD202 Interface, Representation & Sequence Critically analysing website design

CD202 Interface, Representation & Sequence Critically analysing website design. Course created by Sarah Phillips sphillips@ lecturers.billyblue.edu.au BBCD Melbourne BAPDCOM Version 1 – February 2013. http :// bbcdcomdes.weebly.com /. History of web design.

hien
Download Presentation

CD202 Interface, Representation & Sequence Critically analysing website design

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. CD202 Interface, Representation & SequenceCritically analysing website design Course created by Sarah Phillipssphillips@lecturers.billyblue.edu.auBBCD Melbourne BAPDCOM Version 1 – February 2013.http://bbcdcomdes.weebly.com/

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

  3. History of Web Design • 1995HTML 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.

  4. 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!

  5. History of Web design • Ye olde McDonalds website (1996/7)http://web.archive.org/web/19961221230104/http:/www.mcdonalds.com/ • Lego website - 1996 http://web.archive.org/web/19970110033427/http://www.lego.com/

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

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

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

  9. Web design trends - today • Adaptive design • http://nubbytwiglet.com/ • Typography • http://www.designweekportland.com/ • Long vertical scrolling • http://pinterest.com/

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

  11. Web design practices • Appeal to your target audience – even if that means breaking/bending a couple of rules.

  12. http://pbskids.org/

  13. Don’t do this. • http://www.neckandbackpainchiropractic.com/ • http://www.dpgraph.com/

  14. 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/

  15. Supplementary Links • 101 Best HTML5 websitehttp://101besthtml5sites.com/

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

  17. Wireframes

  18. Wireframes • Describe the contents of a web page and their relative priorities. • Help establish functionalities, behavioursand assess feasibility • Look like web pages devoid of most visual/graphic styling

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

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

  21. Online wireframing tools • Cacoohttp://cacoo.com/ • Comeswithdrawing stencils toquicklymockupyourwireframes. • Has tools toalignelements, resulting in cleaner wireframes • Can share wireframeswith multiple users, whocanaddnotesto the frames. • Free trial account

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

  23. Supplementary links • Beginners guide to wireframing • http://webdesign.tutsplus.com/tutorials/workflow-tutorials/a-beginners-guide-to-wireframing/

More Related