Web Design and HTML5

1. Web Design and HTML5

2. Web Design Designing for the web in 2014 is much more about the content of the site and how the information is arranged. Simple or minimal designs are very popular. Webby award winners for 2013

3. Web Design Factors that have led to content being king; Usability – or the ease of use of a site has become a big priority, especially for large corporations and government agencies

4. Web Design Because sites are shown on mobile platforms as well as desktops today – other factors such as data limits and lag times for mobiles affect what can be shown.

5. Web Design • HTML5 is becoming the web standard and it’s biggest focus is on semantic code. • Semantic code reinforces the meaning of the code • It emphasises that websites should have a hierarchy of content – which it calls the Document Outline

6. Web Standards • What are web standards? • Web standards are rules to ensure that we make the most concise, clear code that is accessible to all. • Web standards are developed and delivered by the W3C

7. Web Standards • Who are the W3C? • The world wide web consortium – is a community of member organizations, the w3c staff and the web development community. They work together to try to develop standards for the WWW. • Led by Tim Berners-Lee ( inventor of the internet) and Jeffry Jaffe

8. How do users interface with the interface? • They scan they don’t read • They start from the top left • They expect what they have seen before – so if something is underlined it’s probably a link • They like to keep control so things like pop-ups are bad

9. How do users interface with the interface? • Things that are important in all designs are important on the web – so colours and contrast etc will say something about your information • White space is still very important.

10. Sites are using less text • Text rarely goes across the width of a page • Webfonts are becoming more common such asTypekit, Google Fonts

11. How do users interface with the interface? • Icons have become extremely popular as a fast and effective way to convey information without words. • Icon fonts are a common way to implement them

12. Web Design Principles / Usability Resources • Good design leads the eye • Good design takes advantage of appropriate white space • Good design has clear navigation • Good design is consistent from one page to another • Good design considers the end-users – what information do they need and how are they going to access it? • Good design utilises good typographic principles • Good design adheres to standards • Good design is accessible to all • Good design does what the users expect http://uxdesign.smashingmagazine.com/2008/01/31/10-principles-of-effective-web-design/ http://psd.tutsplus.com/tutorials/designing-tutorials/9-essential-principles-for-good-web-design/

13. Web Design Principles / Usability Usability nightmares: http://uxdesign.smashingmagazine.com/2007/09/27/10-usability-nightmares-you-should-be-aware-of/ What is the least usable site you have ever visited?

14. Site Design • Content is king – so the best way to start a website design is to put down all the information that needs to be included in the site • Make a hierarchy of info and that will suggest a way that the info should be laid out

15. The Process • Web design process has changed a lot with the shift to fluid layouts that are geared towards responsive designhttp://design.tutsplus.com/articles/photoshops-role-in-a-web-design-workflow--psd-25137

16. The Process • A lot of designers start with simple sketches • Wireframes allow designers to experiment with how to effectively display the information • Designers will oftenmake a visual mock-up then in a program like Photoshop – although many designers now miss this step • Code

17. Let’s look at HTML Let’s go learn some code!