Author: Earl Mallett

A functional specification is a summary of how the application will function from the customer’s standpoint. The focus of this piece is to describe and analyze a couple of approaches for generating UI mockups. or you can just visit software wireframe wherein you are just going to drag and drop interface to create Wireframes for Dashboard, Mockups for any application including websites and mobile apps.

I am sure that there are numerous unique procedures for creating wireframes. Still, I am only able to describe and comment on people I have used, making some general announcements about what is excellent (or bad) concerning them.

Lo-Fi Prototyping 

This is the fancy name because of its previous butcher’s paper plan. Slimming down is the perfect technique when a brand-new shrink-wrapped software bundle was designed.I once spent four days with a group of developers in a small apartment designing a telecommunications application using this technique. The result was short of astounding; it allowed us to blast out and iterate ideas quickly. As the team’s UI designer, I went home at the end of the week with a mass of paper, which I turned into over 30 HTML mockups.

This approach is unsuitable for designing simple business websites or software which has been done before (e.g., non-novel systems like a shopping cart). It’s also not so great when a client is directly involved in the project. There are a few reasons for this; it requires a big investment of time on the client’s behalf (they may have a business to run during the day), and secondly; the client-to-supplier relationship often creates a dynamic where they tell you what they want, and you go off and make it. Usually, the client won’t hang around while you design their software.

Microsoft Excel 

Yes, as strange as it may sound, MS Excel can be quite handy for producing wireframes, especially for software that is expected to have long vertically scrolling screens. I would never have thought to use it myself, but a company I worked for introduced me to it as their preferred specific tool.First, I was skeptical, but I quickly warmed to the approach when I saw how fast screens were to make once I got the hang of it. It’s excellent for inserting instructions to programmers (either in comments or as sidebar text). However, it produces exceedingly ugly wireframes; this is a good thing for application design since it keeps everyone’s focus on usability and business logic.

The other great thing about Excel is everyone is familiar with it, including clients. The closest thing I could think of as a criticism of Excel as a wireframe tool is that it produces decidedly uninspiring visuals. I currently don’t use Excel as a wireframe tool, but I would have no problem picking it up again if I felt it was right for a project.

Microsoft Word

Another desktop application you wouldn’t usually think of as a wireframe tool, Word can be pretty good in certain situations. Generally, the only time I would use Word to represent UI controls is to make a ‘mini-spec’ for a web-based application.

A mini-spec is created in one of two situations; as an adjunct to an already ratified functional specification, or as a mechanism for grouping together a bunch of features for a version upgrade. UI controls are represented in a rudimentary fashion, for instance; (*) would be a radio button, and [x] would be a checkbox, etc.This works because the system’s interface has already been established (i.e., the order has been coded, or a Photoshop mockup exists).

The advantage of this approach is speed; you describe the underlying functionality of the code and only mockup the controls relevant to the feature instead then drawing the entire screen.Over the past few years, I have been exposed to several techniques for preparing mockups. Each approach has its strengths and weaknesses, but generally, the best method to use depends on the project at hand. I don’t have a single preferred plan, but choosing the most appropriate style to use at the time can be a tricky undertaking.

HTML Mockups

With the advent of such as like Microsoft FrontPage and its successor Web Expression, anyone can make cool looking mockups, to the point where it seemed as though all that was left to do was hand over the HTML to the programmers, and they would take care of the rest.
I’ve used FrontPage to make HTML mockups quite a bit in the past. Some analysts say it’s a reliable option for designs because it allows you to produce navigable HTML. From my experience, I don’t think it’s an excellent choice to use as a first draft system.

It can be time-consuming and lures you to distraction by unnecessary detail early on (i.e., making the design’s look pretty’).The biggest problem with HTML mockups is you have nowhere to put annotations (i.e., generally tech notes directed at programmers describing ‘under the hood’ functionality). As far as navigable mockups go, I’ve never found it to be a big issue with flat mockup structures. Generally, people know where pages are going to go to, and in rare cases, when a page is going to the wrong place, its nearly always an essential task to direct it elsewhere.

There is one instance when an HTML mockup is appropriate straight away. This is when a sophisticated new screen is being added to an already established interface. The reasons for this are beyond the scope of this article, but suffice it to say that experience has shown that it’s quicker than first creating a lo-fi version of the UI. One of the other great things about HTML mockups is that they’re easy to distribute to people.

Microsoft Visio

this is the tool I use at the moment for wireframes. It strikes the right balance between flexibility, professionalism, and speed. Visio is great for putting in tech notes without interfering with the wireframe itself; I generally put these in a sidebar to …