Wireframing Website Guides

Touch Interface

A website wireframe helps you to define and document the layout and relationship between web pages. Wireframes are the first and most important step in the design process. Six Revisions’ Ultimate Guide to Website Wireframing explains why you should use wireframes, how to create one and different tools for creating wireframes. If you want examples on developing wireframes, Web Designer Depot’s Using Wireframes to streamline Your Development Process shows you different examples that you can learn from and explains the benefits of wireframing.

Need to create a wireframe in Photoshop or Fireworks?

You can follow these tutorials to master creating a wireframe in Photoshop and Fireworks:

*Image: Pixomar / FreeDigitalPhotos.net

Begin and End With a Sitemap

Web BrowserPlanning a website? You’ll need a sitemap or a list of web pages. You can start with a few pages or create 2,000 pages. It depends on how big you want your website to be.

Start with the Basics

Every website should have the following pages:

  • Home The home page is the first page of your website. This page introduces people to your company and your products or services.
  • About Us The About Us page allows you to share your company’s history, your employees and and any other information that you wish to share.
  • Contact Us The Contact Us page lets you tell people how to contact you and may include a simple email form.

Depending on your goals, you may need to add additional pages for products, services, news and updates or social media.

Build Your Sitemap

What tools can you use to build a sitemap?

Post Website Launch Sitemap

Once you have finished building your website, you’ll want to add a XML sitemap. An XML file that sits on your website and helps search engines to crawl your website more easily. You can use an XML Sitemap Generator or make it by hand. Google has a list of generators.

Cheat Sheets for HTML5, CSS3 and jQuery

ComputerThere are many cheat sheets or quick reference guides available for web developers. Use the following cheat sheets to quickly learn HTML5, CSS3 and jQuery:

If you need to find more cheat sheet for developers, devcheatsheet.com has them.

10 CSS3 Properties You Can Use In Your Projects

On net.tutsplus.com, Jeffrey Way demonstrates 10 CSS3 properties that you can use in your projects now. These properties may display differently in different browsers. If you are okay with that, go ahead and use these properties. Jeffrey demonstrates each property individually and shows you how to combine these techniques in a final project.

You can see some of these properties in action in following video: