Does it need a storefront? Do you need user comments? Will users need to create accounts? Is it article-oriented? Image-oriented? All of these questions and more will help inform the design and structure of the site. This can be a drawn-out process, especially for larger companies with lots of people involved in the project.
The wireframe allows you to see content structure and flow before committing to style choices. HTML wireframes aren’t static like PDFs or images, and allow you to quickly move content blocks around to create a new structure. A wireframe is interactive, which is beneficial to both the developer and the client. Since the wireframe is written in simple HTML, you can still navigate through it and get a feel for how moving between the pages works. This is something that can’t be expressed through a PDF concept.
This doesn’t include the header and footer. The gray boxes are simply a visual representation of the content that will be found on the page.
Pattern Lab. This site specializes in “atomic design,” where each piece of content is thought of as a “molecule” that makes up the larger page. Jumpcharts. This is a website planning and wire-framing service. It requires paid subscription but allows you to quickly build wireframes without worrying too much about coding. Wirefy. Wirefy is another “atomic design” system. The tools are available for free fro the developers.
Less is more with a wireframe. The goal is to simply build the structure. Visuals can be adjusted later with CSS and advanced markup.
You don’t necessarily need the body of an article, but you should at least have actual headlines.
Pictures. Audio Video Streams (Twitter) Facebook integration RSS Content feeds
Look for recent art photography grads for cheaper solutions than long-time professionals.
Beyond article content, there are written items that you will most likely during the website construction process. This could include contact information, company names, or anything else that will be used in multiple places on the site.
Don’t worry too much about the details, but do try to get it somewhat close to how the headers will eventually look.
Keep experimenting with the layouts for a few pages before moving on. Let others test them to see if they feel organic.
Include actual content in the mockup to ensure that everything looks good together.
Navigation Headers (
