Wednesday 24 October 2012

Design for Web Workshop One - The Basics.

Websites and reactions:

  • ollymoss.com - empty space, dark
    • made using indexhibit  - website where you can create a website for free

  • malikafavre.com - grid, animated, busy
    • made using cargo - online web authoring website, content is initially there









Three questions:
  1. what is the purpose of the website you are creating?
  2. who is the target audience?
  3. what do the target audience need?
Applying these questions to our brief:
  1. displaying our work, contact information, networking, get a job
  2. agencies, studios, potential clients, other freelancers (collaborations)
  3. contact details, work, cv, past clients, who you are and what you're doing
How else could we determine these answers?
  • research other websites
  • focus groups - talk to the target audience

Common aspects on websites:
  • navigation
  • type
  • image

Internet history:
  • invented 1990
  • first image 1992
  • video and audio around 10 years ago

Limitations for designing for web:
  • physical size
    • system preferences, screen size
    • design for lowest common denominator 800x600 although a common choice is 1024x1710
  • resolution
    • 72
    • 96 pixels per inch since 2000, although everyone still works with 72
    • retina display is 227
    • to get around this you could have a horizontal scroll
  • font
    • fonts on computers if used for commercial use you have to pay for it
    • you must specify a font family, you can create your own
    • very limited range
    • some websites use custom fonts
    • making type an image - makes the type not searchable in google (seo)
    • create a web kit - download a custom font and instal it into a website, although even if it is a free font you may still need to buy a license because you are distributing the font
  • colour
    • RGB
    • every screen across the world has different variations of RGB
    • you must use web safe colours - smaller range than RGB
    • you need to know the hexadecimal code to specify colours

Helpful books:
  • HTML and CSS: Design and Build Websites - Jon Duckett
  • CSS Mastery

Website language:
  • HTML
    • hyper text mark up language
    • used to create every single website
    • very limited in terms of what it can do
    • if you only used html you could only display text
  • CSS
    • cascading style sheet
    • along with html the two main scripted languages
  • WYSIWYG
    • what you see is what you get
    • dreamweaver
  • URL
    • uniform resource locator
  • FTP
    • file transfer protocol
    • sending a file from one computer to another
  • CMS
    • Content management system
    • blog/Facebook etc

Work flow
  • get brief
  • put together scamp
  • produce three variations
  • client chooses a design
  • design gets signed off
  • decide whether the client or designer will mange the content

Creating a y-frame/scamp:
  • dimensions: 1024x768
  • font family: arial, helvetica, sans serif
  • alignment: centre
  • background: white
  • content box: white
  • navigation: top, 70%, centre
  • pages: 4
  • grid: 3x3

No comments:

Post a Comment