Design

03 Early Wireframes

Our early wireframes were still very much exploratory in nature as we tried to narrow down the informational content of the website while also applying the grids we had been experimenting with in our sketches.

All wireframes were created in Adobe Illustrator

From these wireframes, we collectively brainstormed to come to a consensus on the final grid that we would use.

Our grid includes 2 types of information regions. The dynamic region by far takes up the most real estate. This is done intentioanlly as this is the area where we want the users to view first. The rest of the grid consists of static information that will be seen on every page, and hence does not change from page to page. These include:

• Logo area
• Personal greet & link to account information
• Menu bar, with a simplified search bar
• Link to the user's inbox
• Area designated to backward navigation through the use of breadcrumbs
• Right hand side panel that will include various generally useful content
• A panel that will show the user's social network
• A bottom panel that include company-type links (such as copyright, etc)

The two largest regions by far were designed once again occuring to the research we had done earlier. Wine tasters are motivated by learning and also quickly form vast social networks while networking and meeting new friends at these wine tasting. The main panel and the side panel emphasizes the learning aspects for the wine tasting, while the bottom panel (which will include pictures of friends) emphasizes the social aspect of wine tastings.