The Web Development Process :: Phase 2 – Design
This first phase usually involves two sub-steps: 1) Wireframe 2) Design.
Wireframing creates a clear understanding of the direction we are going and the elements that will be used in the design. It allows us to change the layout around without a lot of time involved. If we were to jump directly into design, there would be a lot of time spent on the initial design, and if we didn’t nail it, there would be a lot of additional time spent on making any changes. It gives us a good feeling knowing that we can be reactive in making any necessary changes. Check out our wireframe below:
our wireframe
Thankfully, we were able to nail the wireframe on the first go at it since our designers are pretty awesome. Once the wireframes were completed and approved, we moved on to the design phase. The design was based off of the wireframe from the previous step. And this was where we could start to see things coming together. Check out the first design below:
Design V1
At this point we liked the direction, but there were a few things we didn’t like. Here’s a list of our first set of revisions below:
- Update logo
- Use bolder/darker color to match logo
- Change heading colors in Recent News list
- Change heading colors in What We Do list
- Add a hover “bubble” to the Recent Project area
That was about it in terms of our revisions. Check out our version 2 design below after we made our revisions:
Design V2
At this point we were quite happy with the home page design so we were ready to move on to the interior pages.
The first page that we worked on was a general secondary page or our About Us page. This gave us a good place to start and showed what a 2-column layout looked like.
About Us Page Design V1
We liked how that looked so we moved on to our next interior page which was the Our Work section. This section was a little more difficult since we had to figure out what we wanted it to do technically. We knew we wanted some cool jQuery stuff to happen when the user rolled over the image so we kept that in mind as we designed. The design just started off with a simple listing of thumbnails. We didn’t need to over complicate it since we just wanted to get a feel for what it would look like. Here was the first version:
Our Work Page Design V1
This was a good start but we didn’t like the color of the section bars, so we changed that and also added some text next to the title. Here was the final and approved version:
Our Work Page Design Final Version
Our next page was our project landing page. This was the page that would showcase each project in our portfolio along with showing a few screenshots from that project. Here was our first design:
Project Landing Page Design V1
We liked the overall layout, but again, we didn’t like the color of the top orange bar or the blue button, so we made that change, and here is our final and approved version:
Project Landing Page Design Final and Approved
Finally, our last page that we needed to design was our contact page. Here was our first take:
Contact Page Design V1
We didn’t exactly like how that flowed. We decided our door image was a little too big and wanted to make the information flow a bit better. Here was our next and final crack at it:
Contact Page Design Final
There were a couple other page designs, namely the Services section, but I don’t want to get into that since it follows the same process as explained above. So, that concluded our design phase. Let’s move on to the next phase!
