Designing a Website


go to http://www.samavb.com

This is essentially the designing your logo section, part II. When designing a website, you'll need to consider these options:
  1. Do I want to design this myself?
  2. Do I want to use an existing web template?
  3. Do I want to hire someone to build this for me?

You're also going to want to consider your CMS. What works for, say, a WordPress blog might not work for a Drupal site. And some CMS's, like Tumblr, are better about integrating the template-buying process into setup.

Design It Yourself

If you're going at it on your own, software might help you through the design process:
  • Dreamweaver -- Adobe's popular web design software, Dreamweaver is available for $399, or $1,899 as part of the design premium collection (which includes Photoshop, Illustrator, InDesign and others). It's powerful software for both beginners and advanced designers.
  • Coda -- Web design software specifically for Macs. $99 per user. For advanced designers only.
  • TextWrangler -- A free, simple editor for HTML/CSS. TextWrangler's more advanced version, called BBEdit, costs $39.99. It's good software, but it's most effective for simple websites.
  • Espresso -- Web design software for Macs. $79 per user. Works with languages like HTML, CSS, Ruby and Python.
  • Headway Themes -- Create your own site on WordPress using their drag-and-drop editor. Allows for use of custom CSS. Prices starting at $68.

There are also web apps that to allow you to create, customize, publish and share original web pages.
  • ScrollKit -- Design for desktop or tablet
  • Marquee -- With Dropbox integration
  • Checkthis -- Publish and share simple web pages, based around stories, products or events
  • site44 -- Publish and share your HTML/CSS to custom URLs using Dropbox

A site like Usabillia (free, or $49+ per month) can help test your user experience and give you feedback as to how the site is being used and could be improved. Google's GoMoMeter (free) tells you how mobile-friendly your site is. ClickHeat is open-source software that tells you where people are clicking on your website. CodeNow! lets you test APIs on your site in real time.

You may also want to mock up your website first before you build it. Helpful mockup tools include:

If you're looking for online guides to teach you how to design and code, consider:

Using a Template

A template is a web design that you can plug into your website and customize. Several content management systems make it easy to integrate these plug-and-play templates.

For WordPress
Easily the CMS with the most pre-made template options. WordPress calls their templates "themes." You can find templates -- both paid and free -- at sites like:
  • The Theme Foundry -- Individual themes start at $68.
  • Elegant Themes -- Dozens of themes available, starting at $39 per year.
  • WooThemes -- Dozens of themes available, either on an individual basis (starting at $70) or as part of a yearly membership ($125), which gives you access to their full collection of themes.
  • Graph Paper Press -- Some themes free. Yearly subscriptions cost $99.
  • ThemeForest -- Hundreds of themes, most of which cost about $35.
  • Press75 -- Dozens of the themes, starting at $100.
  • Themes Kingdom -- Dozens of themes. Yearly subscriptions cost $29.
  • ThemeInn -- Custom themes
  • Obox Design -- Custom themes for WordPress starting at $60.
  • Thesis -- A framework for customizing your own WordPress theme, starting at $87.
  • Genesis -- A framework for customizing your own WordPress theme, starting at $59
  • StudioPress -- Dozens of themes built on the Genesis framework, starting at $79.
  • Themedy -- Dozens of themes built on the Thesis or Genesis framework, starting at $35
  • Ultimatum -- Drag-and-drop WordPress layout editor, starting at $65
  • Organic Themes -- Dozens of themes, starting at $69.
  • WordPress offers free themes via their website.
  • SmashingMag also offers hundreds of free themes, including these.
  • WordPress

For Drupal

For Tumblr
Tumblr integrates their theme store into their website. Some are free. Others cost between $9 and $49. They offer thousands of theme options.

Some other popular theme collections for Tumblr:
  • PixelUnion -- Dozens of themes, most for about $49.

Hiring a Pro

Maybe you've decided that you need to hire someone to design a custom site for you. This isn't nearly as easy as finding a good logo designer. There are big firms out there that do excellent design. There are talented freelancers who do excellent design.

Somewhere out there, you'll find the designer who knows how to do what you want to do.

A few things might help you in this process. Start by writing a spec and outlining the site as you want it to exist.

One of these sites might help you find the right designer:
  • DesignCrowd -- A crowdsourcing design site. You submit your site and get dozens of designs back. Prices start at $320.
  • MycroBurst -- A crowdsourcing design site. Prices vary.
  • ScriptLance -- A crowdsourcing design site. Prices vary.
  • Elance -- A job board featuring thousands of design pros. You can look through previous jobs that the designer has done and see feedback from prior clients.
  • oDesk -- Like Elance, a job board featuring thousands of designers (as well as other freelancers).

But this might help even more: Go search the web for sites you like. Find sites with design you enjoy. Contact the people behind the site and find out who designed it.

Creating an App

If you're looking to create an app for your brand, consider:
  • AppTank -- Matches brands with developers to create apps. Competitive bid process keeps prices reasonable.
  • AppInventor -- Courses and tutorials for building apps for Android

Pre-Launch Landing Pages

While your site's being developed, you may want to create a placeholder page on your domain to let users know that your site will be launching soon. Tools to create simple launch pages include:

Recommended Readings