Official website for Web Designer - defining the internet through beautiful design
Author: Imagine Admin
8th November 2010

Wireframes to mockups with Fireworks

Wireframes are a simple and effective technique for exploring your layout options and demonstrating your concepts to clients

08 Other content

Wireframes to mockups with Fireworks

Add any other information to the page, things like copyright notices, secondary information or service links. In this case our site is going to collect card payments so we will need terms and conditions, and privacy links at the bottom of the page. So add a footer for those elements to your sketch too.

09 The grey box method

Wireframes to mockups with Fireworks

Open up a graphics package and start translating your sketches into wireframes. Keep the styling simple; for each of your boxes on your sketches, draw a grey box in the same position and label the box with text so you know what each one represents. Make sure all the boxes line up, so everything looks neat and uniformed.

10 Add in other elements

Wireframes to mockups with Fireworks

Now you’ve got your basic content areas mapped out, add the interface elements like navigation links and the buttons. For each one of the buttons draw a box in a darker grey and label each one in white. The names of the links would be decided from your site map; as we don’t have that just number them.

11 Add headings and text

Wireframes to mockups with Fireworks

Add the headings to the content boxes and placeholder text for the Banner Item text. Then add the text to the wireframe in realistic sizes, this will give you an idea of your layout’s overall use of space. If you don’t know the actual text you want to put in at this point, use Latin or placeholder text.

Pages: 1 2 3 4

  • Tell a Friend
  • Follow our Twitter to find out about all the latest web development, news, reviews, previews, interviews, features and a whole more.
    • Nuno

      Great topic!
      Very useful and well explained.

    • Brennen

      Very useful topic.

    • Ken

      The concept is sound (we use this process all the time) but the tool is not really one that I would go with. We use Visio and Axure for our wireframes and prototypes. Visio is great for static screens and Axure is like Visio on steroids in that it allows interactivity with a semi-functional html option.

      Discussing the needs of the site and mixing it in with the needs of the users is critical and no designing should be done before there is a good grasp of what both sides want and need from the site.

    • Mark “Chief Alchemist” Simchock

      Thanks Mark. Nice effort here.

      I concur with Ken – understanding and agreement, and then design.

      That said, what’s unfortunate is the majority of low-budget outfits skip this step. Which in turn leads to clients who believe that all there is to an effective website is a design. Design is just one sliver of the battle, eh?

      On the other hand, there are higher end outfits that do this step but lack the biz knowhow necessary to differentiate wants from needs. Needless to say, there are plenty of not-so-useful sites that in fact meet client wants. Unfortunately, it’s biz needs that are the most important.

    • Crimeadesign

      It’s very nice topic. I’ve found it usefull for me, thx!!!!

    • Pingback: Define and agree, and then design - Web Design Best Practices | Chief Alchemist

    • Web Design Nepal

      Really very useful topic for designers! Thanks…

    • web designer philippines

      Very nice topic for a designer like me… Thanks.

    • Web Design Finance

      Insightful information for a budding designer

    • Pingback: 1 November, 2011 « Blog Archive « Tillson

    • Pingback: Wireframing & Prototyping with Adobe Fireworks – Resources and Tutorials

    • Pingback: Web Development articles, tutorials, help » Blog Archive » Wireframing & Prototyping with Adobe Fireworks – Resources and Tutorials

    • Pingback: 14 November, 2011 « Blog Archive « Tillson

    • KoolDot

      Nice and most timely for us.

      We are in the process of putting together a mock-up site with Adobe Fireworks.


    • Bower Web Solutions

      I came across your article via a Twitter tweet and I think it is excellent. A lot of designers wan to immediately jump into creating “pretty pictures” and don’t want to the initial homework upfront. Planning is everything. Without a clear plan and effective layout, all the pretty images in the world won’t help your web design. Thank you for this article.