Designing For Web: Study Task 1

Session 1:
Part 1:

The main thing we needed to get out of the session was to be able to have some direction as to what to produce websites for with the research we have, aiming to be able to answer these 6 questions:

1. What Is Your Subject Matter?
2. What are You Trying To Communicate?
3. Who Will Be/ Could be your End-user/ Audience?
4. What will be the most Appropriate/ Effective form of Content?
5. What Is the Function and Purpose?
6. What Sector/ Industry all you Design for?

We had to get into Groups of 2 or 3 (I was with Abi and Emily) and using the 6 questions, go through our research topic in order to help us determine what to do for our Websites. We did this by making a Spider Diagram and contributing to each others ideas.

Emily's Hand-Drawn Type Diagram

Emily has researched into Hand Drawn Type and we found it difficult to come up with some areas for different pages as each one we came up with seemed similar. A concept towards the website that we liked was the intention of the website having its own typeface with Emily could design. The site would be seen to encourage others to produce hand-drawn type and not rely on existing typefaces but being inspired by the ones on show on this website. It would function as a design inspiration site perhaps, with history of type, designers and videos of the design process that some of the designers go into. The audience would be other designers or those interested in Hand-Drawn Typography and would be presented in an easy-to-navigate manner with a gridded layout.

Abi's Swiss Alps Diagram

Abi didn't know where to start with her topic, however, it lent itself very well to the production of a website. We came up with some concepts first, suggesting that it could be a travel guide encouraging people to visit the landmark, with information including costs, history, geographical area facts and things to do in the area. Potential audiences could be families, thrill-seekers and young people but the main interesting audience was the concept of Young Couples and Newlyweds who could go away on a romantic retreat to the Alps. The site would encourage Tourism and persuade people to visit the area on holiday, using photographic visuals to give the appearance of escapism and elegance.

My Chocolate Diagram

In regards to my own website, we discussed the fact that my topic is quite large and should be narrowed down to make it more focused so I wanted to focus on Production and History. The site would be used as an educational, informative site which teaches people about the food they eat, where it comes from and how its made. A target audience which was seen as successful was the idea of Children as it is something they can learn for a project so I wanted to make it age appropriate but as a tool to be used by schools as well. I've never designed for this audience before so it would be a new challenge. I came up with some ideas and concepts to go with the brainstorm. The group came up with the idea of a Chocolate Factory that children could explore and have links coming off of and I came up with the idea of having a story narrative which would use a linear navigation and the children would follow a character through the site, making it fun and engaging. A consideration made was to think about doing the set up for a iPad as well as children tend to use iPads rather than laptops or computers to play on, making it more accessible to the intended audience. I will defiantly take these considerations on board.

From doing these Spider Diagrams, I was then able to answer the 6 Questions:

1. What Is Your Subject Matter?- History and Production of Chocolate
2. What are You Trying To Communicate?- Teaching how it is made, learning where food comes from, ext.
3. Who Will Be/ Could be your End-user/ Audience?- Child and Parent/ School and Educational facility and Institution
4. What will be the most Appropriate/ Effective Form of Content?- History and Production
5. What is the Function and Purpose?- Educational yet Engaging (Learning through Fun)
6. What Sector/ Industry all you Design for?- Food and Drink

Part 2:

Produce an Informal Brief: what you aim to Design, Why, When for and How?

Informal Brief for Designing For Web 

I think this brief is quite focused whilst still having quite a bit of lee-way for experimentation and development at this early stage.

Session 2:
Part 1:

The session started with us thinking about what we could have as 5 pages on our website following the brainstorm from the session before.

5 Pages Development

After thinking of 5 possible pages (Home, Origins, History, Production and Recipes), I decided to do some drawings to expand my ideas. The only problem with this is, the more I drew, the more ambitious the website proposal became which wash;t helped by the fact that my topic is quite broad. This is something I would have to consider when producing the actual website.

Following this, as a class, we came up with a list of possible pages that could be included on a 5 page website:

• Homepage- Indicative Content
• Contacts Page- Enquiry Form, Social Media Links, Contact Info (Email, Telephone, Address)
• Info/About Page- Ethical Statement, Facts
• Gallery/ Portfolio Page- Media, Pictures
• Forums/ Blogs/ User Posts- Feedback, Discussion

Then a list of pet hates and annoyances of web sites was complied as a class:

• Over or Under Categorisation of Data (Mainly Images) in relation to User Experience- Too many categories and not many images
• Landing pages for Mobile Users
• Homepages with little information as to where to go
• Contacts Details not on Homepage for mobile users

Following this, we needed to come up with a layout design for the website home page itself.

Homepage Initial Sketches

I drew some initial sketches but I actually found coming up with the homepage more difficult than coming up with ideas for the site as I didn't know how to start it off and present my website.

Layout for possible Front Page

In the end, I came up with just a simple, plain layout which would work for a website based off the drawings that I had been doing.

We then had to crit each others front pages based on the designs that we had been doing and the front page layout we had created.

Crit Feedback

The main feedback I got from my Crit was that it was a clean and simple layout which would be easy to navigate. Another positive comment I got was that my visual content was quite interesting and engaging, however, a good piece of feedback I got was to consider whether the topics of origin and history would overlap? This is something I will have to make sure doesn't happen when I am producing the content for the Website. Another great consideration I was given was about maybe having a navigational bar at the top rather than at the bottom so this could be something I play around with when I experiment and develop my Website.

Study Task:

We needed to take a look at the audience we are looking into producing work for, mine being children.

When looking at websites for kids, there are a range of fundamentals that are the main things to include in a design:

• Bright colour
• Interactivity
• Imagery over Text
• Easy navigation
• Be responsible

Bright Colour

The first thing that a website for children needs to do is to catch the attention of the child and this is usually done through block bold colours and illustration.

PBS KIDS Website Homepage
Available from http://pbskids.org

This impression can normally be achieved with a strong homepage or landing page which immediately captures the imagination of the child. This is illustrated very well on the homepage of PBS KIDS, a television network for children. The colour scheme is gender neutral with bold neon colours that instantaneously catches the eye. Once the attention has been grabbed and the kids can select their favourite character then it will be the character that will keep them on the website but for the initial impression to look and search the site, it is the aesthetic of the homepage.

Interactivity

All children's websites need to be able to hold the attention of young children as they have short attention spans.

Dr. Seuss Website
Available from http://www.seussville.com

This can be done through motion graphics, activities and games. Even scrolling down a page or following a character can encourage children to keep using the site. This Dr. Seuss website highlights the different forms of interactivity available, with a loading page interactivity holding the child's attention whilst they wait for the page and then the use of music, voices and animation keeps for an interesting visual experience for the children to take in.

Imagery Over Text

Illustration seems to be the main method of producing websites for children as it provides a soft character which children can identify with.

Silly Poems for Even Sillier Kids Website
Available from http://www.sillypoems.info

The softness of the illustrations makes it accessible to a wide age group of children. This example of the Silly Poems website uses cartoonish, fun characters and full colour illustrations and backgrounds to hold the interest of the website.

Easy Navigation

Based on the understanding of the child, the website itself needs to be easy to navigate and follow as, if children find it difficult to use, they will become confused, frustrated and, ultimately, will not return to the website.

Rainbow Magic Books Website
Available from http://www.rainbowmagiconline.com

Even by including just a simple navigation bar, you can make the difference between a child's enjoyment or frustration. The Rainbow Magic website is a great example of a clear navigational system with different colours marking different areas of the website which is clearly highlighted when the curser hovers over it. The fact that the background is also interactive and acts like a navigation system makes it more fun but the bar is there for reassurance.

Be Responsible

As a designer, we have the ethical obligation to produce websites for children that are educational and safe for them to use.

Kids Fruit Website
Available from http://www.kidsfruit.org/index.html

The Kids Fruit Website is an example of how illustration has been utilised for children to identify with the information being provided, especially with a topic which is traditionally not a topic enjoyed by children which is eating fruit. The fact that the website is trying to promote healthy eating in children highlights the need for responsible design that is educational and helpful.

One thing about my audience of children is that the introduction of tablets and smartphones has meant that apps have made learning very interactive on a screen for kids.

"Are Tablet Computers Bad for Young Children"

Cocozza, P (2014) "Are Tablet Computers Bad for Young Children" [Internet] Available from http://www.theguardian.com/society/2014/jan/08/are-tablet-computers-bad-young-children (Accessed 8th January 2014)

This highlights the large amount of children who use these gadgets and how they access information to learn. It would be a good idea for me to consider producing an app or tablet version of my website as it is a strong way of connecting to my audience.

For the brief, we are to look at other websites which already exist which are based around the topic that we have researched.

"Chocolate Research Facility" (2010) by Asylum

Asylum (2010) "Chocolate Research Facility" [Internet] Available from http://www.chocolateresearchfacility.com (Accessed 22nd October 2013)

First Impressions: Clinical, Overbearing, Disjointed, Difficult to Read

The design for this website makes no sense as it jumps from one aesthetic style to another. This creates a disjointed effort, particularly with the melting chocolate dropping down from the top of the page, making it increasingly difficult to read and overbearing. The navigation is at the bottom but on a small scale making it difficult to read and navigate.

"SCHAFFEN BERGER"

"SCHAFFEN BERGER" [Internet] Available from http://www.scharffenberger.com/pairings-and-recipes/pairing-navigator/ (Accessed 22nd October 2013)

First Impressions: Classic, Brown, Interactive, Sophisticated

This website has a strong classic appearance aimed at a sophisticated, mature audience. The interactivity of the site works with the actual its interface, adding to the user experience rather than taking away from it. The Pairing Navigator allows for a fun way of determining chocolate flavours to try and what they go with, adhering to the audience conventions and needs yet in a sophisticated way.

"Bloomsbury & Co Ltd" (2013) by Bloomsbury

Bloomsbury (2013) "Bloomsbury & Co Ltd" [Internet] Available from http://www.bloomsberry.com (Accessed 22nd October 2013)

First Impressions: Professional, Grids, Layout, Designers, Brown

The impression this Chocolate Site gives off is being that of a portfolio of a Designer as it is very sparse and gridded thereby not instantly being clear as to its purpose- the fact it is a chocolate website is not very clear. The Professional layout gives the feeling that it should be for a Studio or Agency rather than a Chocolate brand and I believe that the makers of this website have got their priorities wrong in this instance. They have mad sit to a target audience of potential clients yet they haven't thought about the customers.

"Bloomsbury Labs" 

"Bloomsbury Labs" [Internet] Available from http://www.bloomsberrylabs.com (Accessed 22nd October 2013)

First Impressions: Clinical, Mathematical, Teenagers, Colourful, Pictograms

This website design seems to be aimed at Teenagers or Young People based on the bright colours and use of pictograms which provide a youthful edge to the overall layout. The fact that it is on a graph-paper aesthetic gives quite a clinical and scientific feel to the whole site. The layout for the chocolate bars themselves are nice and the site reflects this, with the designs for the bars themselves seeming to be visually influencing the site design.

"ZChocolate"

"ZChocolate" [Internet] Available from http://www.zchocolat.com/#/home (Accessed 22nd October 2013)

First Impressions: Classy, Regal, Sophisticated, Luxury, White, Pure, Luxury

The design of the website is mainly focused on the products themselves as the chocolate photographs is what takes up most of the space on the website. This highlights the quality of the product, marketing it for a sophisticated, female audience. The way that the navigation bar is along the bottom which makes for a different user experience and the links of the pictures allows for a classy way of orientating and manoeuvring around the website.

"Willie's Cacao"

"Willie's Cacao" [Internet] Available from http://williescacao.com/fine-chocolate/home/ (Accessed 22nd October 2013)

First Impressions: Interactivity, Blue, Old, Disjointed

The way that this website is laid out gives the impression of it very disjointed, as the homepage does't visually correspond that well with the rest of the content pages. The Homepage itself gives the impression of an Interactive website but the fact that the rest of the website visuals don't follow suit giving a disappointing user experience.

"The Willie's Cacao Shop"

"The Willie's Cacao Shop" [Internet] Available from http://www.willieschocolateshop.com/willies-cacao-chocolate-shop.html (Accessed 22nd October 2013)

First Impressions: Traditional, Interactive, Authentic, Classic, Nostalgic

What makes this a great Chocolate Website is the User Interface and Homepage which is in the style of a Traditional Sweet Shop, emphasised with the rustic, pastel colours, with the products of the site being lined up on the shelf making for a Nostalgic Site, appealing to a more mature, older audience. The fact that you can find recipes as well which you can make your own cakes with the products is also reminiscent of a Traditional and Authentic-style shop.

"Cadbury Dairy Milk Joyville"

"Cadbury Dairy Milk Joyville" [Internet] Available from http://www.cadburydairymilk.co.uk (Accessed 22nd October 2013)

First Impressions: Interactive, Colourful, Fun, User Experience, Audience Appropriate

The website layout is linear which means that the web pages can be scrolled down and have things flying out at you and pop up from nowhere. The site itself is suppose to be for children but it does have an aesthetic and approach which means that adults would be happy to use it and have a go themselves, enjoying the experience. The site content is to do with chocolate and will aim to be used as a marketing tool and advertisement for the chocolate but the pages are imaginative and have unexpected content which makes for a website which people can keep coming back.

"Peterbrooke Chocolatier"(2012) by Station 4

Station 4 (2012) "Peterbrooke Chocolatier" [Internet] Available from http://www.peterbrooke.com (Accessed  22nd October 2013)

First Impressions: Purple, Clean, Imagery, Ease of Use, Clear

This website is very clear in its ease of use, with an array of Navigational Bars and Links at the top of the page allowing for Audience Orientation throughout the site use. The scroll down options for the pages allows for extra room and space for information which is utilised as it is clear to read and easy to understand.

Preparatory Task:

We needed to have a copy of the 5 websites which we felt were the best ones on the topic we are doing. These needed to be printed off in a A3 Size for the next session to Crit.

Printed off 5 Websites

The 5 Websites that I chose from the ones I researched were:

1. Cadbury Dairy Milk Joyville
2. The Willie's Cacao Shop
3. ZChocolate
4. SCHAFFEN BERGER
5. Peterbrooke Chocolatier