Creating Mockups – with Omnigraffle (MacOSX)

Every Software Development project needs to do mockups. Mockups will basically break or make the quality of the product because:

  • Without mockups, there will be a significant probability that the developers doing the development will most likely be lost and in the end, doing it all wrong.
  • Without mockups, it will be hard for an inexperience developer to visualize what to do.
  • With mockup, there will be more chances of potential refinement of the module (product) being designed
  • Visualization is (in my opinion) is the fastest and easiest way for anyone to understand and comprehend the process (aside from UML diagrams).

Not all developers have the same perspective, some might have an idea in mind on how to go about on a project, some might take the leadership role and some just needs a better perspective at putting up the right solution. Mockups are indeed a crucial tool on every software development process, designs should be able to not just put the flow of the business process by doing UMLs, it should also include the potential screens.

In this example, it would be easier for anyone (not just developer) to know that this screen is a main screen of a data for a system. Components such as button to manage data, table to display them, action keys to manage and search feature to look up are “actually” the most basic components that a sub-system (module) would have. The thing is, the functionality can be explained just by looking at the mockups, this gives the developers the baseline on what to think of when creating the actual solution. This will then be followed through with some questions from them and further clarifications from the designer to define the design thoroughly.

I’ve chosen Omnigraffle ( tool because of the wide arrays of mockup screens and stencils available. There are wireframes, stenciles, sketch, UMLs etc.  With a plugin site hosting different kinds of sketch and a custom sketch and stencil creation tool, there is virtually nothing that this tool can mock. 🙂

Design your Applications on your MAC or IPad!

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s