During this week’s lecture on Tuesday we were introduced to wireframes and their importance in the web design process. A wireframe is an image or set of images that display the functional elements of a website while helping to establish a site’s structure and hierarchy. There are many reasons a wireframe is important, one of the most valuable being their ability to help you save time and money in the long-run.
With our design showcase we were tasked with choosing our favorite restaurant and designing a wireframe for them with a set of features. It was hard for me to choose a favorite restaurant but I immediately thought of the food delivery service, Blue Apron. My fiance and I have been using Blue Apron for over nine months and love it. Every Tuesday we receive a box of ingredients and recipe cards for three meals (usually dinner). The wonderful thing about Blue Apron is that we receive the exact amount of food we need, usually measured out for us so we never have too much or end up throwing food away.
Blue Apron has a great website so I didn’t choose the company because I thought their site could use a redesign, I instead chose the company because I have a personal connection to it. The assignment required the format be: 1280 x 972 pixels and I chose to have my site centered with text falling within 1,000 pixels wide. Another requirement for the assignment was too use these elements on the homepage:
- Logo
- Navigation menu
- Social media icons
- Rotating slideshow image
- Upcoming events/specials
- Three feature areas (pictures and/or copy)
- Contact Us area
- Another feature of your choice
Blue Apron has a great logo and I also love that the text on their site is in dark blue and not black which I would keep with a homepage re-design. Currently the logo is on the left with the navigation panel immediately following (below).
I would keep the logo in the same location but include a tagline/few words that describe what Blue Apron is about beside the logo. I would then place the navigation panel immediately below (my wireframe example below).
With keeping in mind that most people read a site from left to right then top to bottom I wanted to include important details in the upper left portion. Most sites have a sign in or register section to the right so I wanted to keep this the same. A change from their current homepage is including a video below the navigation panel. I find the concept of Blue Apron to be great and quick video that tells the viewer what it is about and how it could be beneficial for them would work well on the homepage.
I am including an image of my new wireframe and will go through the additional choices made for item placement.
*Disclaimer I am not affiliated with Blue Apron and this is solely for educational purposes.
To the right of the video I wanted to include a rotating image of different Blue Apron meals. Below the video I have a section for events, this is more of a placeholder at the moment and can be replaced with a different type of announcement. Underneath the rotating images I wanted to have three sections with images and text. I chose to have these areas to really breakdown what Blue Apron is all about. Currently on Blue Apron’s homepage you have to scroll down to get to these sections whereas with my re-design the information is presented without having to scroll so much.
Blue Apron has gotten a lot of great press so I wanted to include a section that highlights this on the homepage. With Blue Apron the goal is to get clients to sign up for the service and while social media is important for them, I would not view it as their top priority. With this in mind, I placed the social media icons in the footer section. The social media icons I used were found on this site.
I really love the blue color that Blue Apron currently uses so I would keep that while also incorporating a beige color and greys that would work well with this blue. I took screen shots of the images below from Blue Apron’s site and used my Eyedropper Tool in Photoshop to get color reads on the tomatoes. I wanted to incorporate accent colors that you would find from food and went with an orange/brownish tone and a red tone.
As I mentioned earlier I am not affiliated with Blue Apron but if you are a looking for a great way to save on time, food costs, and waste, I highly recommend them!
Ashley Childers 