How To Easily Create Website Mockups and Wireframes

How To Easily Create Website Mockups and Wireframes

One of the most important steps in designing a website is clearly communicating your ideas for the site layout. Often you may have an idea of how you want it to look but you don’t have the software or design skills to build a decent mockup. In additional, it’s very helpful to need to think through the different content that will be on each page as well as the different user flows through your site or app before you’re ready to start designing.  This allows you to quickly test and think through a number of different user experiences.

You may sketch something out, send links to other sites you like and don’t like or send emails trying to describe your vision. Well there is a much better way – wireframing.

A wireframe is essentially a blueprint of what your site will look like and is an essential  step in the web design process. A wireframe ignores design details and styles so that you focus purely on layout, organization and user journey through your site. Think about the most important elements on each page and determine if it’s clear that is where the user should look and click.

There are lot of great tools out there for wireframing and you can still use a paper and pencil, a napkin or a whiteboard. However, one of our favorite is a web application called Go Mockingbird. It’s a web based tool for creating and sharing your wireframes. Simply drag and drop the different site elements you need (maps, videos, text, toolbars, buttons, and more!) and move and resize them as needed. You can also connect pages with links so that you can click through the different pages of your wireframe just like you would with the completed site.

Here is a screenshot showing a wireframe mockup that we made in about 2-minutes

Screen shot 2013-10-07 at 9.30.11 PM

  • No web design knowledge needed!
  • No software to download, work in your browser!
  • All the user interface elements and web apps you need!
  • Create multiple pages and links!
  • Easy to share with your designer or colleagues

When developing a website design for our clients, we spend a lot of time upfront on the creative brief and wireframing to ensure we develop a site that meets and exceeds our client’s vision and expectations. Additional time spent in the planning stages can save twice as much time in the design and development phases.

If you have a design or layout in mind, this is the perfect tool to develop and share those thoughts. Try it now.