How to create
a website
Abilene Public Library, March 2012
Riley Wills (@rileywills
)
How to create
Who am I?
My name is Riley.
- Contributor to HTML5 Boilerplate
- Contributor to Bootstrap
- Developer of Percussion CM PHP Web Services
- Technology Consultant
- Web Development Project Manager at Abilene Christian University
Abilene Christian University
- Domain, acu.edu, registered in April of 1990
-
Started before:
Cascade Style Sheets
JavaScript
HTML 1.0
http://www.acu.edu, circa 1998
http://www.acu.edu, March 2012
Learn
Learn
So how can you score a bullseye as a web designer? Before you go any further, you need to define what hitting the bullseye in your project means.
Learn
- Purpose
- Goals
- Primary audience
- Why should visitors come to your website?
- What can be done on the website?
- Specific functionality requirements
- Deadlines
- Branding characteristics
Source: David Leeking, Creative Brief
Plan
Creating a plan on how you're going to make it happen
-
Design strategy
Handcrafted to fit the client's (your?) vision. Use the points from the Learn stage to craft this strategy. -
Research and Note-Taking
- Competing websites
- Design trends in the target market
- Colors, Fonts, Call to Actions
Plan
Sketching and Mock-Up
Resources
- Omnigraffle
- Adobe Illustrator or Photoshop
- Paint.NET
Plan
Pick Your Tools
Design
- Web designers will typically skip to this stage.
- Finishing the previous stages will make this stage a lot easier.
- Bring your mock-ups to life using:
- Paint.NET (Win32)
- Adobe Photoshop (Mac OS X/Win32)
- GIMP (Mac OS X/Linux)
- Don't be afraid of feedback
- Optimize your graphics for desktop and mobile visitors.
Code
Time to get dirty with HTML and CSS
-
Starting with a base template or framework
- HTML5 Boilerplate
- Bootstrap
- Start from scratch
-
Break the design into chunks, then start coding.
- Header
- Content
- Footer
- Validate and Test
Launch
- Purchasing the website hosting
- Purchasing the domain
- Transferring files to website
- Including Google Analytics
Maintain
- Create guidelines to maintain website
- Basic training
- Scheduling updates to keep website "fresh"
- Monitoring feedback
Resources
- A 6-step general process for producing a website
- HTML5boilerplate.com
- Bootstrap
- Paint.NET (Win32)
- Adobe Photoshop (Mac OS X/Win32)
- GIMP (Mac OS X/Linux)
- Dribbble
- Forrst
Time to exercise
Thank you!
- Slides available at d3fin3.me
Additional resources
- Learn how to code Hypertext Markup Langage (HTML)
- Learn how to code Cascade Stylesheets (CSS)
- Selling items on Etsy
- Bootstrap Starter Template
Feel free to contact me at Riley.Wills(at)gmail.com