Smoothie World

Learning the basics of web design with Serif WebPlus x7

Smoothie World
Introduction

Introduction


The Task

You have been asked to design and create a multimedia website for Smoothie World.

Smoothie World is a new, locally based chain of smoothie bars that sells a wide range of healthy organic smoothies and wraps.

They currently have 3 smoothie bars but, since appearing on BBC’s Dragon;s Den, have plans to become a large national franchise in the future and are looking to add locations in London and Edinburgh.

Smoothie World prides itself on its use of organic fruit and vegetables in its smoothies. It also supports the campaign to eat 5 portions of fruit and vegetables a day as part of a healthy diet.

Smoothie World aims to make all of its products appealing and affordable for young people.

The Business

A smoothie bar is a café that specializes in selling fruit smoothie drinks. They are similar to coffee shops such as Pret and Starbuck, in that tables are provided to eat-in but a lot of customers buy the products to take away and eat elsewhere.

Smoothie World sells not only a selection of smoothies but also a range of healthy and affordable wraps.

Each Smoothie World smoothie bar has a bright, fun, modern feel and they would like the website to reflect this, as well as the freshness of their products.

Who are they selling to?

Smoothie World believes that they have a unique approach to the refreshments market. Most cafes and coffee shops target their products and prices towards adults. However Smoothie World sees their target market as young people, specifically the 11-17 age range, those old enough to go out with their friends to town after school or before work, but not old enough to visit bars or expensive coffee shops.

Smoothie World believe that young people are slowly becoming more conscious their of their diets what they choose to eat and drink. They aim to encourage this trend by selling great tasting, affordable and healthy products with branding and advertising that will appeal more to young people.

What is a Smoothie?

A smoothie is a blended drink made from natural ingredients, usually fruits and juices, but sometimes other flavours such as chocolate.

They are similar to milkshakes but they usually do not contain milk or ice cream, although they sometimes do include yoghurt.

Smoothies are marketed to health-conscious people, and are often made with vitamin and nutritional supplements.

Smoothie World always uses fresh organically grown fruit and vegetables and they do not use any artificial flavours or colourings in their drinks.

Smmothie World
What is a Smoothie?

A wrap is a snack made from sandwich fillings wrapped in a flour tortilla. They make a tasty alternative to sandwiches and the tortilla is lower in carbohydrate than bread.

The most popular wraps contain chicken, but many different meats and fillings can be used. Typical toppings include lettuce, tomato, peppers, bacon and grated cheese.

Smmothie World
Planning and Preparation

Planning and Preparation


Project Brief

Smoothie World wants their website to perform the following functions:

  • To highlight the range of smoothies and wraps that they sell
  • To inform customers about the locations of their three smoothie bars
  • To explain the benefits of eating five portions of fruit and vegetables a day
  • To seek feedback from customers about the website and how it could be improved as well as find out about their favourite flavour of smoothie.
You will be required to plan/design the website before you create it.

Key Concepts

The following documents and links contain key information and tips for designing individual web pages and whole websites.

Each one will introduce to a key concept that will help to improve your work and ensure that your final product looks professional:

Planning Task

Read through the assignment brief carefully. You should make notes of any first thoughts you have. Consider carefully the target audience for the website, and how you will address all the requirements of the client. What colours will you use? How will visitors navigate the website?

1. Identify the purpose and target audience for your website by completing the table in the website planning document.

2. Next produce a site plan for the Smoothie World website to show the main structure of the site and how the pages will link together.

Your site plan should:

  • Be on a single page
  • Show an overview for each page
  • Include every page from your website
  • Give an overview of the navigation system and how each page is linked to the others
  • Identify your target audience and the purpose of the site
The website planning document can be used to help you produce your site plan or you can produce this from scratch.

3. Produce detailed page plans for each page in the website to show the layout of different multimedia components and a description of the navigation system

4. Plan the house style for the website - to include colour scheme, fonts and styles to be used, any logos, image maps or rollover images to be used. There should be an indication of the position of different components on each page, such as logo and navigation system.

The website does not need to contain components that you have made yourself. You may use and adapt suitable components that already exist, but they should be fit for audience and purpose.

Resources and Components

Make sure you have read through the scenario carefully. Think about the kinds of features you would like your website to have.

Task: Research other smoothie bar sites on the internet such as http://www.innocentdrinks.co.uk or https://www.smoothieking.com and look for ideas of things that work well and features that you like. Make sure you add these features to your plan.

Make a note of multimedia features such as sound and video. How does the web designer make these sites accessible to visually impaired or deaf users?

Extension: Take a look around via Google to try and find some useful resources, images, video etc that you might want to use in your website.

Save files into your assets folder. Remember to log your sources.

The following link will give you access to the assets folder. In which you will find all of the materiels that Smothie World have provided you with to make their site.

Building the Site

Building the Site


Content Creation

Read through the Smoothie World assignment brief again very carefully. In Task 1 you should have already produced a plan on paper for a Smoothie World website.

In this mini brief you are going to create the pages that make up the Smoothie World site.

  • Set up a suitable folder structure for your website – use subfolders for content such as images. Use appropriate filenames for your pages and folders. Take screenshots of this folder as evidence.
  • Use your plans from section 1 to produce a Master Page template (cascading style sheets) and to set up colour schemes and text style sheets. This will be your house style. Where possible define text elements such as header text and body text.
  • Produce a homepage and at least four other pages.
  • Produce all the text content for the site. You may choose to copy and paste relevant sections from the assignment brief. Format this text to the chosen house style (font, colour, size etc).
  • You may use tables or similar methods to arrange and align your content where necessary.
  • Use a range of different components on your pages such as images, animations, video and other interactive content that you feel would be appropriate to the site brief.
  • Use appropriate filenames for your pages.
  • Proofread and spellcheck any text that you use.

Using Serif

Read through the Smoothie World assignment brief again very carefully. In Task 1 you should have already produced a plan on paper for a Smoothie World website.

The following links are to video tutorials that will introduce you to Serif WebPlus:

Testing and Evaluating

Read through the assignment brief for the Smoothie World website again. You should now have completed your website for Smoothie World based on the specifications in the practice assignment.

You will now test a number of different areas of your Smoothie World website using a test table. This will allow you to identify areas where the website needs to be improved

1. Open your website in an internet browser such as Internet Explorer. Check that all of the hyperlinks work as intended.

2. Produce your own test table to use when testing your website. You must check all the hyperlinks and navigation system and conduct at least 2 other tests from the following list:

  • Use of a consistent house style
  • Use of different components
  • Suitability for target audience
  • Interactive elements
  • User form
  • Ease of use
  • Purpose of website
3.Test your website in two different browsers. Suggest two or three changes you would make as a result of your tests. Your test table should indicate the actions required to solve any problems.

4. Explain how your website meets its intended purpose and how it is suitable for its intended audience.

If you need to get in touch with Mr McG then this is the way….

What's your name?
image/svg+xml
Thank you [name], that's great.

Can I ask where you are from?
image/svg+xml
Hey [name], can I ask where you are from?
image/svg+xml
Hey [name], which class are you in?
image/svg+xml
OK [name], thanks for that.

I will need your email address so I can get back to you!!
image/svg+xml
Thanks [name], nearly there.

What can I help you with?
image/svg+xml

Thanks [name] from [whichclass][location], Mr McG will get your message…"
[message]"…and will get back to you ASAP via [email]. Catch you soon.

image/svg+xml
Thank you [name], Mr McG got your message.
Thanks [name], Mr McG will get back to you as soon as he can!!

Have a great day!!

K McGuinness - 2018

No personal data will be shared with any third party. The only data processed via this website is anonymous browsing data to best manage your user experience.