Embed Size (px)
DESCRIPTION
An introduction to web design aimed at bloggers. I run through my design process, take a quick look at design theory, review potential design apps and share plenty of links for further reading. This was presented at BlogConf on Saturday 4th October.
Citation preview
My name is Benjy, and I’m a freelance web designer
based in Swansea.
I’ll be sharing my design process with you, along with lots of tips that
you can apply to your own blog.
If you have a laptop, feel free to check out the links and ask any questions along the way.
I’ve been working as a designer for about 10 years.
About seven months ago, I returned to freelancing.
Planning a design project
1. Users 2. Content 3. Objectives
I try to always frame each project by thinking about the
user experience (UX).
What do they want?
How can we help them to achieve their goals?
How can we make the experience better?
It’s good to have real data about your users.
Watching people use our website
Looking at Google Analytics
Creating Questionnaires
Credit: webaim.org/presentations/2012/html5future/overview3b
Iterate.
How does this apply to blog design?
Top tip #1
Release things often, get feedback and improve.
What kind of blog do you run?
What do your users want achieve?
Primary Goal: Consume content
Secondary Goals: Interact with you,
Subscribe to your articles
Content
Design is a bit like cooking, if you have good ingredients to start with,
you don’t have to work as hard.
“Content precedes design. Design in the absence of content
is not design, it's decoration.”
Credit: https://twitter.com/zeldman/statuses/804159148
The Written Word
Photography
openculture.com/2013/12/british-library-puts-1000000-images-into-public-domain.html
My Design Process
Case Study: A Simple Banner Ad
• Logo • Some copy • A Button or Call to Action • Imagery of a British
holiday destination
Design inspiration
Design Theory
Top tip #2
Learn as much as you can about typography.
“95% of the information on the web is written language. It is only logical
to say that a web designer should get good training in the main discipline of shaping written information, in
other words: Typography.”
http://ia.net/blog/the-web-is-all-about-typography-period/
The responsive web will be 99.9% typography.
http://www.welcomebrand.co.uk/thoughts/the-responsive-web-will-be-99-9-typography/
What is typography?
Typography is the practice of choosing fonts and laying them out in a way that helps the user understand the content.
What’s the difference between a typeface and a font?
A typeface is a family of fonts that contains a set of particular
styles and weights (e.g. Helvetica).
A font is a single member of that family (e.g.
Helvetica Light Italic).
Choosing a font
Font size
Measure is the length of single line of text, measured in characters.
Line
Height
A comfortable reading experience.
Typography Resources
• stylemanual.org
• practicaltypography.com
• webtypography.net
• fontfamily.io
• hellohappy.org/beautiful-web-type
Colour
green = go red = stop
Red signifies passion or danger Green signifies nature
Red can be a symbol of good fortune and joy in
Chinese cultures
RGB and Hex
Hex colour values look like this #FF0000
Colour Pickers
html-color-codes.info
Layout
Less is more
Less is more
Less is more
Create Visual
Hierarchy
Create Visual
Hierarchy
White space
Icons
fontawesome.io
Accessibility
leaverou.github.io/contrast-ratio
Performance
Downloading on mobile data plans can be slow
and expensive
Don’t use too many fonts
Games
bezier.method.ac
type.method.ac
shape.method.ac
color.method.ac
Design Applications
Top tip #3
Get familiar with code via Chrome Developer Tools
My favourite blogs
Further reading
Conclusion
Release things often, get feedback
& improve.
Learn as much as you can about
typography.
Get familiar with code.
