8. JAVASCRIPT
scripting language for web pages
<script type=”text/javascript”>
// comment
document.write(‘Webcamp KK’);
alert(‘This is awesome!’);
</script>
11. FIXED LAYOUT
Better control on looks and content
Easier to read and style
Might cause horizontal scroll on small screens
Changing font size might break layout
12.
13. FLUID LAYOUT
Adapts to any screen size
Handles font size change well
Less control on the placement of content
Content might be stretched or squashed
14.
15. SOME TIPS
Start with Fixed Layout. 960px / 1140px
Use base CSS (Bootstrap, Blueprint, GGS)
Mix Fluid layout for certain content (e.g. pics)
Learn how to float and position elements
19. USEFUL STUFF
Lettering.js - jQuery plugin for font control
FontsInUse.com - Discover fonts being used
FitText - jQuery plugin for fluid headlines
HTML ipsum - placeholder text in HTML
20.
21.
22. SOME TIPS
Body font size 12-14px
Line height at 1.5em
Left align body of text
Use preset in CSS base frameworks
Test with different content
24. WHITESPACE
Goes together with typography
All the negative spaces between content
Key to aesthetic composition
There are active and passive whitespace
25. WITHOUT WHITE SPACES
Pellentesque habitant morbi tristique senectus et
netus et malesuada fames ac turpis egestas.
Vestibulum tortor quam, feugiat vitae, ultricies eget,
tempor sit amet, ante. Donec eu libero sit amet quam
egestas semper. Aenean ultricies mi vitae est. Mauris
placerat eleifend leo.
•Lorem ipsum dolor sit amet, consectetuer
adipiscing elit.
•Aliquam tincidunt mauris eu risus.
•Vestibulum auctor dapibus neque.
26. WITH WHITE SPACES
Pellentesque habitant morbi tristique senectus et
netus et malesuada fames ac turpis egestas.
Vestibulum tortor quam, feugiat vitae, ultricies
eget, tempor sit amet, ante. Donec eu libero sit
amet quam egestas semper. Aenean ultricies mi
vitae est. Mauris placerat eleifend leo.
• Lorem ipsum dolor sit amet, consectetuer
adipiscing elit.
• Aliquam tincidunt mauris eu risus.
• Vestibulum auctor dapibus neque.
27.
28. SOME TIPS
Practice and test with your content
Base CSS Frameworks provide good defaults
Use it to structure and emphasize content
Add padding to your text container
31. SOME THEORIES
Primary, secondary, tertiary colors
Analogous and complementary color schemes
Color contrast and context matters
Use nature as a guide
34. SOME TIPS
ColourLovers.com - Awesome color resource
Pick a color scheme and stick with it
Different color for link and visited link
Use colors for call to action
36. GRAPHICS
Visual impact & communication - branding
Easier to consume information - graphs
Complement or replace textual info - icons
Create emotional connection
37.
38.
39.
40. SOME TIPS
Famfamfam.com icon packs
iStockPhoto.com
PNGs for text, logos - Lossless compression
JPEGs for photos - Lossy compression
Avoid animation if possible
42. INFO SOFTWARE DESIGN
Most software is information software
Design of context-sensitive info graphics
What and how the information is presented
Approach as graphic design first
43.
44.
45.
46.
47. MORE INFO
Read Magic Ink Article by Bret Victor
Finish it. It’s a MUST READ
Showtimes.my was inspired by it
49. USER EXPERIENCE
How a user feel when using your site
Design a site that’s fun to use
Match the conceptual model of the user
Used to shape the user behavior
50. UX IS NOT...
Just the user interface or usability
About the technology or even the web
Focused just on the user but the entire product
Expensive but not easy either
51.
52.
53. USER EXPERIENCE IS
PART OF YOUR PRODUCT
UX IS NOT A STEP IN THE
PROCESS BUT THE PROCESS
58. LOOK AT PRETTY SITES
Browse sites like Smashing Magazine
Learn how and why a design is good
Sharpen your design sense with exposure
Start noticing good design in products
60. COPY, PASTE, MODIFY
Start with a design you like
Use it as a base and modify to your needs
Nothing beats hands-on experience
Never plagiarize and give credit where it’s due
62. DESIGN AROUND CONTENT
Most websites exist mainly to deliver content
Design should complement your content
Understand the nature of your content
Content should be first-class citizen
64. THINK LIKE A USER
Try to actually use the site you designed
Imagine yourself as a new visitor
Make sure user gets what they are here for
Bring in fresh eyes for feedbacks
66. ATTENTION TO DETAILS
Don’t include unnecessary details
Do care about every little details
Separates good design from the great
E.g. iCloud logo infused with golden ratio
69. ASK FOR HELP
Don’t be shy and get input from others
A lot of design is trial and error
Familiarity trumps cool design any day
Adopt good ideas, ignore the bad ones
70. Most people make the mistake of thinking
design is what it looks like. People think it’s
this veneer — that the designers are handed
this box and told, ‘Make it look good!’ That’s
not what we think design is. It’s not just what
it looks like and feels like. Design is how it
works.” - Steve Jobs
71. CREDITS
Colors by MMMiguel @ ColourLovers
Smashing Magazine for awesome info
Magic Ink Article by Bret Victor
Help from Marissa - real designer
Get the complete list of links at my blog