Transcript BCM 130 Week 2

Web Design and HTML5
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
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
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.
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
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
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
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 popups are bad
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.
• 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?
• 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
•
•
•
•
•
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-ofeffective-web-design/
http://psd.tutsplus.com/tutorials/designing-tutorials/9-essential-principlesfor-good-web-design/
Web Design Principles / Usability
Usability nightmares:
http://uxdesign.smashingmagazine.com/2007/09/27/10-usability-nightmares-youshould-be-aware-of/
What is the least usable site you have ever visited?
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
The 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/photosho
ps-role-in-a-web-design-workflow--psd-25137
The 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 HTML
Let’s go learn some code!