Zedduo – web design and development process

This post was put together for future, past and current clients. Too many times we are asked how and what process do we follow on our web development projects. This post will also show the different phases we go through in developing a completed website as per the brief. It will give future clients a better idea on what they spending their money on.

PHASE 1: SITEMAP

The site map is where it all begins. Here we will plan and strategize with the client on the amount of pages the website will have, the sub-pages and the amount of click throughs to get to a certain page.

PHASE 2: WIREFRAME

After sign off on the site map we then proceed to the wireframe phase. A wireframe is the schematic or screen blueprint of a website. In this phase we layout and arrange the different elements on the web page. Elements like the header, body, footer, call to actions, logo, social media elements, etc. This will indicate which elements of the web page takes up the best retail space and where we place the call to actions. We start off our wireframes with rough sketches as seen below.

We then layout the elements using Adobe Illustrator CS5. The two images below is what we will present to our clients for feedback and comments. Together with our client we revise the wireframes to the best possible solution to obtain the briefs goals and objectives.

PHASE 3: DESIGN

This is the phase that sets us apart from other web companies. We design from scratch how the web pages will look based on the signed off wireframes. We do not use templates. We conceptualize color, texture and typography etc. If we created the logo and visual identity of the brand we would then naturally follow the brand guidelines. If not, we would then conceptualize the design around the existing visual identity of the company. We would then present the client with a PDF presentation. The design phase is the longest phase as we provide 3 revisions after the first presentation. We use Adobe Photoshop CS5 for design.

PHASE 4: CODING

In this phase we proceed to the actual coding of the website. At this phase the design and look of the website should be finalized. We use Adobe Dreamweaver CS5 to code our websites in HTML and CSS.

FINAL WEBSITE

And this is how the final website look > www.icecreamninjas.com