Embed Size (px)
Citation preview
Visual Design
By Roel Schijf
Welcome
• Roel Schijf
– Web & Graphic designer at Data Access Europe
• Great demand for great looking User Interfaces
• DAE Graphics
– Web & Graphic department of Data Access Europe
– Since 2008
•
2
3
4
5
6
7
Agenda
8
1. What is visual design all about?2. Visual design and usability3. Useful techniques for great user interfaces4. Applying a CSS reset5. My workflow6. Systemizing the design process7. The transformation of MyWebsite8. Before & After
1. What is visual design all about?
• Umbrella of many things
– Colours
– Typography
– Whitespace
– Etc.
• Information architecture
• Android
• iOS
Design is the process of finding the quickest way to complete a task!
9“
2. Visual design and usability
• You need a good copy
– Copy is a term used to describe all of the text content on a website.
• We do not read from
pops out
• stronger, higher-contrast colors and larger fonts
10
• Have clear points of focus
•
together in huge chunks
11People start reading whatever pops out “
So what is usability all about?
– Making things easier to use,
– Less thinking,
– Less frustration,
– Get more things done in less time.
–
your website or web application.
12
3. Useful techniques for great user interfaces
a. Highlight important changes (visual feedback)
Websites and applications must offer simple, intuitive and responsive user interfaces that let their users get things done with less effort and time.
13
“
b. Context-sensitive navigation c. Short sign-up forms
14
Don’t give users too many
different options – It has been
tested and doesn’t work well.
“
d. Make use of a color scheme e. Strive for Balance
15
http://colorschemedesigner.com/
g. Clickable areasf. Good content layout
h. Add whitespace
16
i. Add contrast j. Strive for Clarity
17
Enhancing the UI with CSS/AJAX/jQuery
• WebApp sample
– without markup
– with markup
• Contact sample
– without markup
– with markup
18
Adding CSS to your interface.
19
20
21
22
Turn any web form into a powerful wizard with jQuery / AJAX
http://www.jankoatwarpspeed.com/examples/webform_to_wizard/
23
24
Using CSS and jQuery for styling
25
26
Customizing the AJAX Lib interface
27
28
29
30
Designing elements with CSS
31
Example: News-items
32
33
The resultAll elements combined together...
34
Example: Webshop-items
35
Example: Webshop-items
36
+
The resultAll elements combined together...
37
Full body UI with little use of graphics
38
4. Applying a CSS reset
• Benefits:– Reduce browser inconsistencies
like:• default line heights, •
• font sizes of headings
• Downside:– Can cause a lot of work on
existing projects
• Where to find:– css
40Can Really Save You a Lot of Headaches“
5. My workflow• Adobe Photoshop
– For creating the wireframe and user interface– Kuler plugin for creating a color scheme– Slicing images for web usage
• Notepad ++– Coding HTML + CSS
• Dreamstime–
• FireFox with FireBug– Developing the actual interface
• Electos CMS
41
Step 1 Collect necessary information
Step 2 Proposal/Plan
Step 3 Brainstorm, Research and inspiration
Step 4 Create the wireframe
Step 5 Creating the user interface
Step 6 Actual building of the website
Step 7 Revision phase
Step 8 Wrapping up
42
6. Systemizing the graphic design process
• Step 1: Collect necessary information
– Target audience
– What is the exact message
– Technical requirements
– Budget and deadlines
– Systemizing it
– Branding, colour scheme, etc.
• Step 2: Proposal/Plan
• Step 3: Brainstorm, Research and Inspiration
• Step 4: Creating the wireframe
43
• Step 5: Creating the User Interface
• Step 6: Actual building of the website
44
• Step 7: Revision phase (difficult phase)
45
• Minor changes add up
46
Step 8: Wrapping up
47
7. The transformation of MyWebsite1. 100% width
– 980px centered
2. Single title/Single bodytext – Multiple Titles /Multiple Body text
3. All elements are visible– Hidden elements to save space but possebilty to click for more details.
4. No or little use of imagery and icons– Generate focus on important elements by using imagery and icons
5. Inline styles– Clean and easy acccesable external code for fast results
6. One ASP Template– Multiple ASP templates for layout
7. Small anchors and buttons – Big clickable areas for usabilty
48
49
50
8. Before and After
51
52
53
54
55
56
57
58
59
60
61
Why should you make use of visual design?
• Because more and more User Interfaces are migrating to the Web, like:– Promedico,– Dynamic AI,– Daily Fresh
• They must offer simple, intuitive and responsive user interfaces.
• Get things done with less effort and time.
62
Less is more! Only add items if they really have a purpose“
THE END!Thank you for listening...
63
Find me at:
www.daegraphics.com
