When designing digital products you want to strive for the most compatible user experience for every visitor. Designing a product is very difficult – whether a website or mobile application. You need to understand current trends in the market. And most importantly you should be confident in your design skills!
But even very skilled artists can get hung up on big projects. This is why I suggest starting off any design with a prototype, or wireframe graphic. This will map out each unique piece of your user interface to explain how page layouts will appear and which buttons do what. It’s almost like a blueprint before you jump into Photoshop. For those unfamiliar with the process I’ve added a few tips in this article.
Start with The Basics
A strong web prototype should be used as merely a blueprint for the final plans. You can’t build a house without the original specs – and although the same can’t be said for web design, your layout will be much better if you plan ahead. Except this can be fun as the details are up to you.
Consider what type of website you’re looking to build. Is it a social network, an informational business page? Or maybe a new online storage and file hosting service? Whatever you’re trying to build will probably have very different requirements for each case.
You could even start by sketching a few rough draft ideas. See how many sidebars you would want. Maybe try shifting the navigation towards the top vs. to the side. Browsing inspirational HTML/CSS galleries may offer a more clear idea of what your final product should look like.
Understanding Goals
A prototype is used to explain what the process of using your website should be like. Where do dropdown menus appear? Will there be any animations? Consider the “end game” for your visitor’s ultimate goals. Some web designers struggle with figuring out each part of these elements in a prototype.
There is no correct answer for the amount of detail you need. A simple wireframe mockup may just include a sketch with labeled boxes for content. But you may also include the total width of some sections on the page. Or write in how many different links or tabs you would need inside a navigation panel.
Pencil or HTML?
If you have artistic talent drawing on pencil and paper then I have to suggest starting here first. This grants you limitless potential to create whatever you’d like, and you are not restricted to quirks running inside a web browser. But there is good reason to use HTML as well.
Coding out a simple prototype means you can have the basic page structure already setup. You will not have any colors or images – in fact it would be smart to use filler images like dark grey rectangles. These can easily be removed and replaced for the final draft.
Another reason to code out your prototype is the possible time you can save. I know plenty of web designers who feel more comfortable coding in HTML rather than writing down their ideas. If this sounds like you then a hard-coded prototype is often a great solution. You can implement the math in CSS and setup pixels, ems, or percentages, then tune your design to fit this model.
Provide User Solutions
Taking the user experience into consideration should be your #1 priority. You should be able to speak the language of UI/UX within your prototype. If you have specific ideas for menus or search forms then plan these out in advance.
If you’re really into the design, consider jumping right into jQuery with your current draft. Then you can setup even the most basic animations for auto-suggest, nav menus, sliding panels, etc.
A great example is placing a large photo slideshow onto your homepage. Even if you don’t have any content to add inside, it can’t hurt to have the gallery panning through. You can size out the dimensions and create dummy content, maybe 2-3 images at most. You can then mold this feature and even apply new design styles which suit your website.
Routing Mobile Views
As much as the web is simple to handle, mobile devices couldn’t be easier. The screens are so small that you are practically forced to work with a minimalist mindset. Because of this it should be no problem mapping different mobile views and user actions.
This process is actually best done on paper compared to hard-coding in HTML. You want the prototype to flow and explain how the app would run. Even if you are building a mobile HTML5/CSS3 application, it doesn’t hurt to write out a content strategy. Advanced placement is what separates the great apps from phenomenal ones.
Conclusion
I hope these few tips can get you started on the right path to prototyping. Both web and mobile platforms offer a similar interface. But how users interact with your site will be completely different – and you will need to plan for this in advance.
But don’t get stressed or discouraged if your first plans don’t work out. It can be tough getting into the system when you have little practice building the user experience. Check out other similar articles in Google, and if you have prototyping ideas feel free to share them with us in the post discussion area.
