Cd202 interface representation sequence user theory in website design
This presentation is the property of its rightful owner.
Sponsored Links
1 / 21

CD202 Interface, Representation & Sequence User theory in website design PowerPoint PPT Presentation


  • 55 Views
  • Uploaded on
  • Presentation posted in: General

CD202 Interface, Representation & Sequence User theory in website design. Course created by Sarah Phillips sphillips@ lecturers.billyblue.edu.au BBCD Melbourne BAPDCOM Version 1 – February 2013. http :// bbcdcomdes.weebly.com /. Accessibility.

Download Presentation

CD202 Interface, Representation & Sequence User theory in 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.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -

Presentation Transcript


Cd202 interface representation sequence user theory in website design

CD202 Interface, Representation & SequenceUser theory in website design

Course created by Sarah [email protected] Melbourne BAPDCOM Version 1 – February 2013.http://bbcdcomdes.weebly.com/


Accessibility

Accessibility

  • Web accessibility means that people with disabilities can use the Web.

  • A lot of people will access your site with devices you won’t have designed for – you need to ensure that they will be able to access your content too


Accessibility1

Accessibility

  • One of the most common devices that you will not have thought of is a screen reader, which helps blind people or anyone that has trouble seeing or reading.

  • You need to provide alternatives to some of your content to allow for these devices. For example, all images must have an ALT tag which describes what is in the picture


Accessibility2

Accessibility

<imgsrc=”cat.jpg" alt=”Fluffy white cat wearing a top hat and red bow tie” />

Image source


Accessibility3

Accessibility

  • Here’s a couple of other things to keep your eye on

    • Font colour contrasts with background colour

    • Video & sound files have a transcript and subtitles.

    • Keep your navigation consistent

    • Font can be resized


Accessibility4

Accessibility

  • If you are working on a government website, it is a legal requirement to make the site accessible to all.

  • Eg. Radio National

    • http://www.abc.net.au/radionational/programs/booksandartsdaily/vale-maurice-sendak/4005108


Cd202 interface representation sequence user theory in website design

Working with grids


960 grid system

960 Grid system

  • Modern monitors support at least 1024 × 768 pixel resolution.

  • 960 is divisible by 2, 3, 4, 5, 6, 8, 10, 12, 15, 16, 20, 24, 30, 32, 40, 48, 60, 64, 80, 96, 120, 160, 192, 240, 320 and 480. This makes it a highly flexible base number to work with.


Working with grids

Working with grids

  • 960 grid system

    • Total width 960px

    • 12 columns @ 60px each

    • Each column has 10px left & right margin which forms 20px of gutter space

    • Total content area is 940px


Cd202 interface representation sequence user theory in website design

http://960.gs/


Adaptive responsive design

Adaptive & Responsive design


Adaptive vs responsive design

Adaptive vs Responsive design

  • Responsive design changes to fit any browser size on the fly

  • Adaptive design detects what size browser you’re looking at the site on and serves one of a defined set of layouts


Adaptive design

Adaptive design

  • Nubby Twiglet

    • http://www.nubbytwiglet.com


Responsive design

Responsive design

  • Earth Hour

    • http://earthhour.fr/


Responsive adaptive design

Responsive & adaptive design

  • It’s all about keeping it fluid.

  • Consider adjusting the layout or even removing some content for smaller screens


Cd202 interface representation sequence user theory in website design

Screen shot from http://css-tricks.com/ Accessed 4/2/13


Cd202 interface representation sequence user theory in website design

Screen shot from http://css-tricks.com/ Accessed 4/2/13


Guidelines for responsive design

Guidelines for responsive design

  • Responsive Web Design: What It Is and How To Use It

    • http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/


Supplementary links

Supplementary links

  • Examples of Sketched UI Wireframes & Mockups

    • http://webdesignledger.com/inspiration/18-great-examples-of-sketched-ui-wireframes-and-mockups

  • Nathan Smith presentation – 960 grid

    • https://speakerdeck.com/nathansmith/960-grid-system

  • Prototyping with the 960 grid

    • http://net.tutsplus.com/tutorials/html-css-techniques/prototyping-with-the-grid-960-css-framework/


Supplementary links1

Supplementary links

  • Font Awesome

    • http://fortawesome.github.com/Font-Awesome/

  • Responsive web design patterns

    • http://bradfrost.github.com/this-is-responsive/patterns.html

  • 70 examples of modern responsive web design

    • http://www.splashnology.com/article/70-examples-of-modern-responsive-web-design/2537/


Supplementary links2

Supplementary Links

  • Flexible web design

    • http://www.flexiblewebbook.com/bonus.html

  • Standards for web accessibility

    • http://www.w3.org/standards/webdesign/accessibility


  • Login