Sketching out your Perfect Website
You’ve decided it’s time to start solidifying ideas for your ideal website. You have no doubt spent countless hours in the planning phase identifying your target audience, design considerations, and of course you have a solid idea of your overall content strategy. If you haven’t, then do yourself a favor and take a look at The Complete Guide to Building Your Personal Brand, What Makes an Effective Website? and How to Design a Website for a Specific Target Audience? before reading on.
There are many other considerations you should make before plunging into drafting your ideal website. The resources listed below should help get you started. They will help you with the process of sketching out your website, structure, and hierarchy.
Sketching out designs – Useful Resources
Why do we need to bother sketching out our design when we could go straight to coding our markup? Sometimes it is helpful to establish an overall organization of your project including the hierarchy of how all of your content pages will fit together. Before reviewing the resources below, be sure to check out Sketching: How a Simple Pen and Paper Can Transform Your Web Designs. The list below include some tools and resources that you might want to consider for your web project or future work.
Web Style Guide Information Architecture – Site Structure
This article provides a great overview of developing your overall site structure including the functionality of your site, overall navigational, and structural themes.
How to create a site structure to enhance SEO
Any website you consider building should incorporate a structure that will enhance your overall search engine optimization. This article discusses the importance of creating the optimal user experience and taking advantage of other SEO techniques including site links, optimization for crawling, and a detailed six step plan.
Website Planning & Developing Your Website Blueprint
1st Webdesigner outlines the creation of a website blueprint and covers the importance of planning, creating your own architecture, content and design document, and lists different website planning tools. In addition to this the article goes into detail on preparing for your web design project and provides checklists as well as an overall beginner’s guide to wireframing.
Pencil Project is a great free prototyping tool that provides a quick way to design and sketch your ideas. It provides easy GUI prototyping tools, built-in shape collections, diagram drawing support, and page linking.
Gliffy is a great tool for quickly developing diagrams and charts. It has a free trial and a low cost for licensing and it integrates into other popular tools from Atlassian including Jira and Confluence.
This is one of my personal favorites for diagrams, which provides a lot of charting tools and integrates into third party systems. It is fully web-based and also provides an education / student version for free.