The Landing Fork is a Cooking Shop and Blog website interested in a new homepage and they asked me to design a wireframe, based on a given structure, to see if it would work. The header must contain some navigation menus, the logo, and a search bar; the main section has the latest articles, made in a way that feels organized and structured, yet dynamic and easy to scan; and the sidebar is open for me to think about a good idea.

In this project I learned how to start and develop an idea into something tangible. Everything started from simple pen and paper drawings to then been transferred to Adobe Xd for a more refined look. I experimented with some variations and finally came up with the final wireframe.

My objective on this project was designing the wireframe of the homepage with the following parameters:

There are 3 sections, the top section will be for navigation and it has to contain the name of the site, navigation, and search. The central area should have at least 3 blog summaries with title, author, date and first sentences. Finally, the sidebar was open for anything for any interesting idea that I might have.

The overall objective of this wireframe was "to create a blog that is easy to understand, with logical navigation and content groupings that helps recommend recipes to users." So I grabbed my pens and started sketching!

From the website description, it seems that the brand aims to sell products through content marketing, in other words, writing and sharing blog posts showing how to make cool recipes with the implementation of their own products. From this perspective, we can understand who the audience is: anyone who is interested in learning new recipes, this wide demographic could fall on particularly these people: those who are living alone for the first time and need to learn to cook, boyfriends and girlfriends, husbands and wives, fathers, mothers and grandmothers who want to surprise their sons and those who want to learn for passion. Finally, we can narrow this people by age, from 18 to 70 years old, most probably living with their loved ones.

Ok, here we go. The first thing that I did was considering how I wanted to arrange the content. I translated my thoughts on paper through sketching. My preferred method of brainstorming is Google's Crazy 8's with which I quickly created and compared different ideas to see their potential. I focused on making a clean, organized and interesting wireframe. Here's the result:

As you can see, I highlighted the elements that I enjoyed. Like I mentioned before, I was looking to make a clean, organized and interesting wireframe, so I focused on these things when selecting ideas. It was important that every word was easily legible and that it catches the eye of the reader.

For the sidebar, which was to my own choosing, I asked myself "How could I complement the content that is already on the page?" And the first thing that came to mind is showing the top recipes, for example, of the last month. This way, the user can choose to read blog posts or jump straight to some good recipes. Then, I considered adding the newsletter at the end to keep brand and users connected. My second sidebar idea consisted on showing the categories of food so that the user can filter and see the blog posts and recipes of the cuisine chosen. I liked more this idea since users can go straight to what they're looking for; maybe mom wants to make some brownies for the guests: she can click directly on the desserts category.

With some ideas ready, I opened Adobe Xd and reassembled every element that I liked into two screens. I implemented a great amount of Gestalt's Principles on these designs, in particular, the law of proximity (our brains see objects close to each other as related). You can see how I used different sections per each wireframe:

Finally, after asking for feedback, I was told that the second wireframe (the one with the bigger images) felt more dynamic and interesting. I compared both designs, and I agreed. See for yourself, which one you like the most?

The final result of this project is the two wireframes which could then be developed into a prototype, and then, implemented on the final product. This project taught me the first elements of visual design that I learned, I understood how to balance the elements of a design to make it more pleasing to the eye. I learned to implement the Gestalt Principles to my own favor. I recognized how to develop ideas (the sidebar) to complement the main purpose of the project. Finally, I learned to develop a drawing into something tangible, starting from the mind, to the paper, and finally, on the computer.