Web Design 101

WEB DESIGN 101
basic stuff on designing for the web

ABOUT T.S. Lim
ME Flexnode Solutions
Web Developer
Used <blink>
Decent Designer?
www.clipsoﬂogic.com

WHAT YOU NEED TO KNOW
ABOUT WEB DESIGN

HOW YOU CAN IMPROVE
YOUR WEB DESIGN

8 THINGS
YOU NEED TO KNOW
ABOUT WEB DESIGN

HTML
hypertext markup language
<html>
<head>
<title>Webcamp KK</title>
</head>
<body>
<h1>This is awesome</h1>
</body>
</html>

CSS
cascading style sheets
body {
background-color: black;
}

h1 {
font-size: 40px;
text-decoration: underline;
}

JAVASCRIPT
scripting language for web pages
<script type=”text/javascript”>

// comment
document.write(‘Webcamp KK’);

alert(‘This is awesome!’);

</script>

FIXED LAYOUT
&
F L U I D L AYO U T

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

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

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 ﬂoat and position elements

TYPOGRAPHY
SIZE serif sans serif cursive
{ line-height: 1.5em }
l e t t e r s p a c i n g text decoration
left all about the arrangement right

CUSTOM FONTS
Google Web Fonts - @font-face
Typekit - @font-face
Cufon - VML & Canvas
sIFR - Scalable Inman Flash Replacement

USEFUL STUFF
Lettering.js - jQuery plugin for font control
FontsInUse.com - Discover fonts being used
FitText - jQuery plugin for ﬂuid headlines
HTML ipsum - placeholder text in HTML

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

WHITESPACE
Goes together with typography
All the negative spaces between content
Key to aesthetic composition
There are active and passive whitespace

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.

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.

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

SOME THEORIES
Primary, secondary, tertiary colors
Analogous and complementary color schemes
Color contrast and context matters
Use nature as a guide

Primary colors
Secondary colors
Tertiary colors
Analogous colors
Complementary colors
Colors from Nature
Colors Context

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

GRAPHICS
Visual impact & communication - branding
Easier to consume information - graphs
Complement or replace textual info - icons
Create emotional connection

SOME TIPS
Famfamfam.com icon packs
iStockPhoto.com
PNGs for text, logos - Lossless compression
JPEGs for photos - Lossy compression
Avoid animation if possible

7. INFORMATION
SOFTWARE DESIGN

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 ﬁrst

MORE INFO
Read Magic Ink Article by Bret Victor
Finish it. It’s a MUST READ
Showtimes.my was inspired by it

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

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

USER EXPERIENCE IS
PART OF YOUR PRODUCT

UX IS NOT A STEP IN THE
PROCESS BUT THE PROCESS

Facets of UX by Peter Morville

UX TOOLS
Wireframe & Prototyping - Balsamiq Mockups
A/B Test your design - Optimizely
Analyze user behavior - KISSmetrics
Survey and ask for feedbacks - Usabilla

6 WAYS
YOU CAN IMPROVE
YOUR WEB DESIGN

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

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

3. DESIGN AROUND
YOUR CONTENT

DESIGN AROUND CONTENT
Most websites exist mainly to deliver content
Design should complement your content
Understand the nature of your content
Content should be ﬁrst-class citizen

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

5. PAY ATTENTION TO
THE DETAILS

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

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

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

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

Web Design 101

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Web Design 101

Similar to Web Design 101 (20)

Recently uploaded

Recently uploaded (20)

Web Design 101

Editor's Notes