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
- Choose a cause you feel passionate about
- Create a digital experience that convinces people to help.
- Think carefully about how to group peoples attention explain my cause, why it matters what people can do.
- How to visually communicate my cause
- Bold Typography
- How people can interact
- Mobile desktop
- Two weeks
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
"WE WANT YOU TO LIFT WALLPAPER OUT OF THE DECORATION GHETTO AND TURN IT INTO ART."
We also re-capped on the golden ratio and how you could argue that it is essentially everywhere. But we debated that if you tried hard enough you could find a pattern in anything so its just a theory. We were taught you can also build a grid layout from the golden ratio, creating a hierarchy and controlling what the audience views first.
Highlight the Changes - When you make changes during the use of a web application, you should highlight those changes so that it can be noticed by your users. There are a number of ways to highlight content. A shaded background can be used to highlight new content. Some applications may use icons to indicate the new content.
Enable Keyboard Shortcuts - You can use your own keyboard shortcuts in an application interface. Before making them you must first make sure that the keyboard shortcuts you are using are logical, which will ensure that these shortcuts are remembered by users with ease. You also have to include them next to their respective actions in drop-down menus.
Use Relevant Icons with Labels - There are many developers who use icons in their applications without labeling those icons. But this confuses the user if we use other than the most common icons. Placing labels next to your icons make user easy to recognize them instantly.
Keep Things Simple - And last but not least, you must keep the interfaces as simple as possible. If the functions, elements have a clear purpose, then add them and if they don’t, then avoid adding them because most of the people use the application for the functionality rather than the design.
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
Popular Posts
-
Blackletter Blackletter is the earliest printed type, and is base on hand-copied texts. It is traditionally associated with medieval...
-
The Independent Newspaper Below is a deconstructed newspaper to identify the visual hierarchy on the page. Obviously in some cases the...
-
Responsive Competitions J2O - Re-design J2O to become more appealing to an older age group. - Target audience is 25-30. - Current consu...
-
For a task we were asked to make quick thumbnail layouts for our 10 dps's. I started off with small thumbnail layouts to get qui...
-
This is the first quick brainstorm I initially started with. The 'I' in Idle really stood out to me and incorporating a male fi...
-
LoveCraft is what I have chosen to brand and design a logo for. I stumbled across the small company on Kickstarter where I was able t...
-
This is the final design I eventually submitted to Secret 7. I think it looks quite unsual yet sparks interest in to what song it is tr...
-
Here is a selection of various versions of my final outcome. After houses of changing the way it looks I decide...
-
I decided t create a movie poster for Tim Burton's film Big Fish. Since I was a child this has remained one of my favourite films, ...
About Me
Categories
- Collaborative Brief
- Colour Theory
- Day Brief
- Design Principles
- OUGD403
- OUGD404
- OUGD404 Studio Brief 2
- OUGD405
- OUGD406
- OUGD406 Brief 3
- OUGD406 Studio Brief 2
- OUGD406 Studio Brief 4
- OUGD503
- OUGD503 Christmas Card
- OUGD503 Feathr
- OUGD503 Movie Poster
- OUGD503 Royal Mint
- OUGD503 Secret 7
- OUGD504
- OUGD504 Brief 2
- OUGD504 Brief 3
- OUGD504 Brief 4
- OUGD505
- OUGD505 Covered
- OUGD602
- OUGD603
- OUGD603 Brief 1 Christmas cards
- OUGD603 Brief 2 We Built A Mountain
- OUGD603 Brief 3 Secret 7
- OUGD603 Brief 4 D&AD Desperados
- OUGD603 Brief 5 Leeds Print Festival
- OUGD603 Brief 6 Toast Cafe
- OUGD603 Brief 7 Feminist Zine
- OUGD603 Brief 8 Gender Neutral Cosmetic
- PPP
- Secret7
- Studio Brief 1
- Studio Brief 2
- Studio Brief 3
- Studio Brief 5
- Type Journal
Search This Blog
Blogger news
LABELS
- Collaborative Brief
- Colour Theory
- Day Brief
- Design Principles
- OUGD403
- OUGD404
- OUGD404 Studio Brief 2
- OUGD405
- OUGD406
- OUGD406 Brief 3
- OUGD406 Studio Brief 2
- OUGD406 Studio Brief 4
- OUGD503
- OUGD503 Christmas Card
- OUGD503 Feathr
- OUGD503 Movie Poster
- OUGD503 Royal Mint
- OUGD503 Secret 7
- OUGD504
- OUGD504 Brief 2
- OUGD504 Brief 3
- OUGD504 Brief 4
- OUGD505
- OUGD505 Covered
- OUGD602
- OUGD603
- OUGD603 Brief 1 Christmas cards
- OUGD603 Brief 2 We Built A Mountain
- OUGD603 Brief 3 Secret 7
- OUGD603 Brief 4 D&AD Desperados
- OUGD603 Brief 5 Leeds Print Festival
- OUGD603 Brief 6 Toast Cafe
- OUGD603 Brief 7 Feminist Zine
- OUGD603 Brief 8 Gender Neutral Cosmetic
- PPP
- Secret7
- Studio Brief 1
- Studio Brief 2
- Studio Brief 3
- Studio Brief 5
- Type Journal