

User experience Design
What is user experience?
The role a product plays in a persons life.
Blackberry VS Iphone
- Efficiency
- Cheap? Fast?
- Emotional satisfaction
- Quality
- Empathy with the product
- Branding, identity of company
Current Companies
Asos vs Topshop
Itunes vs Windows media
Ebay vs Amazon
Yahoo vs Google
Pinterest vs Tumblr
Youtube vs Vimeo
Web standards and limitations
HTML - The language we need to learn
WYSIWYG - What you see is what you get
SEO - Search engine optimisation
FTP - File Transfer Protocol
URL - Domain name (Address to folder on server)
XML
PHP
ASP Advanced language
JSP
CGI
Information on a database such as the description of a product, Amazon is a good example where you type a word of a product which brings up hundreds of pages that contain that word.
HTTP - Hyper text transfer protocol
HTTPS
UI - User Interface
UX - User Experience - How easy, engaging, entertaining it is.
WWW - Worldwide web
Limitations
216 Websafe Colours
When colour first arrived on the web computers could only support a maximum of 256 colours on their 9-bit monitors. A list of 216 "Web Safe Colours" were identified.
These colours were/are reproduced consistently across the web using HTML, specifically a six or where possible a three digit hexadecimal code.
Red
#FF0000
#FF0
White
#FFFFFFF
#FFF
Black
#0000000
#000
The RGB colour mode is capable of reproducing 16 million different colours, significantly more than HEX 216 colours.
The combination of Red, Green, Blue values from 0 to 255 (256 unique shades for each value)
Red 256 x green 256 x blue 256 =
This wider range of colours can now be reproduced using CSS rather than HTML.
Example: For 100% Red would be - rgb(255,0,0)
WebSafe Fonts
For a chosen font to display consistently across different computers a standard front must be used.
Further to this a font-family is chosen giving several "fallback" options to ensure maximum compatibility between browsers and systems.
Change type to times if typeface isn't installed on computer. Specify a font family. Some common font families:
Serif Fonts~
Times New Roman
Put speech marks around "Times New Roman" to group it as one typeface otherwise it will look for separate words.
Sans-Serif Fonts~
Arial, Helvetica, sans-serif
Tahoma, Geneva, sans-serif
"TrebuchetMS", Helvetica, sans-serif
Verdana, Geneva, sans-serif
CSS font face - Allows you to install font onto the server, however breaches copyright for fonts.
Some fonts are free to use in print but not for web, need to pick a typeface that is free to use and to distribute.
Size, dimension, pixel resolution
640 x 480
800 x 600
1024 x 768
1920 x 1080
2880 x 1800 (220ppi)
Better starting at a smaller size then work to make it bigger rather than starting with a bigger scale and squashing it in.
Responsive website that responds to the change in size of the browser.
File Formats
PNG - Supports transparent image
GIF
PDF
JPEG - Does not support transparency
~
72 PPI? - Massively outdated pixel ratio. From 2000 onwards monitors could work at 96 PPI. 220 PPI.
RGB
~
Lossy
Compressed
Userwork
Store file on desktop but when working in Dreamweaver put the website folder into Userwork folder but remember to drop back on desktop when finished.
Numiko.com
Responsive Competitions
J2O
- Re-design J2O to become more appealing to an older age group.
- Target audience is 25-30.
- Current consumption 40% 16 and under.
- Current artwork is seen as childish/chavy tacky.
- Orange and Passion fruit
- Apple and Mango
- J2O Logo must be maintained
For next tuesday:
- Purpose
- Target audience
- Unique selling point
3x Layouts
Flow chart
- Canons are systems. Methods or approaches to a particular practice in relation to graphic design it refers to ways of organising type and image on the page.
- Canons can be helpful in your practice especially when designing.
The golden section of 100cm:
100cm 11.618= 61.80cm
100cm = 61.80cm + 38.20
the ratio of 61.80cm to 38.20cm is 1:1.618
Adding:
100 x 1.1618 = 161.80cm
the ratio of 100 cm to 161.80cm is 1:1.618
Book:
Massimo Vignelli's Canon
Responsive Briefing
OUGD503 - Responsive Design Process 2
Submission deadline 26/03/15
Studio Brief 1 - Individual Practice:
- Minimum of five briefs
Studio Brief 2 - Collaborative Practice:
- Groups of 2 + 4 combine to solve solutions
Submission
- Blog
- Design Boards
- Project report - steps
- Evaluation - 750 Words
Next Session:
-D&AD, YCN, ISTD Sign up
- Graphic competitions, 99 Designs
- Printed copy of competition
- Short description as to why I have chosen my brief
Kate Moross
Make your own luck (book)
- The Creative conscience awards
- Penguin design awards
- RSA Student Design Awards
- Student Starpack
* Nicholas Feltron - Info Graphics
- Feathr.com
11th December - Presentation on what I am doing