Go to Top of Page

Sketching and Prototyping

Arc have trained designers that are able to help you visualise and construct your site quickly and cost effectively. This allows you to organise your thinking, troubleshoot functionality and catch any unforeseen issues before you burn through any significant part of your budget or a line of code has be written.

At Arc, we like to encourage you to embrace the early design phase of any project. Clients can be in a rush to get the developers coding and see their site come to life as soon as possible. But developers time, change requests and reworking functionality that doesn't work first time is expensive.

Instead, we can guide you through the design of your site, show you fully rendered compositions of each site page that you can then make changes to easily as it is just an image, no code has been written. Seeing the site pages can also help you understand how the user journey and experience will play out. If there are any problems or things to be fixed it is a case of re-ordering pages and pulling out the red marker pens! Our designers can make any changes you request and then present the adjusted site design in hours... not days.

When you are finally happy with the site you see, you can sign it off ready for development with both and us happy in the knowledge that you know what you will be receiving and we also have a clear brief as to what you want us to build!

 

So how do you design and build a site on paper?

In most cases, that is exactly how. During the requirement gathering stage, we will have a general idea of the type of site you want and what it needs to do.

If the requirements are standard requests, for example a search feature and a results page. We will usually skip straight to the full colour page compositions. If, however, your ideas are more unique or even it could be the case that you are not sure how to achieve what you need. We can employ a technique called 'Paper Prototyping'.

 

What it Paper Prototyping?

Our designers can sit down with you with a sketchpad and a toolkit of pre-printed page elements. Then as you discuss your ideas for the site, our designer can build a page from his toolkit of elements or even draw brand new elements. The flexibility of this process means if you dislike the placing of an element, simply pick it up and move it. Not sure if a form should have tabs or an accordion structure - try both and see which one works better in seconds.

Paper prototyping is also helpful in visualising dynamic elements early on as you can replicate user journeys and events by over laying new sheets of paper to mimic popups, slide paper to reveal expandable content. The possibilities are limitless.

During any any paper prototyping session, our designers are always taking notes and even snapshot photos of pages you have created that you are happy with. This documentation of the process allows us to move to the next design stage of 'wire framing'.

 

Creating Wire Frames

We can create wire frames direct from a consultation meeting, a requirements document or as a formalisation at the end of a paper prototyping session.

Wire frames are a simple representation of the elements in a page of your site. Wire frames are black and white with occasional basic coloured elements for icons, status symbols and user messages. 

The idea of wireframes is that you are only viewing the sites functionality without the layer of design, or what some may call the 'look and feel' of the site. For sites heavy on business rules or functionality, this is where we recomend clients devote most of their design time ironing out problems without getting caught up or distracted by design/branding issues such as "Should our icons be square or circular?". You'll be surprised how often this happens and more time and money are wasted on unnessesary meetings and design iterations to get back on track with the important things.

Instead we believe all design and branding should be added after a wire frame phase has been completed and signed off. Again allowing the functionality to be confirmed, just means our designers have free reign to let their imaginations go wild when let loose coming up with branding and design skins for your site. Knowing exactly what needs to exist within the pages of your site and what elements needs to be designed saves time and budget. Nobody likes paying for an elaborate scrolling popup with animated borders... that will never be used on a single page of their finished site do they?

 

Designing, branding and skinning a site.

This is the final stage of design. When we talk about full colour compositions, we mean a fully designed site, a wireframe of functionality dressed in a skin of a branded design. This usually is a Jpeg or image file representing what the final developed site will like like. In some cases, clients have been tricked into thinking we have already built the site and this is just a screenshot! In fact, when the project is over, if you took a screenshot of the site and compared it to the signed off composite image, we would hope you couldn't tell the difference.

In this design phase, we should already know what the site needs to do and how it will do it, so all our designers are creating is the best way to present this to the user visually. There is no one right way of doing this. So we can offer you various options.

When it comes to applying your brand to the design, our designers are capable of creating a brand from scratch; taking existing brand guidelines for print to create a complimentary web brand or just following a prescribed branding guide. 

Our designers are capable of creating complementary images, icon sets or any other imagery assets that will help achieve that slick polished look of a well designed site.

Some clients even like us to produce multiple skins for their site, or many flavours of a single skin to help denote different areas of the same site. Anything and everything is possible, don't be afraid to ask for what you really want - and our designers will take up the challenge!

 

Tired, old looking skin? Try re-skinning?

Why is there the need to design in such a granular fashion? The reason is to benefit you. Wire framing deals with designing the functionality of the site and its elements. Tying into the HTML or structure of your site. The skinning/branding separates out the styling of those elements and is converted by developers into CSS or 'stylesheets'. This means that your site is now easily built by our developers with an eye to any future changes being very easy to apply.

Nobody knows what the future holds, but if in ten years, it was the fashion that all websites were yellow text on black backgrounds (why not?). Then you would not want to look out of date and you certainly wouldn't want to pay for a new site to be built. And you wouldn't need to.  

All you would need is a new skin. For developers, this would be as simple as replacing your old stylesheets with a new appropriate one. This is easily achieved as it is just a new brand or skin that can be dressed over or replacing your original one. Your structure, HTML or 'wire framing' stays untouched.

But you don't have to wait for this crazy black and yellow future to arrive, you can decide your site needs a refresh at any time, and Arc are always happy to help you with a dedicated design or re-skin service. Even if we didn't build the site originally, we can create a skin you will feel comfortable in.

 

 

© 1990-2021 Arc Software Consultancy Ltd.