Web Page Mock-up

artboard-2-100

Description

Design a website homepage using a grid.

Process

  1. Sketched three different layouts for my website. Each was vastly different. I decided I wanted to go for a less traditional website design. Initially, at least.
  2. I then created three different wireframes using a 960.gs 12 grid. Each a wireframe rendition of my sketches. Included is the initial wireframe design for the design I (initially) went with.
  3. Using the grid, I aligned all elements to the left side of my page from the start. Each with varying distance from the edge.
  4. I initially made the header solely the logo.
  5. I added a line segment next to the left side navigation text in order to provide a minimalist separator from the main page’s text and image. It was literally the only line on the page. The rest was either an image, a dot, or text. This one line, I hoped, would convey enough meaning to guide the user through the page.
  6. I realized Worldwide Security was a very straightforward company. There didn’t need to be a lot of information for those visiting the site. The company is very niche, and usually the type of people who would hire them already are aware of the services they provide. So, I opted at this point for a very simple menu system. One click to go anywhere you needed to go. Minimalism was the goal.
  7. In order to emphasize hierarchy I chose a large font for the header, a smaller font for the subtitle which listed the section you were in (and made this font a sans-serif), and the smallest font for the main text and the navigation on the side.
  8. For the side menu I wanted to continue with the “planet” design focus I had used in my letterhead and business card for my “business design” project. So, I added the same footer I had for my letterhead. I also added color to each of my bullet points which were on the side navigation bar so they mirrored the colors of the planets I used in the footer.
  9. I found a photo online which helped to highlight the planet theme further, while also helping to clearly define the blue dot in the logo (representing the Earth).
  10. I added a simple location and copyright section in my footer as well.
  11. After printing out my first design draft, it just didn’t feel right. It felt bad, even. When I spoke to my professor I explained simply “This just looks like a letterhead.” She responded that she had just been looking at someone’s resume and it carried a lot of similarities.
  12. Following my critique, I decided to greatly alter my design. Ultimately? I decided to change just about everything about my layout. I realized that when it comes to a website usability is much more important than originality. So, while a website can be creative, ultimately it is a tool! If your user doesn’t know what to do on it, then your design is faulty. So, I decided to switch to an equally minimalist look that had a less abstract structure.
  13. Firstly, I wanted to make my header more defined, and my footer as well. So, I inverted the color of the ring in my logo to make it white, and made my text white as well. I then placed a black rectangle behind all of these.This helped provide a professionalism, a solidness, and a more pristine look to my design.
  14. I performed a similar maneuver with my footer. I thinned it out, made the copyright and address text much smaller so it would fit (and so it wasn’t as big as my primary text – an oversight I had already made). I changed the color to match the color of the header.
  15. Still, there was something off. No matter what I did, I couldn’t get the side navigation bar to look good. Even when I changed the colors so they weren’t mirroring the planets they just looked bad. It looked like little more than a wireframe. As I shuffled with this design i decided to look at some other examples of vertical navigation bars. I cruised through Google, and had a realization: My problem was the bullet points.
  16. After getting rid of the bullet points I also realized my footer image I had used on the letterhead just wasn’t going to work. My logo was timeless, that thing wasn’t. It threw my whole color scheme off. It belonged on a letterhead. Not a website. I got rid of it and replaced it with my more simple, refined logo. It fit more in with the clean cut look my new design was aiming towards.
  17. After fiddling with the side navigation bar I realized my logo just didn’t lend itself to a vertical navigation bar. The words “Worldwide Security” stretched horizontal, and the eyes had to travel all the way to the side in order to view the navigation. It felt disconnected from the logo and the header. It just didn’t fit. I decided then that I had become a bit of a slave to the idea of a side navigation bar. I laid the five main navigational buttons in equal distance from one another, and laid them beneath the company name.
  18. I got rid of all things from the sides and aligned all text and images with the company name in the header as well.
  19. I changed the colors of all the navigational words to blue, the same blue as the dot in the logo. I also made it so when you hover or click on a piece of text it turns white. This is so the user can clearly see where they are – both using the subtitle beneath the heading as well as the navigation bar.
  20. When all was said and done I was left with what still felt like a unique – but not ridiculous or letterhead-like – design. I ended up extremely satisfied with my design. It was a hard design to make, the hardest I have made yet despite its simplicity. Clean and Minimal, cutting and sharp, aggressive yet elegant.

 

img_20170225_210126artboard-2-100

Critique Process

In class I met with Chris, Brooke, and Robert. They looked over my design and ultimately suggested I refine my header and footer, as well as the general color palette. Their color palette critique was their most beneficial. As I refined the color palette from a series of colors to just a selection of three it gave the design a much cleaner presentation. More fitting for a professional company.

I still felt a lot of work needed to be done, so I talked to my professor. She gave a whole slew of things I could look at revising. From font sizes, to tightening up my logo size, to providing a clearer separation between the header and footer. These were not drastic changes, but as I sought to change them I discovered some of the major flaws I had in my design.

My class then spent time going from website to website, quickly sketching out new ideas for the website’s design. I was struck that only one of the sketches someone had made for mine included my vertical navigation bar. All others suggested I move the navigation to the top of the page. Although I resisted this criticism at first, when I decided to give it a chance I realized it looked worlds better. I had gotten so married to my original design idea that for a time I was refusing to make it better.

I will never take critiques for granted again when it comes to design. Fresh eyes provide fresh perspectives, and without the insight my professor and fellow students invited my website would still look bland – even downright bad if I am being honest. The critique made this design come to life, or at least my listening to it and trying something different.

Message

We are a professional business for those who already understand our services. If you need professional, secure, worldwide security, then you are in the right place.

Audience

Men and Women ages 35-60. Professionals, politicians, and people in charge of providing security for the global elite.

Top Things Learned

Never get married to an idea. If you cling to a design idea you may never realize it is the problem. As you let criticism into your life and allow yourself to experiment with new ideas, you may learn the best design is something you hadn’t initially thought of.

Color Schemes & Color Names

Triad // Dark brown / Gold / Muted Blue

Title Font Name and Category

Edition // Serif

Copy Font Name and Category

Roboto Light // Sans-Serif

Thumbnails of any original, unedited image(s) used in the project

globe-world-ippnw-light-nuclear-peace-1170656

 

Source of each image

Freeimages.com

Link to Image 

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s