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 ...
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.•...
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...
We need the following:• To pick a framework to build the  site on.• To build the layout of the site.• Add buttons and call...
What is a framework?The framework is a pre built set ofcode that aims to alleviate theoverhead associated with commonactiv...
What makes it awesome?  It allows us to layout and build  websites extremely fast without having  to start from scratch. I...
Show me some...
Less Framework         http://  lessframework.com/• Is awesome for experienced web monkeys.• Has great typography.• Works ...
1140 CSS Grid   http://cssgrid.net/• Is easy for beginners.• Accommodates large screens.• Comes with a Photoshop template ...
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 ...
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 ...
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 file.
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 )
Upcoming SlideShare
Loading in …5
×

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

1,061 views

Published on

Published in: Technology, Design
1 Comment
0 Likes
Statistics
Notes
  • Be the first to like this

No Downloads
Views
Total views
1,061
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
11
Comments
1
Likes
0
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • How to make a website that doesn't suck in under an hour AIGA

    1. 1. with Matt Ladner | @netfuel
    2. 2. Who is a one hour website for?
    3. 3. 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.
    4. 4. This website is for:
    5. 5. 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.
    6. 6. Lets gather some resources.
    7. 7. 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.
    8. 8. 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.
    9. 9. What is a framework?The framework is a pre built set ofcode that aims to alleviate theoverhead associated with commonactivities performed in Webdevelopment.
    10. 10. 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.
    11. 11. Show me some...
    12. 12. Less Framework http:// lessframework.com/• Is awesome for experienced web monkeys.• Has great typography.• Works great on all devices.
    13. 13. 1140 CSS Grid http://cssgrid.net/• Is easy for beginners.• Accommodates large screens.• Comes with a Photoshop template for you to build on.
    14. 14. Skeleton Frameworkhttp://getskeleton.com/• Simple Simple Simple.• Looks Great out of the box.• Has lovely typography.
    15. 15. Hundreds more exist.
    16. 16. So back to this guy:
    17. 17. 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.
    18. 18. Lets get down to business
    19. 19. Stop...Resource Time!
    20. 20. Coda for Machttp://panic.com/coda/Any text based editor willdo. I prefer Coda becauseof its clips feature.
    21. 21. Coda Clipshttp://coda-clips.comLots and lots of prebuildclips for you!
    22. 22. JumpCut for Machttp://jumpcut.sourceforge.net/Any text based editor willdo. I prefer Coda becauseof its clips feature.
    23. 23. Ditto for Windowshttp://sourceforge.net/projects/ditto-cp/I have not tested this butit comes highlyrecommended and isopen source (free)
    24. 24. Google Web Fontshttp://www.google.com/webfontsHundreds of awesomefonts for use on ANYwebsite.
    25. 25. HTML Ipsumhttp://html-ipsum.com/Ipsum for HTML Code.Clips are included withthe tutorial.
    26. 26. CSS3 ButtonsA library of pre built andcoded buttons. Justattach the style sheet!
    27. 27. Subtle Patternshttp://subtlepatterns.com/Awesome, Subtlebackgrounds that repeatwith ease! They alsoinclude a photshop file.
    28. 28. Wufoohttp://wufoo.com/Really simple forms forany website.
    29. 29. Type Kithttp://www.typekit.comAwesome web fonts fromthe worlds bes foundries.
    30. 30. slideshare:resources download:test site URL:
    31. 31. @netfuel ( if your brave )@lokion ( if your smart )

    ×