Kathryn Slaney - 1103768
Recipeek.uk.com A website with all your recipe needs, from cakes for kids, a meal for 4, delicious student meals on a budget, to recipes for quick easy banquets and the opportunity to share your recipes and tips.
Kathryn Slaney - 1103768
0ď‚—
Kathryn Slaney - 1103768
Recipeek.uk.com Table of Contents Terms of Reference ................................................................................... 2 Methodology ............................................................................................ 2 Findings ..................................................................................................... 3 Discussion .................................................................................................. 4 Conclusions............................................................................................. 10 Bibliography ............................................................................................ 11 Appendices ............................................................................................ 12
1ď‚—
Kathryn Slaney - 1103768
Recipeek.uk.com Terms of Reference I am creating a recipes website that will be suitable for families, children, students, and people with hectic social lives and anyone else who wants to use it. In this report I aim to show why my idea is a good one, and why I have made the choices about my colour scheme, layout and domain name. In my report I will discuss the accessibility and usability of my website, also whether I have used branding and graphics application, the content and target audience, navigation and file naming conventions and the importance of bandwidth and download time.
Methodology I collected the information used in my report and on my website from the internet and information given to us in lectures. The websites I have used are listed in the bibliography along with the date I visited them. I also posted a short online survey on to a popular social networking site for other people’s opinions on what website I should make.
2ď‚—
Kathryn Slaney - 1103768
Findings Before deciding on an idea for a website I created a short list of my favourite hobbies, I placed these in a spider diagram to see what they would look like as possible website ideas (see appendix 1), I chose to do a recipe website, as I felt this would be more appealing and had a wider target audience. I then thought I would ask other people what out of four choices they would consider to be a good and interesting website for me to create. I created a short survey on questionform.com and posted it on to the popular social networking sites Facebook and Twitter for people’s opinions (see appendix 2 & 3). After the results from the survey were tallied up, I then went on to compare three recipe websites (see appendix 4). I compared three different websites on recipes, hoping to find a middle ground for my website. On completing the comparison I then decided that I would create a website that would be suitable for everyone, such as parents, children, students and everyone else that would like to use it. I then went on to brain storm my recipe website idea even further (see appendix 5) to see what content I could place on my website. Once I had completed the brainstorming I then started to consider the accessibility and usability of my website, because I want my website to be used by a variety of different people, I had to make sure my website adhered to the rules. I then went on to choosing a colour scheme for my website, I wasn’t sure at this point on the lay out, but I created a basic homepage on Microsoft Word (see appendix 8). My initial choice for a colour scheme was to have different shades of blues, as I had seen this on one of the websites I had compared and I really liked it. After creating a basic storyboard I then went on to create a better on one Photoshop (see appendix 9). After I had created my first storyboard on Photoshop I then made a site map for my website. I did this in the hierarchical layout instead of the linear, as I felt this was more practical for my website. Once I had created my homepage on Photo Shop, I then realised I didn’t like my colour scheme, and then decided to change it. I was unsure of what colour schemes would go together. After much thought I then decided to have navy blue, mild purple, a lime green and a mint like green (see appendix 10). I felt these worked well together. I then began to redesign my homepage using the colours I had chosen. Whilst designing my website, I wanted to leave as much ‘white’ space as possible but to still have the relevant information on each page. 3
Kathryn Slaney - 1103768 Whilst designing my website I found that by keeping the layout basic and the same on every storyboard that my website looked consistent and tidy, so I made sure I kept this same layout on all my storyboards. In the process of designing my storyboard on Photo Shop I created my websites logo. I have chosen to call my website Recipeek, not quite sure why I like the name, but I feel like it is simple and rather easy to remember. My logo for Recipeek, is also simple it is and is the header on all of my website pages. It is ‘Recipeek’ with donuts either side, in a purple colour with a white background. Once I had created my first second version homepage, I then made sure I used the same layout for the rest of my storyboard, keeping up with consistency that is required in the usability and accessibility rules. I made sure it looked clear and not over crowded with colour or text boxes. On completion of my homepages, I made sure I had notes to assist my designs for future reference, when I am creating my website; all the notes corresponded correctly with each storyboard. Using images, and slideshows on my website would mean I have to consider download and bandwidth, so I will ensure that any audio and visual media, is not a large file size, so even on the slowest of internet connections, it takes a reasonable amount of time to load, and does not take too long, so that the user clicks off my website.
4
Kathryn Slaney - 1103768
Discussions When I placed the survey online, I created a simple multiple choice question as I was aware that majority of people would not fill in a survey if it took longer than a few minutes and asked for more personal details, such as sites they use etc. I first found it very hard to get people to vote, as majority thought that it was a virus, after I had convinced them that it was a genuine link for their opinions, people started to vote. I had 30 voters, throughout the voting I noticed that it was either recipes or shopping that were chosen, the nursery and DIY choices had the least amount of votes (see appendix 2). Once I had the results from the survey it was clear to me that majority of people would rather a recipe site, I was rather surprised by this as I thought recipes would have less votes than the shopping option, I then realised that majority of my voters were either students or parents, so this clearly influenced the results from the survey. The target audience I have chosen is broad as I found when I compared the three recipe websites, that they mainly focused on one particular group, that being adults, I wanted my website to be suitable for everyone that was able to use the internet. Looking at the three websites, I found that they all had a good layout for their intended purpose, and in my opinion were effective in majority of the rules of accessibility and usability, although I did find on one site, that the links didn’t appear to be working, but that could also be because I was using Google Chrome instead of Internet Explorer, and didn’t think to try it in another browser. Whilst brainstorming my website content (see appendix 5) I made sure that I followed the rules of usability and that my website was adhering to the rules of accessibility. Accessibility The goals of accessibility are to make a website perceivable, operable, understandable and robust. With want to make my website the most accessible it can be I have to take in to consideration non-standard browsers (Firefox, Google chrome, Safari, Internet explorer) and also older versions of browsers, new display mediums such as mobile phones, interactive TV’s and speech readers for example, I also have to consider other operating systems and also browser set up. There are advantages and disadvantages of website accessibility (see appendix 7). Although I can’t really focus on the accessibility completely until I’m making my website, I still need to take in to consideration some points at this stage of my website development. I need to make sure that colour alone doesn’t indicate links for 5
Kathryn Slaney - 1103768 example; I need to be able to look at my website in black and white to see if the font and layout are still understandable.
I have found though looking at making my website as accessible as possible that I need to make sure I use:
Access Keys Alt keys to describe any images and animations/slideshows Transcripts of any audio or video multimedia I include Use headings, lists and make sure pages have a consistent structure Summarise graphics by using the ‘longdesc’ attribute Provide alternative content to scripts applets and plug-ins
I also need to make sure that I don’t use tables without having summarised them; I don’t forget a table may be stripped of their dividing lines and to not use frames. I also need to make sure I don’t forget to check my website with software validator tools and stick to the guidelines. Usability “The definition of usability is sometimes reduced to "easy to use," but this over-simplifies the problem and provides little guidance for the user interface designer. A more precise definition can be used to understand user requirements, formulate usability goals and decide on the best techniques for usability evaluations.” (Whitney Quesenbery) I need my website to be:
Effective Efficient Engaging Error Tolerant Easy to Learn
To gain all of these qualities I need to make sure that my website follows the rules of usability, some of these rules are: 6
Content of the website Links Navigation Search Graphics and Animation URLS
Kathryn Slaney - 1103768 The content of my website, taking in to consideration the rules of usability, needs to have customer focused language. As my audience is a wide and varied one, I am going to keep my language as basic as possible, as I’m going on the assumption that the youngest user will be in their teens, so I will make sure that my language is suitable for all reading levels. I will make sure that all the content is relevant and there is no redundant content, I will check that my website is up-to-date at that time and will only update it if it is necessary. I will make sure that on my website all the links are differentiated from normal text and that they are not generic terms such as “Click Here” or “More…” I will make sure that links are easy identifiable by underlining them and making them blue, as it specifies in the rules of usability. I will ensure that my links if they are linking to a PDF file or video to make sure the link explains that, and that the link works properly. With the navigation to my page, to make sure I adhere to the rules of usability, I have made it clear where the “Home” button is on the menu bar, and this will remain consistent throughout the website so the user will always know where it will be found. I have ensured that my website has a maximum of “4 clicks” so that the user does not get bored and cancel my website, and I have also made sure that the “Home” button is visible at all times, in case the user wants to return to the homepage, without having to press the “Back” button. With the graphics for my site, I have made sure that they are all relevant to my website and its content. If I am using any images where the meaning is not clear I will ensure it is labelled properly and also that my images and graphics have Alt tags, in order for those using screen readers to be able to know that it is an image and what image it is being used. When it came to choosing a suitable URL for my website, I had many names I liked but many of them would have been too complicated to remember. Therefore, I choose Recipeek, as it includes the purpose of my website which is Recipes, but also it is slightly different. I then had to verify my domain name on http://www.freeparking.co.uk/ to see what domains were available. I chose Recipeek.uk.com. If it was possible I would have liked to have had all domains available for Recipeek, as it would make my website a lot easier to find when it is typed in to a search engine. The rules of usability cover a lot of different areas for a website, but I feel that majority can’t really be implemented until my website is being created so I have covered those that I feel are important in the design stage. 7
Kathryn Slaney - 1103768 Colour Scheme When I first chose my colour scheme I had chosen all blue shades, once I had made my basic layout for my homepage (see appendix 9) I had realised that it had too much blue in it, and the blues weren’t complementing each other as much as I had originally thought. When looking in to the meaning of colours in more depth, I then discovered that blue was a cold colour, and in some countries meant mourning. After discovering this I felt I needed to change my colour scheme. So I chose:
Navy Blue – for a relaxing feel to my webpage, it can also mean 1st place and mourning in some countries – colour code #003366
Medium Purple – for an inspirational feeling, although in some country’s this means mourning – colour code #99669
Lime Green & Mint Green – are both healing nature like colours, in some countries green symbolises victory and honour – colour codes #CCFF33 and #00FF99
White – for a clear and relaxing feeling, in some countries this colour means good luck and truce
I feel that these colours work well together and by having white on my webpage would give the element of space, and not make the website look overcrowded and makes it look clean and tidy. Logo and Branding A logo is often used to help people identify a company or to show ownership. There are 3 main types of logos:
Iconic/Symbolic – they are compelling yet uncomplicated images that represent a particular company or product. Logotype/Wordmark – a logo that incorporates the company name or brand in uniquely made font e.g. the Disney logo and Dell logo. Combination Mark – This is a combination of an image and text such as Starbucks, their logo is a black, white and green image and company name written in white.
My logo is a Combination Mark, because it has my website name and my chosen image and will be consistent throughout my website. I have chosen this type of logo as I feel it is one of the better types, especially if a company isn’t well known, it will help people to remember the website when they click on to it in the future. 8
Kathryn Slaney - 1103768 Branding a website correctly is very important as there are a lot of websites on the internet now offering the same or similar content, in my case offering the same recipes or similar. To make sure I consider all the needs of my website I have looked on various self-help sites on the internet to see which of them have good suggestions on effective branding. I found that to have effective branding I would need:
To have a clear purpose of my website and I must communicate that to my visitors as well. My visitors must know why they are visiting their website and why it is worth their time. I am aiming to make people associate recipes with my site so in the future they come straight to my site.
I need to remain consistent with my writing style.
Sticking with my tagline, once I have chosen my tagline, I need to make sure it is catchy and descriptive and I’m not to change it every month as people won’t remember it.
I need to use a favicon because they are important and appear on the bookmark section, which enables them to recognise my website more each among the others.
The overall look and feel of my design needs to match the content of my website, which relates back to my target audience and my colour scheme, as my target audience is broad I have the ability to mix colours, as long as they complement each other.
Using Social Media sites are an effective way of branding, so I will create an account on each of the services specifically for my website.
Advertising is also very important, although I don’t have money to advertise my website, there are other ways I can advertise it by just making sure that people know about my website, through the social networking sites and even by word of mouth.
9
Kathryn Slaney - 1103768
Conclusions Having looked at and compared other recipe websites, and seeing that they focus on particular groups, such as parents and students. I feel that after seeing these and designing my website, I feel that my website is overall a good idea, as it caters for everyone that could need to use it. I have ensured that I have adhered to the rules of accessibility and usability, therefore making my website practical for everyone. I feel I have chosen a colour scheme that works well, looks professional and compliments the contents that will be on my website. I feel that the font I have chosen is also suitable as it is easy to read for all levels of reading. Overall looking at other competition websites, and then designing my own, has helped me to constructively evaluate other sites, and to use the good characteristics I found and to avoid the small common faults in their sites where possible in my website design. Whilst doing the research for my website, I found that there are a lot of different ways to make your website appealing without having ’flashy’ images or graphics, and by not overloading a webpage with too much information, makes it a lot easier for the user and can encourage return visits to a website.
10 ď‚—
Kathryn Slaney - 1103768
References/Bibliography http://www.lboro.ac.uk/library/skills/Advice/Report%20writing.pdf - 14/11/2011
http://www.colorcombos.com/color-scheme-24.html
- 18/11/2011
http://www.factmonster.com/ipka/A0769383.html
- 18/11/2011
http://www.ruthstalkerfirth.com/pdf/accessibility.pdf
- 27/11/2011
http://www.wqusability.com/articles/more-than-ease-of-use.html - 27/11/2011
http://www.logodesignsource.com/types.html
- 29/11/2011
http://www.dailyblogtips.com/10-ways-to-brand-your-blog-or-websiteefficiently/ - 29/11/2011
http://slaneyk.questionform.com/surveys
- 04/12/2011
11 ď‚—
Kathryn Slaney - 1103768 Best places in the area
Appendices
Dog Grooming
Appendix 1
5/10/15 minute recipes
Contact Details etc
Quick Easy Meals
Discount vouchers Range of Prices
Discount Site
Online forum to share ideas
Sites with current discounts/deal s
Student Budget Meals
Website Ideas
Quick Tips
Forum to share advice
Places to go in and around area
DIY for Girls
Barmouth Best Prices
B&B/hotels in the area Tourists views
Easy to follow instructions
Prices
Forums to talk about syns
Location and contact detail
Staff
Oasis Nursery
Slimming World Syns
12 ď‚— Activities available
Opening times
Discover new syns
Recipe ideas
Tourists pictures
Kathryn Slaney - 1103768
Appendix 2
13 ď‚—
Kathryn Slaney - 1103768
Appendix 3
Website Choices DIY for Girls Recipes Nursery Shopping 9%
53%
22%
16%
14 ď‚—
Kathryn Slaney - 1103768
Appendix 4
Comparison of 3 Similar Sites
www.goodtoknow.co.uk Orange/White Colours used
www.studentrecipes.com Quick search bar at the top, easy to find
Pink Video clip bar Same advertisements as other sites (Advert generator used – based on peoples internet browsing) A lot of pictures used Bright Orange and Pink Clash Menu is easy to navigate, when you go to a different choice on the menu the page colour changes Background is distracting, it’s one big advert
www.e-mealz.com American based website Simple layout
Log in facility at the top also very easy to find Interesting menu bar
Simple, yet boring colour scheme, oatmeal/ white green/blue headings
Simple blue background
Easy to navigate
Recipe bar interesting and fun
Light and not over the top
One advert - small size and in the corner so wasn’t an eye sore
There is the option to become a member for $1.25 a week
Top recipe on the homepage
Pages didn’t load when clicked on in the menu bar
An option to add recipes
Recipe Finder list is too long – resulting in having to scroll quite far down
Option to follow the site on the social networking sites Twitter and Facebook
Didn’t notice the log in feature on the page as there is too much going on
Simple Layout
Aimed at everyone
Tidy looking website
Plenty of ‘white space’
Links didn’t work when they were clicked Site gave off an ecofriendly feel to it Seemed to be aimed at mature people rather than for everyone
Aimed at students, could be used by younger people Rating : 7/10
Rating: 9/10
Rating: 6/10
15
Kathryn Slaney - 1103768
Appendix 5
Mains
Pudding
Starters
Snacks Hectic Social Life - Simple Meals
Item of the week (and people suggest recipes to make with it)
New recipes
Forum to Share Recipes and Tips
Budget but Nice
Easy Meals For Everyone
Simple Meals Best Student Meals
Puddings
Recipe of the week
Snacks
Quick Family Meals
Budget meals for 4
Things for the kids
Yummy Puddings
Night in for 2 made easy
16 ď‚—
Kathryn Slaney - 1103768
Appendix 6
Recipeek Homepage Welcome page
Home
Student Nosh
Family Friendly
Quick & Easy for busy people
Fab Ideas
Forum for Adivce and Tips
Contact Us Information
Budget Banquets
Budget meal for 4
Quick Starters and Mains
New Ways to cook
Member to Member Advice/Tips
Email Address/Form
Speedy Snacks
Night in for 2 made easy
Quick puddings and snacks
Top 10 Tips
Post Questions
Where the information has come from
Yummy Puddings
Things for kids
Site Map
Recipe of the week
17 ď‚—
Kathryn Slaney - 1103768
Appendix 7
Advantages and Disadvantages of Website Accessibility
Advantages
Disadvantages
The rules on how to implement website accessibility are easy to understand
Following accessibility rules may restrict your ability to create a super ‘flashy’ website
Website accessibility can be tested and measured by hand and free software validators
Providing an accessible alternative to your usual website may be time consuming
An accessible website helps search engines read and rank your site Accessibility potentially increased the amount of people who will be able to ‘read’ your website
18
Kathryn Slaney - 1103768
Appendix 8 NOTE: Basic First Version – wavy lines I thought gave it a relaxed and modern view. I changed it in the Photo Shop Version as it was complicated to line up with the “White” space.
19
Kathryn Slaney - 1103768
Appendix 9
NOTE: My first version on Photoshop. Too much blue made it very cold looking, and too many different shades of blue. Heading didn’t stand out. There was plenty of “White” space, layout kept for second version.
20
Kathryn Slaney - 1103768
Appendix 10 -Layout is simple. -Font for heading is Beantown Size 36 Purple #99699 (consistent throughout) -Menu bar font is David size 24 -Greens #CCFF33 #00FF99 -Blue #003366 -Links to social networking sites -Slide show on homepage will have clear Alt Tags for screen readers -Other text is Ariel -Menu Bar and Social Media box consistent throughout
21 ď‚—
Kathryn Slaney - 1103768
Appendix 11 -Three different boxes each will have a main topic in, giving users the option to click on the heading to go to that page of recipes - Boxes are placed in an order to maximise “white” space and to make the page look tidy and easier to navigate -All pictures will be relevant to the latest recipe in that category
22
Kathryn Slaney - 1103768
Appendix 12 -More variety on this page as it targets children, parents, couples - No more than 4clicks away from the homepage, although the home button on the menu bar is constantly visable.
23 ď‚—
Kathryn Slaney - 1103768
Appendix 13 -Similar layout, trying to keep the webpages consistent with each other, so the user doesn’t get confused, and understands the layout quicker, therefore being able to navigate the site better
24 ď‚—
Kathryn Slaney - 1103768
Appendix 14 -Webpage for a larger audience, as it focus’ on all my target audience. - tried to keep the page simple and easy to navigate so users can find what they want quicker
25 ď‚—
Kathryn Slaney - 1103768
Appendix 15 -This page gives the user the option to sign up or login, to share recipes with other users and talk generally on Forums about different recipes etc. -A lot of white space so the user doesn’t get distracted. -Text will be clearly placed so users can read it easily. Links will be a different colour.
26 ď‚—
Kathryn Slaney - 1103768
Appendix 16 -Page with all the relevant contact details on, basic layout, one text box, so user can find information quickly. -mentions the social networking sites, the box that is visible on every webpage.
27 ď‚—