DESN3204 - MyFood Website: Sitemap, Wireframe, and Mood Board Design

This assignment details the web design and development process for a MyFood website, following a waterfall approach. It includes the creation of a sitemap to outline the website's structure, a wireframe for the homepage to visualize layout and content placement, and a mood board to establish the visual style and branding. The mood board incorporates elements such as the header with logo and navigation, a banner section to capture user attention, a section with an embedded YouTube video and related content, a pioneers section to introduce key individuals, a community section, a values and mission section, and a footer with sitemap and social media links. Each section is described in detail, including the use of specific design elements and their intended function in enhancing user experience and communication. The assignment aims to provide a comprehensive understanding of the initial stages of website design, focusing on planning, visual representation, and user engagement.

Sitemap
Figure 1: My food sitemap

Home page wireframe
Mood Board
https://projects.invisionapp.com/boards/E53QTSTMUFV/

Layout and mood board explanation
The mood board is made up of the following sections
 Header
https://projects.invisionapp.com/boards/463QTSTV5J3/
This is the header section of the website and will contain the logo of the website and a
navigational menu to be used to navigate the website. The header section of the website is
supposed to remain the same for all the pages. At the left side of the header section there are
three icons that the user can use to quickly access either their account, their cart or to search
through the website. In case the user is logged in, the username of the user will also be shown
on the left side of the header section.
 Banner
https://projects.invisionapp.com/boards/B23QTSTF9TD/
The banner part of the website will come immediately after the header. This section is designed
to appeal the user thus capturing their attention. The banner is used in this page because the
home page of the website is the landing page of the website meaning that every visitor who
opens the website will see the home page. For new visitors who have never accessed the
website before, the landing page of the website should create a very good impression thus
creating an urge in the user to scheme through the website. Most websites lose their visitors
upon the first glance of the website if the website is poorly designed or the website is difficult to
use. Thus using a section like the banner section can help improve the design of the landing
page. The banner section will contain animated text to relay as much information as possible to
the visitor. By just glancing at the banner and reading different captions that will appear as the
images switch from one image to the other the user can understand what the website is about
thus getting an idea of what is contained in the other pages. This in turn improves
communication which is a key principle of web design.
 Revolution, publications and experiences section
https://projects.invisionapp.com/boards/XF3QTST5JZB/

This section of the home page is used to relay information to the visitor through a YouTube
embedded video which helps the user to understand the revolution that myfood company is
starting through their different products. Next to the video there is a subsection which contains
publication (https://projects.invisionapp.com/boards/2Z3QTSTCFDY/) information and another
section which contains experiences information
(https://projects.invisionapp.com/boards/DB3QTST2YHN/).
 Pioneers section
This section of the webpage will be used to show the pioneers behind the company. This section
is important as it helps the visitor to know the people behind the idea that the user is interested
in. Each pioneer can have a different color swap used as the overlay of the image such that
when the user hovers over the image, the website is supposed to display social media links for
that specific person. The visitor can use the links to interact with any of the pioneer thorough
social media. This will add a different level of interactivity to the website.
 Community of pioneers and ambassadors
https://projects.invisionapp.com/boards/R73QTSTYHU2/
This section is designed as a link to catch the attention of the user so that they can find out
about the community of pioneers and ambassadors behind the ideas that the visitor is
interested in. When the user clicks on the link provided in this section then the page that opens
can enable them to schedule visits to the business premises and to know more about the
pioneers of the business.

 Our values and mission section
https://projects.invisionapp.com/boards/KG3QTSTPXDT/
Its important for the user to understand the values and the missions of the business. The values
and the missions of the business are clearly stated out in a brief and comprehensive format to
make it easy for the user to scheme and read through them using the least amount of time.
 Footer section
https://projects.invisionapp.com/boards/7R3QTST5TDV/
The footer section is the last section of the home page and is also common in all the other
pages. The footer contains the sitemap of the website thus the user can use the footer to
understand how to navigate through the website and because the sitemap has the actual the
links to the pages then the user can use it to open pages. The footer also contains links to social
media and a quick form where the user can sign up for the newsletter.

All the sections described above make the mood board of the myfood home page.