First a Sitemap then a Wireframe, right? Why not both, at once!

When it comes to ideating a website design, the usual MO for most is to conjure up a sitemap (which can be defined as a set of pages of a web site, which is accessible to both crawlers and users) before proceeding towards the design of a wireframe. This would be a logical and the most natural way to proceed, however, there is no reason why you cannot do both in tandem. This is certainly something that can save you quite a bit of time while also helping you get a better end result as well. Let’s put some real world practicality into this process. Hypothetically speaking, imagine your aim is to start an e-commerce site that sells groceries.

Now, observe the following two screen shots that have been designed on Creately.





The topmost screen shot illustrates your sitemap, while the one below shows you the wireframe for your homepage.








As you may be aware, both tools offer you the same information but in two different perspectives. The main advantages of this two-pronged approach is that you can:

  • Save time doing two tasks at once
  • Crucially, consider the wireframe to help you add or subtract more pages onto the sitemap as you go along, and
  • Collaborateand agree/disagree on whether you like the basic design or not in the first instance (as shown below). This is an approach that you can employ for every stage of your site, thereby discussing and finishing off the whole process page by page.

We hope this new approach helps you out when it comes to the process of effective diagramming. As always we encourage you to reach out to us via our support page. We’d certainly love it if you would like us to cover any topics that you may have any difficulty in. Make sure you stay tuned to this space for more information on sitemaps.

Posted via email from Creately | Comment »

Why are Wireframes so important?

While some of our recent posts walked you through the art of wireframing and its benefits, have you ever wondered why we’re going on and on about wireframes? Well the reason is rather simple. Wireframing is a valuable stage of any web design project, and now let’s take a step forward to understand why it is so important.

Wireframes are blue prints that illustrate the elements of a web site. Creating a wireframe gives the client, the developer and the designer an opportunity to take a critical look at the structure of the website and allows them to make revisions easily. Most teams discuss the requirements with their clients, and maybe sketch a few quick ideas on paper, and then jump right into Photoshop to design the layout or into Dreamweaver to do the coding. This is not always the best approach as this can result in hours of productive time being wasted on revisions. It’s always best to design wireframes as an initial step in the designing process to save loads of time in the long run. By doing this, you can address problems early and not wait to resolve the issues during the full color phase. Let’s take a look at why wireframes are so important for you and your clients.

Just simple and clear

Having an unpolished framework minus the aesthetic details eliminates the distraction of an element’s visual treatment. When reviewing a web page layout for the first time in color, it’s very easy for the client’s opinion to be influenced by the graphical design. For example – Imagine having the Call-to-Action (CTA) button in yellow and your client happens to hate the colour. Your client will likely be influenced by the CTA button’s appearance, which will probably make it harder for him/her to focus on the layout of the page. Feedback may be, “I think this needs to be re-done”, even though the layout works well. Thus, a simple wireframe without any colour distraction will let you get important feedback on sizing, layout and placement without your client making life harder for you.

Get a close-up view of the web site design

Project requirements might seem like excellent viable ideas during project initiation, but unfortunately projects are rarely simple. Anyone with experience will know the number of unforeseen problems that you’re likely to face when you start drawing the design ideas on paper. Wireframes take considerably less time to design than Photoshop layouts, so you can spend time early on using wireframes to map out the functionality of the pages. This will help you get a thorough understanding of the user experience at the early stage and therefore identify potential usability problems with the design. It’s better to make adjustments early rather than spending time on full revisions.

Know your client better

Working on wireframes will let you understand your client’s ideas better. The feedback you get from your client and your interaction with them will give you a better understanding of what to expect during future stages of the project. For example – when you initially lay out quick line drawings of the page, the client might comment on a particular element on the layout. As you’re working through the process of wireframing you may notice that the client is consistently commenting on certain elements. This will help you track the feedback patterns and learn about what your client wants to see and what they don’t like. Having this knowledge and applying it to the future phases of your project you will save considerable amounts of time.

Save time and effort

It takes a lot more time, effort and expertise to create a full colour layout on Photoshop than a wireframe. The first time your client will see the finished design is after you have spent all the effort creating it. But design changes are inevitable and more time and effort will be spent making the revisions. However, when we review wireframes, both internally and with clients, design changes can be reworked in a matter of minutes. If you don’t like the size of the button, make it smaller. If it is too small, then tweak it a bit to the perfect size. Wireframing makes it quick and inexpensive to make revisions in any day.

Wireframing Resources

Traditionally, quick and easy ways to communicate a design layout to others was hand drawn sketches, which was later replaced by full colour mockups done on Photoshop. However, in recent years, there has been a handful of drawing tools that allow designers to create interactive wireframes and user interface mockups that you can share with your client and team members on the project.

Here’s a simple wireframe built using Creately. This uses simple wireframe objects to represent the content and navigation on a web page to understand its real functionality.


I’m sure people have different approaches to wireframing. But, it is best to opt for an option which saves times, assists in collaboration and ultimately improves your productivity. Let us know if you’ve got any questions.

Posted via email from Creately | Comment »

The Art of Wireframing: A 10-step Guide

While our last post was all about highlighting some benefits and uses of wireframes, today’s post will focus on some tips that need to be taken into consideration when dealing with the process of wireframing. While some of them may not be focused directly on designing per se, there are certain elements like gathering feedback and adhering to a set objective, which are important to say the least.

As you may already know, a mockup is more inclined to show what a site will LOOK like; whereas a wireframe would be more focused on showing what a site DOES. This is a distinction that we do lose track of at times. The 10 steps shown below is an effective check list of what needs to be taken into account with regard to your wireframing project. These steps, if put into practice from your end, can help your client understand how exactly his site will function once it comes into fruition.

1. Set an achievable objective

A wireframe aims at solving all kind of problems. In addition to this, it will save you money and time since it is easier to change a paper wireframe or a prototype than to discover errors in many lines of code.

2. Functionality counts

Wireframes are about function, not form. That’s why they come before the actual design.

3. Who is in Charge?

 When doing a wireframe, remember that it’s vital to have someone in charge. This person should keep it current, manage feedback and relevant changes.

4. Is everyone involved?


It is imperative that you involve all staff in the process, from marketers to designers and developers and even users.

5. Put a deadline to the wireframe

If you want to keep a project moving, choose a deadline for your deliverables and make sure you stick to it.

6. Focused on users

 As mentioned in our little intro, a wireframe is all about showing what a site DOES, having said that you would also need to take into account the user experience. For instance, it is never a good idea to let a site be too detailed whereby a user is confused when it comes to navigating around. Always have the user in mind and see how you can make the whole website experience easy and convenient.

7. Consistency

 Consistency in your wireframe will assist users, developers and designers. When it comes to the repetition of groups of elements; remember that this can be useful to clarify things to users.

8. Does everyone understand your wireframe?

 Everyone from business men, to marketers and designers, should find the wireframe easy to follow. As a rule of thumb it is best that you ask someone not involved in the project to see whether it is easy to assimilate. Perhaps your mother?

9. Get feedback

 Ideally, an initial wireframe should gather feedback, a second one should show this feedback that was considered and the last one should be refined and polished.

10. The perfect tool

 Paper prototyping is an excellent way to get started. However, as the project evolves, it is best that you consider an app or wireframing software to bring your wireframe into fruition and to help you manage the many iterations and screens involved.


So there you have it, 10 easy but significant steps that you should stick to at all times when wireframing. We hope you enjoyed this particular blog post, stay tuned for posts on sitemaps during this week. We do encourage you to send us your thoughts or comments via our site. Till next time – keep those wireframes picture perfect!

Posted via email from Creately | Comment »

Some Benefits and Uses of Wireframes

From flowcharts to UML diagrams, we’ve offered quite a bit of important reading material for you out there. Our last post focused on wireframes and this present one also revolves around this really useful tool. To start things off we thought we’d focus a bit on the uses and benefits of wireframes.

You see, for the layman, the topic of wireframes may relate to just web designers and software developers. However, the fact of the matter is that wireframes are actually used by a variety of disciplines. While the main functionality of wireframes depends on the profession per se, find below some of the professions that utilize wireframes the most and how it benefits them.

  • Developers would use a wireframe to understand the functionality of a particular site
  • Designers would use a wireframe to push the user interface process
  • Information architects would utilize wireframes to illustrate the navigation paths that is present between pages
  • Business stakeholders would use wireframes to make sure that objectives and requirements are met via the design

Choosing to work with wireframes will lead to a collaborative effort since it helps link the information architecture to the visual design. Conflicts are sure to take place among these professional roles, as wireframing is a controversial part of the design process. Since wireframes signify an aesthetic that is very minimal, it is hard for designers to see how close the wireframe needs to depict actual screen layouts. Another difficulty with wireframes is that they don’t effectively display interactive details.

Generally speaking, wireframes usually have different levels of detail and may be split into two categories to show how closely they resemble the end product (this is also known as fidelity).

Wireframes that are Low-fidelity

Ideally low-fidelity wireframes (more like a quick mock-up) possess less detail and consume less time to produce. Additionally, these wireframes assist a project team to share effectively since they are usually abstract, with the use of rectangles and labelling to provide content. These wireframes are easy to identify with dummy content or symbolic content utilized to represent data when there is a lack of real content being available. For simple or low-fidelity drawings, paper prototyping is a common technique. Since these sketches are just representations, annotations—adjacent notes to explain behavior–are useful. However, online wire framing provides added benefits such as collaboration across distances, versioning and publishing for the next stage.

Wireframes that are High-fidelity

Then there are also high-fidelity wireframes. These are used for documenting, since they incorporate a level of detail that is very close to the design of the actual webpage or application, thus taking longer to create. With high fidelity wireframes, it is far easier to engage the client of a project since you are showing something that is close to the finished product. As mentioned previously, high fidelity wireframes gives a lot of priority to documenting. Needless to say, documenting is very significant since it is very important to communicate clearly with the next stage of a project. This would offer many benefits like reducing the chances of having to do re-work and also reducing time and money wastage.

We hope this gives you some useful insights into wireframes. However, there is more to come next week, with the focus once again being on wireframes and UI mockups, so stay tuned to this space. As always, you are more than welcome to give us a shout or to leave a comment below this post. Till next time – Happy Diagramming!

Posted via email from Creately | Comment »