The first step in creating the wireframe for MBS Creative was the pencil sketch.

After creating a pencil sketch of the wireframe idea, it was used as a reference to create a digital comp in UXPin

The UXPin comp was exported and brought into Photoshop to further the design along.

After working on the initial wireframes, I found that the UI wasn't working as smoothly as I wanted it to. The user should not have too many click throughs to get to where they want to go. I pared down the 4 image grid in my initial design to just one image. One possibility for the design could be that the image changes on roll-over for menu items, the image remains static, or there is a slideshow within that image area.

First logo design for MBS Creative

After further work, I decided the Newsletter bar should go, with two links available in in the introduction text, and in the navigation menu at the top right. In addition, the arrow design was scrapped as it was unnecessary and crowded the design. The same idea went for the logo placement. For a cleaner look I moved it above the intro section and scaled it down. The image area was extended to full bleed top and bottom right. The nav bar menu was getting a little bit lost, though, so I needed to find a solution. An initial logo was added at the top left above the intro text.

Second Logo Design for MBS Creative

The problem of the nav menu text fading into the background was resolved by changing the text color to white and placing it on a bar with a 21% black fill. Although I was personally disappointed to not use the green color from the color scheme for the nav bar text, that color will make an appearance on roll-over of the nav menu item. This design will also work when Illustrations with different color schemes are used as the main illustration on the homepage.

Nav Menu Item rollover effect: