How to make a website that doesn't suck in under an hour AIGA

with Matt Ladner | @netfuel

Who is a one hour website for?

This website is NOT for:• A client that needs several page templates.• A client that is unclear about what they need in a website.• A designer that has the time and budget to build a highly customized experience.

This website is for:

This website is for: MICAH!• Has a limited time and budget.• Needs it to work well on mobile devices and tablets.• Needs a clean and professional way to present himself in a rather hassle free website.

Lets gather some resources.

We have the following:• Images of Mica’s work.• His contact information.• He has given us some examples of sites he likes and we have some ideas for esthetics.

We need the following:• To pick a framework to build the site on.• To build the layout of the site.• Add buttons and calls to action.• Test the site.

What is a framework?The framework is a pre built set ofcode that aims to alleviate theoverhead associated with commonactivities performed in Webdevelopment.

What makes it awesome? It allows us to layout and build websites extremely fast without having to start from scratch. It also lets us make things adjust for mobile and tablets very easily.

Show me some...

Less Framework http:// lessframework.com/• Is awesome for experienced web monkeys.• Has great typography.• Works great on all devices.

1140 CSS Grid http://cssgrid.net/• Is easy for beginners.• Accommodates large screens.• Comes with a Photoshop template for you to build on.

Skeleton Frameworkhttp://getskeleton.com/• Simple Simple Simple.• Looks Great out of the box.• Has lovely typography.

Hundreds more exist.

So back to this guy:

He needs a site to get him a job!• Lets list a small portfolio of work.• Some featured work.• List his skills• Have some contact information.

Lets get down to business

Stop...Resource Time!

Coda for Machttp://panic.com/coda/Any text based editor willdo. I prefer Coda becauseof its clips feature.

Coda Clipshttp://coda-clips.comLots and lots of prebuildclips for you!

JumpCut for Machttp://jumpcut.sourceforge.net/Any text based editor willdo. I prefer Coda becauseof its clips feature.

Ditto for Windowshttp://sourceforge.net/projects/ditto-cp/I have not tested this butit comes highlyrecommended and isopen source (free)

Google Web Fontshttp://www.google.com/webfontsHundreds of awesomefonts for use on ANYwebsite.

HTML Ipsumhttp://html-ipsum.com/Ipsum for HTML Code.Clips are included withthe tutorial.

CSS3 ButtonsA library of pre built andcoded buttons. Justattach the style sheet!

Subtle Patternshttp://subtlepatterns.com/Awesome, Subtlebackgrounds that repeatwith ease! They alsoinclude a photshop ﬁle.

Wufoohttp://wufoo.com/Really simple forms forany website.

Type Kithttp://www.typekit.comAwesome web fonts fromthe worlds bes foundries.

slideshare:resources download:test site URL:

@netfuel ( if your brave )@lokion ( if your smart )

How to make a website that doesn't suck in under an hour AIGA

by netfuel on Dec 15, 2011

Accessibility

Categories

Upload Details

Usage Rights

Statistics

How to make a website that doesn’t suck in under an hour AIGA — Presentation Transcript