BLOG

As some of you might already know, last month was our 4th anniversary and we feel that it's time for us to update our website. Ok, we admit that our old website was made in such a rush, we were starting out this company and we needed a website to represent ourselves as soon as possible. But anyhow we got many works from the website and after 4 years we feel that we need a fresher look.

Our old website

Now that you are seeing our new website, we thought that it would be nice if we share our process of redesigning the website. So without any further ado, here it is.

Setup Goal

As we already mention, our old website was made in such a rush. There are couple areas of the website that we feel are lacking. Some are; it doesn't show our work very well and it doesn't also represent who we are and what we are capable of. After a couple of discussion and brainstorming with the team, there are several goals that we want to achieve through the new website:

1. It should present our works better
2. It can be used as a source of information for our prospective clients, existing clients, fellow designers and developers and design/IT students.
3. It should provide our prospective clients an easy way in providing their project details that they are interested to work with us. This is important because it will help us in providing a proper proposal faster and more efficient.
4. Better visual appearance is a must!
5. Works on mobile browser

Content Preparation

Once we know the goal of the redesign, we start by making a checklist of contents needed for the new site. Since the site will have a content management system (CMS) and the CMS we are using is our new released CMS called Arunna, we don't need to have the final content ready at this stage. We can always make changes of the content through the CMS, at least we have a solid idea of what will be put in each page. 

There are some illustrations and icons that we are also planning to use in the website, especially on the about us and services page.

Wireframe, Design and Development

We always start the design by creating the wireframe first, the purposes of the wireframe process are to let us focus on the functionality and the layout of each webpage. Any changes needed can be done quickly and it's an effective way to do rapid prototyping and measure the effectivity of a layout. Once the wireframes are agreed, then we start developing the design of the webpages.

Wireframe that we develop during the redesign process

With more and more user accessing internet using mobile device; tablet and smartphone, the website needs to be easily accessed via mobile browser, we need to think about how the layout will fall on small screen size and make sure that the user can read the content easily using their smartphone. We develop 3 versions of the layout to accommodate desktop monitor, tablet monitor and smartphone monitor. We developed the website using a method called responsive web design so the website can automatically adjust  to a range of screen size without requiring the mobile website to be in separate URL.. 

You can try accessing it using your iphone, android phone or blackberry, you can also try resizing your desktop browser to see it in action.