Notes

Some of the companies I was chatting to:

• Lytics – analytics tool
• Client Show – tool for showing clients stuff
• Sysomos – social media management for businesses
• iStock Photo – the world’s premier stock photography website
• Shutter Stock – also a very good royalty free photography site
• Snap Pages – simple website creation
• Rackspace – web hosting
• OneSite – social network solution
• Appiction – iPhone development
• Idea Foundry – training

The big brands are also here like Google, Microsoft etc.

There’s a 3D Panasonic TV on display and its absolutely amazing. Like looking through a window rather than at a TV. Apparently these are going to be the next big thing and will be in homes within the month.

Would be great to see some Northern Ireland companies here this time next year.

10 Commandments of UX

By Nick Finck and Raina Van Cleave.

Great talk about UX and what it means.

Notes

• UX is a focus
• The core elements are represented by the honeycomb diagram
• The user is always right
• Visualise your user – what do they do, what do they look like, what do they wear?
• Find the user’s sweet spot, which is a cross between your objectives, technology requirements and the user needs
• 95% of users aren’t reading 80% of your content – this makes your content even more important
• Access to your site is for everyone, not just your core users (all ages, all cultures, all devices)
• Think about the 1 thing users should be able to do and focus on that
• Learn from failure – Einstein, Jordan, Walt Disney all failed but got back up

CSS3 design with HTML5

Panel

An intro into CSS3 and HTML5.

Notes

• It doesn’t have to look the same in every browser
• There are HTML5 and CSS3 techniques you can use today
• Educate IE6 customers – if need be use the “it’ll cost more to make sure it looks the same on IE6″ technique
• HTML5 doctype is very simple – once you declare it you’re ‘buzz word’ compliant
• When using the new HTML5 elements use the IE Javascript fix (like this one)

Awesome day and loads of parties to finish the day off.

I’ve setup a posterous blog for various SXSW tidbits if you want to follow it too.

Beauty in web design

By Cennydd Bowles, Clearleft

The talk focused on created masterpieces in web design. To date we haven’t really had any – not to the measure of other masterpieces such as the IBM logo, London Tube Map or the intro credits to Se7en.

Notes

• We’re kinder to attractive people
• Beauty makes things easier to use – our brains respond differently to aesthetically pleasing objects
• 3 types of beauty – universal sociacultural and subjective
• 3 modes of design – visceral, behavioural and reflective
• How to get to your masterpiece – get emotional, think bigger, lead, thing long term, broaden horizons, be brave.

Get stoked on web typography

By Samantha Warren

Samantha’s talk was about using beautiful typography on websites, pushing the boundaries and not just settling for Georgia or Arial. Very inspiring and some great examples used throughout her presentation.

Notes

• It’s not about what font you use, it’s how you use it
• Get stoked = be completely and intensely enthusiastic about type
• Find the emotion of your site and based the type choice around that
• Start to experiment with modern web type solutions: Cufon, @Font-Face, TypeKit, FontDeck
• Start to endorse CSS3 and make use of text-shadow, multiple columns and rotation
• Create your own font for $10
• Or create a more professional font (for a lot more)

Simple steps to great web design

By Matthew Smith, Squared Eye

Unfortunately the fire alarm went off half way through Matthew’s talk and we had to evacuate, which is a real shame as he was building up to something great. But the basis of his talk was about how it’s not just about creating a lovely looking website

Notes

• Design around the content
• Great web design helps content get stuff done – on the web with pleasure
• Know your audience
• Know your content
• It’s all about knowing the core of what you’re designing for

So far so good for SXSW. Roll on Day 2.

Very excited. Love it in the States and have wanted to go to SXSW for years now. Austin looks like a great place.

The South by Southwest® (SXSW®) Conferences & Festivals offer the unique convergence of original music, independent films, and emerging technologies. Fostering creative and professional growth alike, SXSW® is the premier destination for discovery.

Northern Ireland attendees

Thanks to Invest NI they’re supporting the trip along with several other creative businesses from Northern Ireland:

• AirPOS
• Andy Good
• Bodyguard
• Digital Robot Software
• Film Trip
• No More Art
• Origin Partners
• Sonic Academy
• Frank

There have been a couple of sites setup so you can check our progress while we’re out there:

• NI @ SXSW (thanks to Quadriga)
• SXNI (thanks to Andy)

And of course keep an eye out for tweets tagged with #sxsw #nisxsw #sxni (yep, 3 tags for you).

Useful apps

TripIt – just forward on your travel confirmation emails and it puts together your itinerary. Magic!

SitBy.us – tidy little app listing the interactive schedule. Decide what you’re interested in and then check your schedule. You sign in with Twitter so you can also see where your friends are going.

Sched – another useful scheduling app. Haven’t played around with it much but seems to have everything covered.

Happening App – a useful iPhone app showing you all the events happening around your current location.

See you there?

Would love to know if you’re heading or if you know anyone heading. Looking to meet up with lots of new people, especially other designers, and get chatting over a beer at one of the many parties.

Planning to do a bit of blogging while I’m out there so will be sharing all that I learn and observe.

David, responsible for the popular Logo Design Love blog as well as his own personal blog, is a brand identity designer who has worked with top brands globally.

When you finish reading this book, you hopefully will be well-prepared to go out and win your own clients and create your own iconic brand identities.

Who is it for?

The book is primarily for graphic designers. As David shares his experience of being a designer it would be mainly for beginner/intermediate range, but a good read for all.

There are a lot of things shared about dealing with clients and being self employed so I would recommend this to any creatives who freelance or deal with clients.

What’s in it?

• Lots of great examples of brand identities (and how the designers got to the finished product)
• Step by step advice on designing the perfect logo for your brand
• Dealing with clients
• Project managing a logo design project
• Pricing your service as a designer
• From pencil to PDF
• Experience from a self employed graphic designer

Verdict

Very inspiring book. I haven’t done any logo design in a while, after deciding to focus more on web stuff, but now I can’t wait to get stuck into a logo project, even if it is just for myself. The book is full of inspiration and ideas.

Also something that you get out of the book is tips on dealing with your clients and being a freelancer. David shares a wealth of knowledge, a lot of which I can relate to and a lot of which I can take advice from. If you’re new to freelancing, whether you’re a graphic designer, illustrator, web designer or developer, you will be able to learn from this.

Very glad I bought this book.

Pull quotes

The average American sees 16,000 advertisements, logos, and labels in a day

What you take away is just as important as what you keep

People often choose products based on their perceived value rather than their actual value

Color really is secondary to the shape and form of your design

Designers who advertise a list of predetermined prices for x amount of concepts with x rounds of revisions are attempting to commoditize a profession that by definition cannot be commoditized.

Paula Scher, “It took me a few seconds to draw it, but it took me 34 years to learn how to draw it in a few seconds.”

always give the client an estimate that is longer than the amount of time you’re guessing it will take

Some sound advice!

Having your own reusable framework is a great way to save time and provide a basis for your next website.

Your own reusable framework is by no means perfect for every project that you work on but it is a great starting point and it can evolve over time.

This post looks at the current framework I have in place and breaks it down. Please feel free to reuse this as you see fit and also point out anything that you feel would be beneficial to add (or remove).

Framework structure

All files are kept in a folder simply named ‘NewSite‘ which contains the following:

ie.css
A stylesheet specific for IE6 (or sometimes 7) that at the end of a project will usually contain various CSS bug fixes and PNG transparency fixes.

images/ directory
For storing all images for the website.

index.html
The main template for the website. Depending on CMS or programming language I use this will be chopped up at some stage.

print.css
A stylesheet used when printing a document.

scripts/ directory
For placing all the project’s Javascript files.

script.js
A default script for placing most of the project’s Javascript code, stored in the scripts directory.

style.css
The main stylesheet.

Now lets look at what each file contains.

index.html

This is the main template for any website and the starting point for marking up.

<!doctype html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<meta name="description" content="">
	<meta name="keywords" content="">
	
	<link rel="icon" type="image/x-icon" href="http://cdn.leemunroe.com/favicon.ico" />
	
	<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
	<link rel="stylesheet" type="text/css" href="print.css" media="print" />
	
	<!--[if lt IE 7]>
	<link rel="stylesheet" href="ie.css" type="text/css" />
	<![endif]-->
	
<!-- 	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> -->
	<script type="text/javascript" src="scripts/script.js"></script>
	
	<title></title>
</head>

<body>

<p id="skipto"><a href="#main">Skip to content</a></p>

<div id="header" class="group">
	<div id="logo"><a href="/"><span></span></a></div>
	<ul id="nav">
		<li class="selected"><a href=""></a></li>
		<li><a href=""></a></li>
		<li><a href=""></a></li>
		<li><a href=""></a></li>
	</ul>
</div>

<div id="content" class="group">
	<div id="main" class="main">
	
	</div>
	
	<div class="sidebar">
	
	</div>
</div>

<div id="footer">
<p>Copyright &copy;</p>
</div>

</body>
</html>

Notes about the markup used:

• The doctype is HTML 5
• There is a ‘skip to content‘ link for screen readers (the style sheet will hide this)
• Uses a conditional statement to load ie.css for Internet Explorer browsers below version 7
• JQuery library is included using Google’s CDN (but is commented out until it is needed)
• The bare bones of the markup has been added

styles.css

Now lets look at the default stylesheet I’m using.

/*
Author: Lee Munroe
*/


/* 
# CSS contents ###################
* 1 Reset defaults
* 2 Layout
* 3 Nav
* 4 Headings
* 5 Lists
* 6 Images
* 7 Links
* 8 Forms
* 9 Tables
* 10 Typography 
* 11 Other
*/


/* 
# Colour reference ###################


*/
 
/*
# Reset defaults ################### 
*/

html, body, div, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p, blockquote, pre, form, fieldset, table, th, td { margin: 0; padding: 0; } 
a:link, a:visited{text-decoration:none;outline:none;}
html {overflow: -moz-scrollbars-vertical;}
#skipto{position:absolute;left:-9999px;top:-9999px;}
.group:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;}

/*
# Layout ################### 
*/

body{font:75%/1.5  "Helvetica Neue", Helvetica, Arial, sans-serif;color:#222;background:#fff;}

/*
# Nav ################### 
*/



/*
# Headings ################### 
*/

h1{}

h2{}

h3{}

h4{}

#logo{width:;height:;background:url(images/logo.gif) no-repeat;}
#logo a{display:block;height:100%;width:100%;}
#logo a span{position:absolute;left:-9999px;top:-9999px;}

/*
# Lists ################### 
*/



/*
# Images ################### 
*/

img{border:none;}
img.left{margin:0 10px 10px 0;}
img.right{margin:0 0 10px 10px;}

/*
# Links ################### 
*/

a{}
a:hover{}

/*
# Forms ################### 
*/



/*
# Tables ################### 
*/



/*
# Typography ################### 
*/

p{margin:0 0 1.5em;}

/*
# Other ################### 
*/

.right{float:right;}
.left{float:left;}
.clear{clear:both;}
.alignleft{text-align: left;}
.alignright{text-align: right;}
.aligncenter{text-align: center;}

Notes for the stylesheet:

• Author name at the top. I’ll also include the project name and date here. This is mainly for the records of anyone the site is handed over to.
• Using comments to break down the stylesheet into sections making it easier to scan down and find styles. Larger projects may have a different structure.
• A general reset for margins and padding. There are lots of more advanced resets out there but I find this basic one works well. Read about CSS reset here
• .group:after – the group class is applied to any element that needs cleared right after. Usually where there are 2 or more floats side by side.

ie.css

.group {zoom: 1;}

Notes:

• As it stands, only contains a fix for the .group class

print.css

#header, #footer{display:none;}

Notes:

• Removes the header and the footer when printing. The final file will need tinkering with though.

script.js

/*
$(document).ready(function() {
	
});
*/

Notes:

• The document ready function is for JQuery Javascript functions that you want to run when your page loads. This is commented out until needed.

Conclusion

Download framework as zip file

Please feel free to use these templates in your own projects.

Again, this is just a framework I’ve put together over time. I recommend you adapt it to suit your own environment.

What does your framework look like? Anything useful I’ve missed?

Further reading

More useful templates/frameworks to check out:

• 960 Grid System
• Blueprint

Old site

New site

I wanted a minimal, light-weight site that was more blog focused, while also experimenting with some CSS3 niceness.

I’ll follow up next week with a few notes on design decisions and techniques I’ve used.

Feel free to let me know what you think.

You also want to make sure that visually your website has a hierarchy and is broken down in order of ‘importance’. Call to actions, H1s and H2s will fall under the more important elements, then H3s, H4s and links, then paragraph text and other images towards the bottom of the scale.

A user should be able to look at a page and instantly recognise this hierarchy. Now here’s a useful way to check if your hierarchy is as clear as you hope it is.

Blur your vision

Usually after designing a website I’ll use this technique to check for visual hierarchy. Look at the website and blur your vision. Yep, sounds a bit weird, but what you’re trying to see is if the elements you want to stand out still stand out.

Blur your screenshot

So that your eyes don’t get sore and to give you a bit more time to analyse it, take a screenshot of your website, bring it into Photoshop and give it a Gaussian Blur (Filter > Blur > Gaussian Blur) of 5px.

Here are the results.

Does it work?

If you find you need to improve the visual hierarchy for different elements you can alter the following.

• Size
• Contrast
• Colour
• Shape
• Position
• Whitespace and padding

You could go one better and blur the screenshot by 10 pixels to see if your ‘banana’ still sticks out.

What do you think, does it work? Does it help?

Further reading

• Five second test
• Call to action buttons
• Visual hierarchy in web design
• Contrast and meaning

Here is a list of 10 websites (in no particular order) that I find useful and am constantly using. I’m also interested in what websites you swear by and use all the time, so please share in the comments below.

1. iStockphoto

iStockphoto is a collection of royalty free photos, illustrations, video and audio. You can search for these resources based on any keyword and purchase from only $1.

iStockphoto saves you time and money. Need a good photo for a website but don’t have the resources to setup your own photography shoot? iStockphoto will do the job, and you’ll be able to use the photos legally as they’re royalty free.

I find it really useful for illustration graphics. There are graphics available for $10 that could otherwise take you a day or two to design from scratch.

2. Instant Domain Search

Checks the availability of domain names using Ajax.

Very handy when you have a brain wave and need to check if the domain name is available.

3. Smashing Magazine

Smashing Magazine is the ultimate web design blog.

If you need to know how to do something, or need some inspiration, Smashing Magazine will undoubtedly have an article on it somewhere. All you need to do is search the site.

4. Stack Overflow

A question and answer site for programmers.

The great thing about Stack Overflow as opposed to other forums is there is no sign up required. And it has a great community around it that are always willing to help.

5. SEOmoz

SEOmoz is one of the best search engine optimisation related websites on the net.

I constantly find myself using the SEO tools available, especially Rank Checker that lets you check how your domains (and client domains) are ranking on each search engine for keywords.

6. Lovely Charts

With Lovely Charts you can create user flow diagrams and sitemaps.

A great little app for starting off a project and getting your website flow down to a tee. Free to use.

7. Balsamiq

Balsamiq lets you create wireframes.

It’s a quick way of doing up wireframes and it’s meant to look quick so that it’s obvious to the person you send it to that it is rough. Saves a lot of time and the online version is free.

8. Notable

Notable enables you to take screenshots and then make notes on top of the design.

Great way for teams to provide feedback on designs, super easy to use and lovely user interface.

9. Campaign Monitor

For email marketing. Setup, manage, send and analyse email campaigns.

Campaign Monitor provides an easy to use interface for creating and managing your email campaigns. Once your campaign is sent, it provides statistics on how many emails opened, bounce backs, unsubscribed etc.

Very good value for money at $5 per campaign +$0.01 per recipient.

10. Delicious

Delicious lets you bookmark and tag websites.

Use delicious to tag useful or inspiring websites you come across so you can come back to them when you need them.

Bonus: Dribbble

Still in ‘invite only’ mode, Dribbble is an app for designers to share sneak peaks of your work, which can then be liked and commented on by other designers.

There is some amazing work being showcased on Dribbble.

Bonus: TV Shack

Streams a load of movies and TV shows.

Not so specific to web designers but a good resource to catch up with the latest episode of Lost, 24 and Curb Your Enthusiasm.

What have I missed?

What websites do you use regularly that other designers will find useful?

Dan is well known for his clean markup, embracing advanced CSS and his love of ampersands so I was really looking forward to this book.

Handcrafted CSS is for the CSS designer who wants to go the extra mile.

Who is it for?

This book would be more for intermediate/advanced designers, which is great as there are so many ‘beginner’ books out there it was nice to read a book that just got stuck in.

It’s for designers who care about the little things – the clean markup, the grid, the 1 pixels and the ampersands.

What’s in it?

• Simple tricks for dealing with everyday CSS obstacles
• Bulletproof CSS3 techniques
• The fluid grid
• Floats (and clearing them)
• Frameworks (and crafting your own)
• Small details that can make a great design
• Stuff about ampersands

Verdict

I really enjoyed this book. I was able to learn from it, advance current techniques and be inspired by it.

It’s easy to relate to everything outlined in the book. Some things were a reminder while others I had never thought of before. Truly inspired to go away and start crafting something special.

Not only is the content good, even how the book is laid out is gorgeous with well spaced pages, nice formatting and an embossed front cover.

Highly recommended.

Pull quotes

…the larger the target, the quicker and easier it is to get there.

but the important thing to remember here is that this method degrades beautifully…The design is intact. It’s functional and readable.

…the rounded corners in Mozilla- and WebKit- based browsers are visual rewards rather than necessary requirements.

The problem with the fixed-width approach to interface design is that it’s asking the user to adapt to the design rather than the reverse.