Wireframing is an important process for turning ideas and concepts into visual representations for better clarity and understanding. This blog covers quick tips about wireframes and how to use them as a part of your next design and development project.

Creating wireframes for an applications user interface enables design engineers to make key decisions about:

• Functionality - What functionality the application will offer.

• Layout - How the user interface will be logically laid out.

• Workflows - How users move through the application to accomplish specific tasks.

Elements of a Wireframe

A wireframe consists of a number of very simple design elements that can be used to articulate the functionality, layout and workflows of an application.

• Grid System - Use a grid system to focus on precise layouts.

• Color - Start with a neutral color palette.

• Fonts - Select a simple basic font.

• Icons - Use a simple icon set.

• Boxes - Create simple boxes to indicate different parts of the layout.

• Dividers - Emphasize separation between different components with dividers.

Wireframes in Action

Wireframes are best if they create a robust discussion about layout and features. Remember, when you are presenting to a team, you are trying to find out if there is anything left out of your concept before you invest in more expensive design and development. At that point, changes will be harder to make.

In our experience, combining wireframes into larger storyboards and annotations really help to bring clarity and structure to these collaborative conversations.

Wireframe Mistakes

Its easy to lose focus of the main goals of a wireframe and instead begin to focus on stylistic concerns.  Here is a quick list of things to avoid in wireframes:

• Images and Graphics (placeholders are good, but the actual images are not)

• Logos (again placeholders are ok)

• Complex colors and accent colors

• Multiple fonts

• Textures, and Gradients (stick with solid colors)

• Box Shadow, Text Shadow and other effects

Hope this helps the next time you are trying to flesh out a new project with wireframes!

prototype

If you are having trouble figuring out what you want to build, how you want it to look, or how to demonstrate the idea, consider a frontend prototype.

A frontend prototype is a preliminary model for a web application, and its typically used for experimentation or demonstration. Companies often use prototypes to test a concept or a process. Sometimes they are also used for early sales and marketing use - think trade show displays  or for market testing and requirement gathering.

In addition, prototypes are a very valuable tool for rallying financial support either from within the organization or from outside investors. Prototypes can be an inexpensive way to demonstrate the feasibility of an idea while lowering the risk of investment, and they typically increase your chances for a sizeable development budget.

Typically, all we need to build a prototype is a wireframe and one workflow or user story. A fully functioning database or API is not always required, depending on how you plan to use the prototype. Usually the prototype is a temporary solution for concept design and development, and data accuracy is not the highest priority at this stage.

Use cases for Prototypes

• Early Sales and Marketing activities
• Proof of Concept
• Testing
• Working through design conflicts
• Fundraising

Interested in hiring an outside consultant to build your prototype? Excellent decision. Hiring us can keep you from diverting precious development resources from ongoing projects. And just in case youre wondering, most prototypes can be built in 2- 3 weeks for under $10k. Give us a call today and get started now - rather than never.

When working with new clients we often dont start with a huge or elaborate development project right out the gate. Why? Many reasons: 1) although we would like to, its impossible to know everything about your plans and vision from the first few discussions 2) both sides need a fair amount of getting to know you time 3) to be perfectly honest, big proposals for big projects are quite intimidating. So with new clients, we often propose a service referred to as the Initial Engagement. Other firms may also refer to this as the Discovery Period, however, the "cost of discovery" is not often implied, potentially leaving expectations out of sync. Initial Engagements, or Discovery, usually last between 1  2 weeks, and can cost anywhere between $1500 - $10k USD (To put this into perspective: our full service development projects are usually priced between $10k - $100k USD). Its a fun time for everyone! But its also a critically important time to focus on getting the client focused, fueled and ensure a more successful development project. Although each case is different, an Initial Engagement can result in all or some of these deliverables:

• User stories
• Wireframes
• Mockups
• Prototypes
• Architecture Design
• Functional Specification
• Consulting

So if youre a new client, or want to be, here are a few tips on how to get the most bang for your buck in the Initial Engagement with TechPines:

1. Have a strong understanding of your own vision  especially the value proposition.

Plain and simple, we need to know where your application, and your users, fit into the grand scheme of things. Identifying your business priorities to us will help keep all parties focused on developing intuitive, valuable web applications tied directly to your mission and vision. Creative projects are welcome, but they should also service a justifiable purpose.

2. Know where you are in the development process.

Here are examples of steps we consider in the development lifecycle:

• Concept
• Proof of Concept
• Design
• Prototype
• Alpha release

Simply being able to identify (or estimate) where you are in the process will really help us understand what decisions should have been decided and what decisions need to be made in the next stage. For example, we wouldnt want to spend our time building the Alpha release of your product, if you have never had the chance to preview your design comps through prototyping.

3. Know your own timeframe and milestones.

What would you do right away if money was no object and you had every resource at your fingertips? What would be the first, second and third priority? Maybe youre still building out the alpha, with a few months of development left, but you need a demo built for next weeks tradeshow. In this case, we might decide our best course of action is to review the core objectives for upcoming releases, build out a prototype, use it for demos/presentations/gathering feedback, and see what adjustments could be may to your upcoming development plans. Remember: our goal is to spend the first few weeks providing you with immediate value. If we can go from being complete strangers to providing something of value in around two weeks, then its likely well have established a mutually-beneficial, healthy partnership.

4. Think less about what you want it to look like, and more about user objectives.

Sometimes we have bright-eyed and busy-tailed clients come to us thinking they have it all figured out, design wise. Its great to have a clear vision about the look and feel of your design, but we may really need to focus on the fluidity of your web application. This is why we spend some time mapping out user stories which identify every movement a user might take on the application  start to finish  coming from the perspective of their objectives. These user stories can be incredibly helpful for stakeholders to hone in on 1st, 2nd, and 3rd generation feature sets. They also make a great foundation for the design process.

Without even considering all of the above, our main objective in those first few weeks is to be of service to you. Our mission is to Design, Build and Launch Revolutionary Web Applications. We want you to launch - not just talk about how nice it would be to reach the finish line. Whether we work together for a few weeks or a few months  Scouts honor  we want you to be impressed with our service AND feel like you really got something valuable out of the deal. Lots of consulting firms may say the same, but were also always developing flexible offerings like the Initial Engagement with the intention of walking the walk.

Its a new year, and similar to most of you, we are all pumped up to step into 2014 with even bolder vision. For this reason, we knew the first order of 2014 business was to redesign the website to reflect the newer, more mature, more developed version of our fine operation. Visitors and friends typically praised the design of the last site, but would sometimes complain about a lack of content  specifically about who we are and what our projects and past work look like. So we decided to give the people what they want.

We added the about us section, bios, and a portfolio. We also elaborated on our services.

Along with the cutting edge web development and technology consulting for which we have become so well known, we now offer full service UX Design. It was really a no-brainer, and any of our previous clients would agree that this service has always been a part of our repertoire. We faithfully believe successfully web development is married to solid vision and functional design. But not bragging about all of our skills means a whole host of revolutionary startups and organizations could be missing out on everything we have to offer! So, budding product developers, now you know. We do kickass development AND design, and were not afraid to show you.

If the last three years of exciting opportunities and honest work werent evidence enough, its apparent, were all grown up!

We also definitely knew it was time to show off our skills in a more tangible way. No more mystery. Our design and development portfolio is now proudly displayed in the Work section. There youll find pictures of the UIs weve built, details what technologies we selected for each project, and information about our open source tools.

Dev friends may also notice this site isnt just a pretty face; shes a well-oiled machine. The last website was a single page app. We loved the aspect of showing off our skills literally through the way our website was built, but over time it just wasnt a functional choice for the managerial environment in which this site would live. In other words, marketing was getting really sick of downloading html files just to write a blog. We wanted to put the new version on Wordpress for all the obvious benefits, but we also technically hate Wordpress. So because he cant help himself, Brad jimmied up a custom solution.

Its hosted on AWS3, and what visitors view is a derivative of the actual Wordpress site. We did this so that the visible content remains static and secure: 1) it wont go down ever because AWS is awesome-sauce 2) no one can hack it - go ahead and try 3) it loads so much faster this way.

So browse away and let us know how you feel about it. Tell us whats lovely, whats missing, and what needs more work. Were all ears!

Our skeleton baby has left the nest. We debuted our new realtime HTML5 framework, bone.io at the Node/Javscript meetup in ATX. Check it out!