Web Design and HTML5Web Design and HTML5

Web DesignWeb 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

Web DesignWeb 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

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

Web DesignWeb 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

• 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

Web StandardsWeb 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

Web StandardsWeb Standards

How do users interface with the interface?

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

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

How do users interface with the interface?

How do users interface with the interface?

• Sites are using less text• Text rarely goes across the width of a page• Webfonts are becoming more common such as

Typekit, Google Fonts

How do users interface with the interface?

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

Web Design Principles / Usability Resources

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 expecthttp://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/

Web Design Principles / UsabilityWeb Design Principles / Usability

Usability nightmares:

What is the least usable site you have ever visited? What is the least usable site you have ever visited?

http://uxdesign.smashingmagazine.com/2007/09/27/10-usability-nightmares-you-should-be-aware-of/

Site DesignSite 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

The ProcessThe Process

• Web design process has changed a lot with the shift to fluid layouts that are geared towards responsive design

http://design.tutsplus.com/articles/photoshops-role-in-a-web-design-workflow--psd-25137

The ProcessThe Process• A lot of designers start with simple sketches• Wireframes allow designers to experiment with

how to effectively display the information• Designers will often

make a visual mock-up then in a program like Photoshop – although many designers now miss this step

• Code

Let’s look at HTMLLet’s look at HTML

Let’s go learn some code!