123RF, 2017. Vector – Set of vintage retro premium quality badges and labels. [Online]
Available at: https://www.google.co.uk/url?sa=i&rct=j&q=&esrc=s&source=images&cd=&ved=0ahUKEwjTnb2KmfzTAhWSLlAKHfZkCL0QjhwIBQ&url=http%3A%2F%2Fwww.123rf.com%2Fphoto_11267578_set-of-vintage-retro-premium-quality-badges-and-labels.html&psig=AFQjCNH9tFEW5Qb-JnxKK3V63aCvyz
Active Body, 2017. Facebook Black Icons. [Online]
Available at: https://www.google.co.uk/url?sa=i&rct=j&q=&esrc=s&source=images&cd=&ved=0ahUKEwjGmIDxsfzTAhWKUlAKHUPHDJMQjhwIBQ&url=http%3A%2F%2Factive-body.info%2Fpages%2Ff%2Ffacebook-icons-black%2F&psig=AFQjCNE9tKvHo5h05_phFeu4dBClJXSdig&ust=1495298162303601
Bootstrap, 2017. Getting Started. [Online]
Available at: http://getbootstrap.com/getting-started/#template
Clipart Fest, 2017. Twitter Circle Clipart. [Online]
Available at: https://clipartfest.com/categories/view/dd7840c3c65cd2abff44825c8c9c730b97256a7b/twitter-circle-clipart.html
Clipartion, 2017. Cupcake Outline #8264. [Online]
Available at: https://clipartion.com/free-clipart-cupcake-outline/
color-hex, 2017. Pastel Color Palette. [Online]
Available at: http://www.color-hex.com/color-palette/764
color-hex, n.d. Happy Pastel Color Palette. [Online]
Available at: http://www.color-hex.com/color-palette/13735
Dafont, 2017. Dafont. [Online]
Available at: http://www.dafont.com/lie-to-me.font?text=Lauren%27s+Sweet+Treats
Dafont, 2017. Dafont. [Online]
Available at: http://www.dafont.com/always-in-my-heart.font?text=Lauren%27s+Sweet+Treats
Dafont, 2017. Dafont. [Online]
Available at: http://www.dafont.com/couture.font?text=ABOUT+PRODUCTS&back=theme
DaFont, 2017. DaFont. [Online]
Available at: http://www.dafont.com/coco-gothic.font?text=ABOUT+PRODUCTS+CONTACT&back=theme
Flour Pot Bakery, 2017. Flour Pot Bakery. [Online]
Available at: http://flour-pot.co.uk/
Google, 2017. Embed a map or share a location. [Online]
Available at: https://support.google.com/maps/answer/144361?co=GENIE.Platform%3DDesktop&hl=en
Shutterstock, 2017. Shutterstock. [Online]
Available at: https://www.shutterstock.com/image-vector/vector-cooking-mini-icons-set-187235936?src=KTK0vL_oPiY88Hd_IGrBkA-1-18
Truffles Bakery, 2017. Truffles Bakery. [Online]
Available at: http://trufflesbakery.co.uk/
W3school, 2017. Bootstrap Tutorial. [Online]
Available at: https://www.w3schools.com/bootstrap/default.asp
You Concept, 2017. You Concept. [Online]
Available at: http://www.youconceptltd.com/
Overall my experience on working with a client to create a website has been successful, I think that I have created an effective website that displays all of Lauren’s products clearly with a easy navigation around her website. Most importantly my client is happy with her website and the outcome of how it looks. I had good communication with my client and we both understood what each other wanted from every aspect we presented to each other. My website is fully responsive with a working collapsed navigation bar, meaning that Lauren’s users can access her website from any device. I have stuck to Lauren’s theme of pretty with the chosen colors of pink and lilac, also I have used fonts and a logo that represents a formal look.
As it was my first time using Bootstrap I have also learnt another way in which making a website, I found using Bootstrap easy to use as all coding is just on one page, not only this when building the website I could make it responsive easily.
Below is my validated website, unfortunately I was unable to understand the error of iframe, which contained a google map of where Lauren is based. I got the coding from google which is reference in a post. Otherwise my website has no errors and all the task run smoothly.
(click on image to enlarge)
Now that I have finished my website it is important that my client is happy with it below is the email I sent and Lauren’s reply.
The only change she wanted was for the website background to be one colour, I have changed this and with the section dividers the website flows a lot better, otherwise she is very pleased with the final website.
Below are my results for user testing
This is my first time using Bootstrap and so I wanted to be able to build the website all myself so that I could understand what was in the html/css. Instead of picking a ready made layout template with all sections done I picked a starter template with a just a fixed navigation bar already in place. I decided to pick a template with a navigation bar on the template as this is the most important part to the website and I wanted it to look professional and responsive.
When making the logo I wanted to make sure users instantly knew what the logo was for and that it looked professional. I decided to make a stamp with an outline of a cupcake in the middle as of course it represents Lauren’s business successfully.
Just like the font that looked handwritten, that gave off a hand made effect, I wanted the stamp to have Lauren giving her stamp of approval on her products. To make the logo I used Photoshop, I got an image of an outline cupcake from google and made it all white. I then got an outline of a stamp from google as well, this I made all black. I decided to use black and white, as firstly, the two colours contrast and so make the logo bold but also as all the colours on the website would be pastel colours therefore the logo would stand out which is what I want. As well using colours such as black and white have a simplistic, formal look, which is what was important to Lauren.
When making the carousel, slideshow header, I wanted to make sure the images on there showed off Lauren’s sweet treats appropriately and made users want to explore the website and look at more of her products. I got all of the coding for html/css off W3school and changed sections into my own code so that it suited my website. The carousel automatically goes to the next picture, or users can click on the arrows to go to the next image. As Lauren’s logo is quite small in the navigation bar I wanted to make sure users knew what the website was straight away. Therefore I added the handwritten text to a pretty pink background with an image of one of Lauren’s desserts by it. I made this the first image of the carousel , the bright pink makes the image eye catching and with a clear image of a dessert beside engages users to want to see similar products.
the second image is of another product of Lauren’s, as the slideshow header purpose was to show off Lauren’s products I thought it was appropriate to add this so that the user immediately sees Lauren’s products without having to scroll down the page, which for some users if they have to find what the product looks like they may not bother but if it is in front of them it can attract the users to find out more about Lauren’s business. The last image i used on the carousel was Lauren’s logo as mentioned before as the logo was in the navigation bar it was quite small and users couldn’t see it in detail. Therefore by having the logo as the last image users can in detail see the logo and represent that with Lauren’s business.
To make the pages flow into one another I decided to make a section divider, the section divider was made by making 3 columns in html and adding each image to their column,
In Photoshop I made a line, which would go in the first and third column then to add emphasis on Lauren’s website being about baking I decided to make a gif of a bowl mixing, By adding a gif makes the website more interactive for the user. On Photoshop I used the timeline animation and made two layers, on the first layer the bowl spoon was to the left and on the second layer the spoon was to the right and when saving I made sure this movement looped.
The image gallery was the main part of Lauren’s website, Lauren sent me images she wanted on her website and so I had to make sure all images were clear and attractive. I decided to use a row and columns to make the image gallery. I was going to have the description underneath each image but this took away the user looking at the image and to keep the attention just on the products I decided to have a mouse over event. Once the user hovers their mouse over an image a grey screen will transition from the bottom with white text saying that the product was. Having an image gallery likes this successfully shows off Lauren’s products and users are able to gather information needed.
When deciding what to put in Lauren’s about me section I thought it would be a good idea to make a flat design character of her. I decided to use illustrator and made her look like a baker holding a cake. I thought this would add some character to her website and users would know what she looked like as well. Adding the cartoon as well made her about me section more interesting as before the cartoon it just featured text.
I have created a rough prototype of how Lauren’s website would look, in my email I explain further what each page contains so that she can understand and imagine what the website will look like.
From Lauren’s feedback I am pleased that she likes the layout of the website, however Lauren would prefer a slideshow header so that more of her products can be seen by users, this is a more effective way to attract users when they first enter the page. Her competitors also have have slideshow headers and they fit into their website well.
As mentioned in Lauren’s email she would like a formal and pretty look and so I have user Dafont.com to find suitable fonts, below are formal fonts that I liked which would suit her website.
Section Title Fonts
Fonts below are typically what I want to use for section titles such as Products, About and Contact.
The first font I looked at was called Coco Gothic, I liked this font as it has thinner letters and it is slightly more curved. I think curved text would suit Lauren’s business more as typically curved text has a more delicate look and also would suit Lauren’s idea of having a website that looked pretty.
The second font I looked at was called Couture, this font was the opposite to the one above as the text is thicker and the letters are sharper. Having a bolder text would be ideal on as a title as users would be able to identify what section they are on and the title wouldn’t blend in to paragraph text. However sometimes having a font that is too bold can take away the attraction from other aspects on a section such as images or videos.
Overall my favourite font out the two was Coco Gothic as I liked how the font wasn’t too bold which can sometimes take the attention away on the page also as mentioned the curved text would suit Lauren’s website as the letters aren’t so harsh.
Fonts below are what I would like to be featured as a logo in Lauren’s header image.
Lie To Me
The first font I looked at was called Lie To Me, I chose to look at fonts which had a handwritten effect as her bakery is all handmade it made the title more personal as if she had signed the page. This text is easy to read but also it’s own quick such as the elongated parts to letters such as the ‘S’ and ‘L’.
Always In My Hearts
The second font I looked at was called Always In My Heart. This text has had a hand written effect but was a bit simpler than the one above.
Overall I prefer the first font as it has a quirk to it and is slightly easier to read then the second font, although are both similar I think the first font would perfectly fit in Lauren’s header image.
When looking into fonts I made sure to focus on bright colours which would be attractive to Lauren’s users. I chose to look at pastel colours as they are easy on the eye and stereo typically have a pretty look which is what my client highlighted was an important aspect for her.
Above are two pastel palettes with colours that I think would suit Lauren’s website. The two palettes are contrasting as the first one has darker colours and the bottom brighter. I chose to look at darker and brighter as sometimes bright colours can be too harsh on the users eyes and I want the website to flow well and not have sharp blocks of colours on each section. The darker colours would bring down the harshness from the bright colours but also can take away the idea of Lauren’s website looking pretty. The best colours on both palettes are the pink, blue and lilac as I think these will all flow well on the website. Also to make sure the colours aren’t too bright for users I will edit the opacity on the website.
Above are links to two websites I have found which would be a competitor for Lauren.
The first website I looked at was Flour Pot Bakery, based in Brighton that deliver to wholesales and also have their own bakeries/cafes. Their website was easy to navigate around and when scrolling down flowed well. All the information about this business was easily accessible and images of their products where of high quality which is important for users to see what their bakery goods look like. Colours used were dark but worked well as they were contrasted with lighter colours. The type of navigation used is something I would typically like to use when creating Lauren’s website as the nav bar is bold and clear and users can get to all pages as soon as they enter the page, however for easier navigation I am planning on having a fixed nav bar so that users are able to get to other pages without having to scroll all the way back to the top or by having to click an arrow which would make the page navigate back to the top. The layout of this site was not cluttered with too much text, images or videos and showed enough information for users to understand what the business does and who they are. My favourite thing about this site that they had a clear theme and that all the colours blended well throughout the whole website and so made the websites content flow. One thing I wasn’t so keen about is the navigation bar wasn’t fixed so navigating around the site was harder than it should have.
The second site I looked at was Truffles Bakery who are based in Sussex, they have quite a few bakerys and cater for many businesses. Truffles has a similar layout to Flour Pot as they also have a header which is a slideshow that presents images of their products from their bakery. I think this is an attractive header that I should look to feature on Lauren’s website, as by having a bold image as a header would intrigue customers as they will see her lovely products that will interest them in looking further into the website and Lauren’s business. Truffle’s nav bar is fixed and so navigating around the website was easy, as Truffle’s business is bigger they feature more pictures and information than Flour Pot. Truffle’s have less text on their home page than Flour Pot but feature more images which I think is more aesthetically pleasing for users as they can see straight away the businesses products and are more likely to be attracted to images than text. My favourite thing about Truffles bakery is their clear bold pictures as it is something users are attracted to straight away and know if their service is suitable for their needs. This is something I would like to have featured on Lauren’s website as I think it is important for her users to see her products clearly so that users would look further into her website as they would be interested in seeing more. One thing I disliked about Truffles Bakery is that the home page is a bit too cluttered with images. Although the images show off their products and services I prefer more white space as if users are greeted with too much information they may not be able to clearly see other information which could be hidden.
From looking at Lauren’s competitors it has enabled me to gather ideas of how her website should ideally look like and how in some aspects it shouldn’t. By having this information I can now confidently started designing Lauren’s website.
Before starting the draft prototype of Lauren’s website I thought it would be important to understand who her audience where so that the design suited the users. When researching who would ideally be Lauren’s main target audience I discovered that she would have quite broad users viewing her site and using her service. Typically users of an older age, 25-50, would be viewing her site as they would be using a catering service for special occasions or their business. An audience of a younger age such as 10-18 would be unlikely to visit a website to make such a purchase as they wouldn’t necessarily need to use this type of service . Emphasising on the idea of a broad audience, gender wouldn’t be limited to just female or male as Lauren’s products are something that can be aimed at both.
In terms of the design suiting Lauren’s audience I would need to take into consideration that her website will be used by businesses needing catering and so I would be focusing on a formal, as mentioned in her email, so that her website is inviting for businesses wanting to use Lauren’s service. Lastly as Lauren’s audience is wide ranging within ages and gender I would make sure that colours and fonts suit all users.
Before researching into who my client’s competitors or users were I contacted Lauren, my client, and asked what she would like from this website and what her vision would be on how the website should look. From emails I was able to gather specific colours, fonts and layouts wanted.
From the email I gathered that Lauren would like a formal approach meaning I would need to look at appropriate fonts and layouts so that her business is presented in a professional manner to her users. Another important factor from her email is that she would like it to look pretty meaning the colours to use would typically be pink, lilac or pastel colours and I shouldn’t to use dull/dark colours such as brown or green.