Wireframe Mockups

Prototype Tools can help you

Website prototypes are hailed for their usefulness and the indispensable contribution they make towards the task of website design and development.

Designers stick to the process of website prototyping for one plain reason, it provides them a concrete direction in which to develop the design further. With Internet technologies and website designs breaking all barriers, there just seems to be no end to creativity and function usefulness of a website.

From standard and static web pages to intricate web based applications which allow for a wide range of tasks originally possible only on local computers are now possible online. Along with this, the demands and expectations upon website designing has increased manifold.

Professional website designers, efficiently use prototyping as a process in order to help decide the overall layout and functionality of a website. Although paper prototyping still remains a favorite with many of them, prototyping tools are also gaining major ground with many.

Not concentrating on any single prototype tools, in my effort to remain as neutral as possible, I have noted that prototype tools are constantly improving the features they offer and are proving to be very versatile in prototyping and mockup of a website.

Offering a library of standard controls and elements that go into a website, prototype tools allow you to just drag and drop these into their rightful place on the screen. What used to be done by sketching / printing and cutting from paper and then sticking them in their designated position is now possible by just a simple drag and drop operation. Again, being done on computer screens, the task of website prototyping using prototype tools is also made easy by the provisions of re-positioning any elements by just simply dragging them across to their new positions on the page.

Many website prototype and mockup tools are also offering advanced and likable features like adding a basic level of interactivity and navigation between the various pages on the same project. This also allows for easy testing and feedback to be received right away, the main function of using prototypes in the first place.

Another advanced feature included in most website prototyping tools is the facility to publish working prototypes to be tested locally on a pc, across the local network or online over the Internet. This just opens up a wide array of testing and evaluation possibilities for all projects. Just imagine being able to receive simultaneous feedback from different corners of the world towards the website prototype you build.

Taking website prototyping to its next level, prototype tools are lending extra power to designers globally. This extra power directly relates into enhanced designer productivity and also leads to better evolution of websites. If you have been considering enhancing or seeking for ways to improve the productivity and effectiveness of your website designing and development, prototype tools can surely help you get better!

Screen Mockup can save your day!

There have always been some doubts in the minds of newcomers about the use and functions a screen mockup plays for user interface design. Experienced designers, involved with the design of websites as well as graphical user interfaces of software applications are willing to swear by the process of Screen Mockup and use it efficiently in their work.

Taking cues from the designing of mockups for print and other physical media designs, computer graphic designers involved with screen design have found the process of Screen Mockup very helpful in presenting their designs to customers and end users as well as for receiving feedback to make their designs better looking as well as functionally easier to operate.

With an emphasis on setting the place for each element on the screen as well as providing a easy to understand navigation, while allowing for creativity, designers deal with the task of giving an interface to every website and software which involves human interaction. Without a comfortable to handle as well as visually pleasant interface, many applications and websites would face extinction due to users just choosing to ignore them for this.

A screen mockup also helps in putting forth ideas and options for decision makers, allowing them to choose the best according to their liking. Websites specially deal with representing a wide range of products, services, and individuals on the web, and the design of their website is very important for projecting their image to visitors that arrive on their website.

All these demands and expectations for websites as well as other software applications are met with efficiently by screen mockups. Starting from providing a representative picture of how the screen would look, screen mockups also allow for evaluation of how easy it will be to understand the navigation and other controls within that screen.

Most importantly a screen mockup allows the designer to optimize their productivity by saving a lot of time. Just imagine having a designer or a team of designers working on creating several finalized versions of the screen right up front. Not only would that take much longer, but it would also need efforts on several fronts like graphics, textual content, controls and putting it all together with relevant programming techniques. All this for just presenting the best possible concept and screen mockup?

On the other hand a designer can easily use representative graphics, text and controls and graphically put them together with any of their preferred graphics / mockup tools to give present their design concepts. These screen mockups would need to thus focus on just providing a visual feel of how a screen would look like in its final form. The need for working on the actual content and graphics, etc. comes only after one screen mockup is actually selected and finalized from within the multiple options presented.

This saving of time and energy directly reflects into increased productivity and an efficient screen / interface design procedure, and can easily save you a day or maybe more.

Mockup Software is not the finished software

Software design and development is an interesting profession, but along with being interesting it is also one of the most complex trades today where many development teams and persons simultaneously work together from different areas of the globe. They only know each other more by their key skills in terms of computer programming and by the role they play in their projects.

With the power and capabilities of Internet technologies being enhanced each day and Internet connectivity allowing everyone to work together in a team without the restriction of time and place, it has also brought in the need to have a well coordinated and synchronized approach to product development and trouble shooting.

One of the most relied upon tool or process which helps in judging the progress as well as in maintaining the direction of a project is a Mockup Software.

What actually happens is that teams, whether they are working together from within the same office or virtually from different places, can always lose their direction and focus because of the many possibilities being considered and tried out. One thing leads to the other and before you know it, a lot of time can get wasted on developing options and features that are all ultimately scrapped or do not figure in the final product.

Another commonly encountered issue is that of a misdirected output, with the desired function and output not being at par with what was actually needed.

The reasons for the above errors can be many like communication errors, unplanned approach, and confusion due to multiple revisions in the plan; however, the outcome is usually the same – A Failed Project or wasted of time and efforts.

These are some of the important issues which a Mockup Software targets and eliminates along with allowing for easy testing and evaluation of features and functions being developed.

The range and extent of functions and features that a Mockup Software offers totally depends upon the stage of a project, features needing to be tested and who is going to use these mockups.

Very often mockups are evaluated for limited functionality and focus on particular issues and topics. This however is not a rule and mockups with all the features are also used as beta versions of the software to gain feedback from a broad base of final users.

Based on this feedback received from the Mockup Software evaluation, companies and developers then work on improvements and suggestions received to make their software better and usable.

Mockup Software can also be used for micro level evaluation, for example to check a single function, and derive results from the tests to enhance the products power and usability on the whole.

Irrespective of the extent to which a Mockup Software represents the entire software, it is just not the finished software because it may lack many features not present in the mockup as well as contain several bugs or errors that mockup testing aims to identify. Companies and developers offering mockups for testing are always very clear of the purpose and intentions with which a mockup software is developed, and Testing / Evaluation are among the main reasons for making a mockup software.

Paper Prototyping Still Favorite

Designing and development of computer applications, as well as websites, involves a whole range of tasks like planning, design, coding or development, testing, etc.

Most of these tasks are time intensive and require efforts from a wide array of skills and talents present within the organization.

Each specialized talent or the department handling these tasks further develops according to the requirements of the product being developed, and there is often a brainstorming session to arrive at the right option to choose and path to adopt. This also helps fill any gaps or correct any false notions that might have developed along the way.

Being one of the most healthy and interesting part of application and website development, presentations and exchange of ideas allow everyone in the office to contribute towards delivering a better product and service.

These presentation meetings though require an in-depth thinking on the part of those who are coordinating it or seeking to present their concepts through it.

One of the most common things needed during these meetings, to help demonstrate a point or a particular method, are prototypes. Prototypes allow presentation of ideas by serving as examples or working models of the same. They need not be full working models, or cover the entire span of a product / software development, and can focus on specific areas which are to be covered in the presentations.

There exist a wide range of tools that help in the creation and sharing of these prototypes, and as in every other case the presence of many options and varying features within these tools creates a shared following amongst most of them. One tried and tested method that continues to be the favorite amongst designers and developers is Paper Prototyping.

Created on and using various standard office stationery, paper prototypes allows everyone to simply sketch the various options and target screen shots on various sheets of paper without the need of graphics and colors.

Concentrating more on the functional aspects rather than visual beauty, paper prototypes allow total concentration on the core matter being discussed. Another factor which plays into its favor is that everyone can participate in the preparation and presentation of paper prototypes, eliminating the need to make them graphically beautiful. When being presented to buyers it also helps maintain clarity in the purpose and stage of the project, rather than having a customer mistakenly believe that the product being presented is the almost finished version of their order.

Paper prototypes also allow for preparation anywhere and everywhere, without the need of specialized tools and availability of computers itself. This leads to better and faster progress, along with ensuring the involvement of everyone within the company.

Prototypes by themselves have proved to be very successful for the development of websites, computers applications, and other products. Paper Prototyping is a valuable method of receiving faster feedback and providing direction to a project are remains a hot favorite among designers and developers across the globe.

Some Tips for creating a Website Mockup

Design and Development of websites is a rather challenging task, especially because it involves dealing with design and implementation issues of both the technical and human interaction.

With the success of all websites resting on the usability and user experience offered by it, website design gets a major chunk of emphasis. In these highly saturated niche markets, the options of buying and using alternate websites is always available to all the users of the web. As such it becomes important for websites to incorporate a proper structure that is easy to use and interpret for a majority of those accessing it.

For a web designer, who deals with many varied requirements from several ranges of trades and target markets, it needs experience and skills to understand and interpret each requirement and implement the same in both an artistic and easy to interpret manner.

Ideally when a new website design project is received, most established and experienced designers present wireframe models for approval to their customers and website buyers. This helps in finalizing the layout and provides a proper base on which the design can be created.

Expanding further from the wireframe becomes easier for designers as the overall layout gets frozen and approved by the buyers. Website wireframing also allows for relatively easier development of a website mockup and helps put forth related design options.

Website mockup designs provide a much better visual feel of the proposed website along with allowing further improvements and changes being done well before the actual coding and web development work starts.

Designers working on creating a website mockup should always remember the whole purpose behind creating a mockup and must always keep the buyer informed of the same. It has often been noted that a mockup gets mistaken for a finalized and finished website with all designing and coding finished.

When considering placeholder images and graphics for preparing a website mockup, experienced designers try and relate or be as close as possible to the main topic of the website. A website mockup should be taken as an opportunity to present to a buyer your inputs and suggestions by creating alternate fall back designs and mockups.

If you are creating a website mockup on software’s like Photoshop or Firefox, etc. always save the main files in their native formats as well as this allows for easy manipulation and modifications. On the other hand if you do not save the design files and rather save the exported JPG or other files, then manipulation and modifications get tougher and many a times need to be redone.

A website mockup is prepared and worked upon in order to obtain a clearance from your customer on a particular design. This helps save website overhauls and massive redesigns after the website has been developed for the web using any of the website development methods.

Try and always keep the website mockup as practical as possible without filling in too much and making the design overcrowded or impractical. Just remember that the same design also has to be integrated into making a fully working website once it clears the website mockup stage.

Designing for a Screen Mockup

Screen mockup and website mockups play a very important role in presenting to buyers, or seniors in a deciding position, concepts and designs intended to be further developed into full fledged working websites or applications.

Presentations for screen mockups are usually a pre-planned event with all or most of the decision makers present to witness and provide a direction to the project.

As a designer, I generally prepare a couple of screen mockup options before hand. They however only come handy if there is a general feeling of something different is required after presentation of the main design concept. There is a line of thought that too many design options only lead to confusion and present an opportunity for the emergence of mixed preferences, incorporating sharing portions and looks of various designs among each other. This kind of an occurrence is very easy to come across and can possibly ruin some concepts presented. It also further increases the time and efforts required by way of needing another round of mockup/s.

I am not saying that this is bad, but then it’s not too good either. So as a designer I generally carry another option or two but only bring them into play when they are actually needed.

Fast paced improvements in the tools and technologies area has also presented options for adding some interactivity and notations in screen mockups.

This kind of enhances the user experience that each person viewing your presentation receives. It opens up new windows of thoughts and ideas to fine tune your design.

Interactivity also allows everyone to live the design and the navigational options its presents, so if you do have tools like Visio or Axure in your tool-kit for web design, then you should always consider putting them to use for this purpose.

Another possibility to explore while demonstrating screen mockups is to use computer based as well as physical graphic board based screen mockup presentations simultaneously.

I kind of subscribe to the thinking that, no matter how developed and advanced computer technology becomes, there is always scope for creative thinking and improvisation.

Using physical, graphic board based presentation materials allow design options to linger longer in the minds and thoughts of the buyers or decision makers. As your computerized presentation changes screens and covers different options, you can always use this graphic board as an alternate resource for giving references and linking various screen options together.

All the above ideas help in planning and presenting your screen mockup to those who have the power to approve the same; however, it is essential for you to first prepare a good design that covers all the needs and operational requirements along with presenting the same in a user-friendly, and easy to follow design.

Screen Mockup is one of the most important steps to help save time and money required for developing applications / websites. As a designer it becomes essential for you to use good screen mockup principles and techniques in order to present your design for approval.

Which Web Prototyping tool do you use?

The importance of web prototyping need not be stressed upon at all. It is a procedure which has become a MUST for all website design and development projects.

Just think about it, would you as a web design/development professional prefer to check and tweak the website as per the specific requirements right at the beginning, or would you rather wait till the end to have it all checked and approved in a single submission?

I am sure it does not take the knowledge of rocket science to arrive at an answer to that question.

Just like all of us individuals are unique and have our own special qualities and capabilities, each web project too is different and requires a unique approach. As designers and professionals we do have our own methods of approaching a project, and executing it; however stress has to be laid that most projects just do not get approved and accepted in a single submission.

Web prototypes on the other hand help us all design, and communicate with buyers and test teams efficiently. They help correct our approach to a particular project and also place new thoughts to action for the website in question.

There exist a barrage of web prototyping tools and software that aid in the creation and easy editing of website prototypes. Some tools find a wider user base while others continuously make inroads into this ever-growing and rapidly evolving trade.

The basic principles and rules for creating a good website remain the same; but the way each professional goes about it may be different. In the same way web prototyping tools have more or less the similar functionality ; however, the web prototype making software preferred by each designer may be different.

Whether the prototype being designed is for evaluating the user interface or for testing out specific areas and functions, web prototyping tools help create and present the prototype efficiently and with minimum efforts.

In many such tools, the presence of options to add notations and prompts adds a great deal of value as they help communicate the designers vision and purpose of each area within a design.

The pace at which technology is advancing and new tools are surfacing, it is getting hard for many professionals to stay aware about the new tools available or developments in already existing web prototyping tools. As such, it has become necessary for designers and developers to rely on feedback and reviews posted on forums and blogs to continuously educate themselves about the latest advancements in this direction.

Many organizations and firms have designers who prefer different web prototyping tools but have to use one which finds general popularity to ensure data portability and interchange options.

Minor variations and usability issues apart, most popular web prototyping tools carry out their function with ease and provide powerful options in the hands of web developers to present their design and development concepts to customers across the desk or virtually over the Internet.

Coming to think of it, since you have been reading about the importance of Web prototyping and the existence of various web prototyping tools, why not answer one question for me:

Which Web prototyping Tool do you use?

Wireframe software make wireframing easy

Software applications and websites are under a constant phase of evolution, undergoing changes in the departments of technology, design, usability and almost all other aspects that come together in creating them.

Design and usability form one of the most important factors that go in to the creation of software and websites. After all, they form the mode of communication and interaction with the customers that use them for their specific requirements.

Firms and organizations worldwide shudder at the thought of providing a software tool or website which the users have a tough time in navigating and using properly. This is one of the main reasons why wireframe models are built and presented to the buyers and a wide range of intended users.

While paper based and hand sketched wireframes do continue to serve very well, many connected with the field of software and website design and development are using various options of wireframing and graphics tools for building and communicating the wireframes.

While most of the software tools available present options to design and develop wireframes very easily, it is the choice and individual preference of each professional which decides the tool they use for generating, sharing and even testing the wireframes.

Since wireframes are meant to depict only a general idea of layout and navigation, the use of a design software to create wireframe models does present the problem of a wireframe being considered as the final design. This however, can be easily overcome by using tools which create wireframes in a rough or manual drawing form, or by mentioning and making sure that a customer is informed about the use and purpose of a wireframe model and the current stage of the project.

With networking and Internet finding such a high usability in each and every corner of the world, online or web-based wireframe tools also are gaining immense popularity and dedicated following of design professionals.

Some wireframing software tools present its users with the wonderful ability to create interlinked wireframes which allow basic interactivity to be integrated within the various wireframe models for the project.

Standard elements and screen components which together form a complete screen or web page are also available in some wireframing tools, allowing designers to just drag and place them to their intended positions. These can also be easily moved are re-positioned with minimal efforts to allow modification and testing during live tests itself.

This also allows quick and efficient testing and faster feedback to be able to modify and create a better solutions quickly.

The importance of wireframing as a process within the software or website design and development stage has been repeatedly proved and stressed upon by designers and developers with varying levels of experience and success. From the most successful and famous to those who are just starting out, all of them swear by the use of a proper implementation and execution of wireframing for each project.

Some of the most successful and widely used software for creating wireframes are Balsamiq Mockups, Axure RP, Pidoco, Pencil, Protoshare, Iplotz, Denim, Microsoft Visio, ForeUI.

This however does not mean that these are the only tools available and used for generating wireframes. Some industry stalwarts also swear by using Photoshop and various other tools for their projects.

One thing however is certain, that the demand and need for specialized wireframe software is here to stay.

How to create a Website Wireframe with Paper

Website Wireframes help in approaching the task of designing websites in a planned manner. It also helps identify the website owners choice from the design options considered by a website designer.

Creating a website wireframe and using it to communicate and exchange ideas with a customer leads to designs which find easier acceptability and appreciation from the website owners.

There exist various methods and tools used to design website wireframes, and designers eventually develops their own preferences according to how well a tool works out for them.

But then, these are Artists we are talking about, and many of them are very good artists both with hand and on a computer.

Many website designers and their teams still persist with using website wireframes drawn on and made with paper and other standard stationery easily available within an office.

Creating a website wireframe with paper allows designers to create wireframe models which depict proposed layouts by placing hand drawn place holders for major elements that make each page.

The general work flow and ideas that are used to create a website wireframe are as below:

Plan the pages: As a new website design starts, it is important to know the pages and have a general idea about the content in each page. Internal linking and other concepts which aid in the design and development of a website are also better prepared well in advance, as this allows for a easy, planned approach to sketching the website wireframe models.

Website Wireframe Page Construction: Generally most main pages are very important as they form the basic design from which page follows.

Draw a big rectangle on the page, as big as the page allows, to form the outline of the monitor / computer screen.

Identify the portion of the header and draw a rectangle around it. Then decide the logo’s position and draw a circle to mark its position and size.

Continue sketching rectangles to mark the main areas which would constitute the page, like navigation menu, body text, space for any advertisements or graphics, etc.

If the website / business it represents has some special certifications or awards, then mark the place where it would proudly display these to the visitors.

You can now write the important things within the areas to help the customer to understand the layout better, but keep the amount of writing to a minimum.

When you finish the main page, you can draw wireframe models for all the remaining pages in the same way to complete the entire websites wireframe model.

Typical sketched website wireframes are constructed in the above manner, however if you wish you can add interactivity and some more areas of interest, maybe to illustrate drop down menus or individual sections that change depending upon option selection.

One of the easiest method to create a drop down menu is to cut a strip of paper to match the width of the dropping menu and write the menu options on it. This strip can now be pasted in its position and folded upwards to indicate a closed menu, and whenever you wish to show its contents, just unfold it.

In the same way use your ingenuity and create areas with post-it or tabbed cards most of which is generally available in office stationery.

At the end of the day it, what counts most is that your customer gets an idea of the design you are proposing and is able to select from within one of your proposed website wireframes. Any creativity you add to in order to make it more interactivity is always a big plus, just remember not to forget that it is a wireframe model, so keep it black and white as much as possible!

Once you know what pages will be on the site, the next step is to figure out what’s going to be on those pages. This is where the wireframe comes in, sometimes referred to as “information architecture”. It’s still a paper-and-pencil exercise, but it’s far more detailed and it builds on the previous two steps. It’s time to take the blank canvas of your site pages and start filling them with content. If the sitemap was like an architect’s drawing, then the wireframe is your interior designer’s floor plan. You may not be ready to choose lighting fixtures and armchairs yet, but you’ll need to know where they’ll go so you know whether that awesome red sofa will fit through the door and be sure it doesn’t block the fireplace.

Read more