Ingredient Machine

Introduction

In my proposal for this project, I aimed to design and develop an interactive prototype of a website that allows users to search for recipes by inputting ingredients into a "virtual kitchen". This would provide a solution to the problem of finding recipes that you have ingredients for without having to go shopping for any missing ingredients. The website's target audience is primarily students, however it also is aimed at anyone who cooks.
To achieve the aim I set out in the proposal, I would need to do the following objectives;

Design and complete wireframes, starting with mobile
Design a logo,
Select a colour palette and typography,
Design icons for ingredients.
Write HTML and CSS code - including media queries to ensure the website is responsive

Problem and Solution

Design Research

Responsive Design & Mobile First Approach

This project incorporates responsive design, from drawing wireframes for mobiles first to using media queries in my code. Responsive design is important to website designers because the use of smartphones to browse the web has ‘surpassed desktop and laptop computers’ (Titcomb, 2016).
Wireframing is changing and many web designers are using digital tools to create their wireframes (Creative Bloq Staff, 2015). With this methodology, wireframes ‘become a kind of lo-fi prototype’, accommodating interactivity and testing usability without ‘designing the details’ (Creative Bloq Staff, 2015).
To help my project follow responsive design, I have researched into common "break points" for writing media queries. An article on WebsiteDimensions.com (N/A) provided useful information about why to use media queries and what sizes to use when writing media queries. I also found a very helpful image on slide share (Breakpoints & Media Queries).

Screen Sizes

I then had a look at some more detailed screen sizes by Coyier (2017), who listed all screen sizes for mobile phone, tablet and desktop. This is particularly useful for writing media queries to ensure you cover the largest and smallest screen size.

Adobe Software

As I am new to Adobe Software, I had to do a lot of research to complete the tasks I needed to do for this project. Firstly, I watched a YouTube tutorial by White (2013) on Adobe Illustrator and the basic tools. When it came to animating the logo, I read articles by Kozy (2015) and Adobe (2016), and also watched a YouTube video by Hayes (2016).

Adobe Muse or Adobe Dreamweaver - Search Engines

When I started this project, I aimed to code the whole website on dreamweaver. As I started researching how to insert a search engine, I realised that it was going to be very difficult as a beginner coder. I started reading through a supposedly easy search engine (Iliev 2018). You can also see in my blog posts at Week 10 that I was struggling to code this particularly bit of the website.

So I started learning Adobe Muse on a tutorial on YouTube by Farnham (2014) as I thought it would be easier to insert a search engine this way because of the widgets. I searched for widgets on the Widget Directory (Adobe, 2018), and I found nothing that I could use for this project. I was then stuck at a dead-end for a while, until I researched a drop-down menu block of code for my other module (Tondo, N/A). I then decided that this would be easier to use for the search bar and show how it would look like if you had searched for ingredients and added them into the "virtual kitchen". I then went back to Dreamweaver, and coded the website as originally planned.

Designer Research

I follow a few designers on Instagram, but the one that sticks out the most is Lily Zhou's profile (Zhou, 2018).

Lola Zhou's Instagram

I really like the line-art style of Zhou's work. It is simple, but really unique. I love that her designs are a bit wacky, and I really enjoy looking at her work.

Fish in a Balloon Illustration

This is my favourite piece that Lily Zhou has published on her Instagram (Zhou, 2017). I like that with very little detail the balloon still looks 3D. I used this style in my own work, particularly for the ingredient icons.

Development of Ideas

Wireframes

I started drawing wireframes in my sketchbook and on NoteBook, but realised that the maps were too large and I wasn't able to be very detailed. This lead me to start drawing wireframes on Adobe XD. For my blog posts on wireframes, see all of my posts on the Design Practice section.

During one of the first lectures on wireframing, I drew up these designs as I didn't have a sketchbook at this point.

Sketch 1

This was the first set of wireframes I drew for mobile sized screens. I decided to redo these because there were things that I was missing, such as a "start again" button or "go back button".

Sketch 1

This was the second set of wireframes for mobile, and I was happy with the ones that I had drawn because I had included everything that was missing from the previous ones.

Sketch 2

Drawing the tablet wireframes was difficult, especially because I wanted to draw them in a sitemap layout. It was at this point that I decided to move onto drawing wireframes on Adobe XD.

Sketch 3

You can view all my wireframes in Week 10 I made a few alterations to the design because of the regulations on how far apart buttons must be on mobile. I therefore moved the home and browse all buttons to opposite sides. I also changed the top navigation bar once I had the logo, because it didn't look right with the design I already had.

Download the Adobe XD file for the wireframes here

Logo, Typography and Colour

Before drawing anything, I needed to decide on a name for the website. I brainstormed some words that are related to what the website is about, and then combined some to create some names. Then, I narrowed it down to 4 different ones, and posted on our MA Facebook group to get feedback and opinions. After I collected the results, the name with the most votes was Ingredient Machine.

First Sketches Facebook Post About Names

With a name for the website, I started drawing up some ideas of what the logo could look like. They were mainly robot designs, but I also included a "machine" design to add something different. After asking friends and family for their favourite, it turned out that the machine was the most popular anyway.

Sketches Sketches

I then redrew the design but larger so that I could scan it and import it into Adobe Illustrator.

Ingredient Machine larger sketch

I then moved on to Adobe Illustrator to create a vector of the logo that I drew. I first coloured the logo with greys and blue glass and decided that it looked very boring.

First Logo

I decided on a teal colour and used Adobe Photoshop to create a very simple animation of the cogs spinning to show the machine "working".

Second Logo
Photoshop 1 Photoshop 2

I looked at Typography for the Logo using Google Fonts, printing off each one with the right part of the name and put them next to each other to see which combinations work the best. I also wrote some comments on why some were not suitable or why I did not like them.

Typography for Logo Combinations of Typography

For the colour palette, I used coolors.co. I put together 4 different palettes using the teal colour from the logo, and posted them on the MA Facebook group for feedback. After asking for their favourite, it was decided that the last set of colours would be used.

Colour Notes Colour Notes
Facebook Post on Colour Palette

Once we had our first Critical Review, I reflected on some of the feedback from my peers who said that the logo should be a little more neat and to improve the animation. I also was told that the design would be better if the ingredients were much larger so that there is a focus on them, so I removed the can and enlarged the tomatoes and chicken. I then went back to Adobe Illustrator and replicated my design using the tools rather than hand drawing it. To animate the design, I saved the machine in multiple segments: the machine that I want to keep still, and each of the gears. I then used Adobe Animate CC to make the gears rotate, setting the degree to 359 so that the gears continuously spin. I made two different logos: the gears on their own and the full machine. This was the final result:

Ingredient Machine Logo Gears Logo

To see my blog posts on the Logo, see Week 8 and Week 9.

Ingredient Icons

For the Ingredient Icons, I started by writing a list of all the ingredients there would be and what groups they would go in.

ingredient list

Then, I started drawing some quick sketches of some of the ingredients, generating ideas and deciding on whether to do a group icon for each group or individual icons.

Sketch 1 Sketch 2 Sketch 3 Sketch 4
Sketch 5 Sketch 6 Sketch 7 Sketch 8

I decided that certain groups would have a group icon, and others would have an individual icon. I then found some recipes that share the same ingredients, and only drew those ingredients up on Adobe Illustrator. This was because there was going to be a lot of ingredient icons to draw up, and with a limited amount of time, I wanted to stick to just a few to show what the website would look like. Below are some of the design processes for some of the ingredients.

Baking 1 Baking 2 Baking 3 Baking Final Icon
For the bags of flour/sugar etc. I hand drew the outline and used simple shapes for the labels. For the tin, I created a square and used the "unite" and "minus front" tool with a circle to add a curve at the bottom and remove one from the top. I added another oval at the top for the lid, adding multiple line circles for grooves. The label was a copy of the main tin section but filled in white and smaller.
Cheese 1 Cheese 2 Cheese 3 Cheese Final Icon
The cheese icon was fairly difficult as I spent a lot of time trying to find the right yellow for each section. I also had to add a gradient and a line as the cheese didn't look right as a 2D shape.
Milk 1 Milk 2 Milk 3 Milk Final Icon
The milk icon was fairly easy to create. It was just a case of combining shapes to create the bottle, copying it to create the milk on the inside of the bottom and adding a lid. The colours were also easy as the bottle just needed a blue transparent colour.
Oil 1 Oil 2 Oil 3 Oil Final Icon
The oil icon was created the same way as the milk icon, with the only difference being the colour, the neck of the bottle and the cork in the bottle. By layering each part in order and making the bottle translucent, the bottle looked more realistic.
Ham 1 Ham 2 Ham 3 Ham Final Icon
I struggled to find the right colour for the ham, which is why the colours change throughout the process of creating this icon. In the end, I felt it was right to not have an outline for the bone and have a cream colour, matching the middle of the ham. I also didn't want the colours to be too bright, so I chose a softer pink and a golden brown.
Egg Final Icon Vegetable Final Icon Butter Final Icon Pasta Final Icon
These are the other final icons for the website.

For the other icons (Home, Browse All, Help, and Social Media), I used iconmonstr

Developing the Website

Although I spent the summer learning the basics of HTML and CSS, I also still needed to do a lot of research on coding. W3Shools was particularly helpful for a few things on the website. This included the columns for the recipe list pages, which are responsive and break to only a single column closer to mobile screens. I also used w3schools with the help page and scrolling through 4 images and responsive images (w3schools 2017a, 2017b, 2017c, 2017d).

When I started to code the website, I started with the navigation bar; changing the logo with "Content: url()" when it reached tablet size. I also used "display:none" to change the menu from an icon and text to just an icon. I used the same process to remove the help and social media icons and displayed them at the bottom of the page instead.

When it came to the virtual kitchen with all the ingredients logged, I was stuck on which design to go for. I started with a gradient background, but I didn't particularly like it.

Background 1 Background 2

Once I realised that I didn't like this design, I changed it to a white background and a border.

Background 3 Background 4

I preferred this kind of style but I was not happy with the very plain border. Instead, I filled in the area behind the icons and this was the final design I went for. It didn't look too busy like the gradient or too empty with just a border.

Final Decision on Ingredient Icons

I didn't fully track my progress of the project, which is something that I wish I had done to show how the website came together. This is something I will consider for my future projects, perhaps using Git to track changes in my code. Once I had finished all the graphics and icons, it was just a case of coding it all to reflect the wireframes I drew.

Outcomes

The final project is an interactive prototype, with a simple drop down search bar to add ingredients. There is a single custom search to display how the website would function if it was a fully working website, with functional links to real recipes. The only section of the website that does not work is the social media links, but this was not a priority in this project.

Homepage Search Bar Ingredients Recipes

The website is also responsive, with most changes occuring when you reach tablet size. The main change you can see is the navigation bar; the home and browse text disappears leaving the icons, and the social media buttons and help button moves to the bottom of the page in the footer.
On the homepage, the ingredients displayed change size and the number of columns decreases as the screen size decreases. You can see an example of this below.
On the pages displaying recipes, the two columns displaying the picture and the description merge into one.

Ingredients Ingredients Responsive

To view the website, Click Here

References

Adobe (2016) ‘Create animated GIFs’ Photoshop, 3 February. [Online] Available at: https://helpx.adobe.com/photoshop/how-to/make-animated-gif.html?mv=product&mv2=ps&x-product=Photoshop%2F19.0.1&x-product-location=in-app-search%2Fproduction&context_guid=c66faaef-b80a-464b-9c56-e1b5b6eaa0ba# (Accessed 01/01/2018)

Adobe (2018) Widget Directory [Online] Available at: https://musewidgets.com/collections/widgets/free (Accessed 02/01/2018)

Allrecipes.com (2018) Homepage [Online] Available at: http://allrecipes.co.uk/ (Accessed 02/01/2018)

Breakpoints & Media Queries [Online Image] Available at: http://image.slidesharecdn.com/responsivewebdesignworkshopantoniodepasquale-140416133209-phpapp02/95/responsive-webdesign-38-638.jpg?cb=1397675450 (Accessed 01/01/2018)

Connolly, J. D. (2013) ‘Colors that Influence Food Sales’, Jenn David Design, September. [Online] Available at: http://jenndavid.com/colors-that-influence-food-sales/ (Accessed 01/12/2017)

Cookipedia (2017) Homepage. [Online] Available at: https://www.cookipedia.co.uk/recipes_wiki/Welcome_to_Cookipedia (Accessed 02/01/2018)

Coolors. (2016) Homepage. [Online] Available At: https://coolors.co/ (Accessed 19/10/2017)

Coyier, C. (2017) ‘Media Queries for Standard Devices’, CSS-TRICKS, October 9. [Online] Available at: https://css-tricks.com/snippets/css/media-queries-for-standard-devices/ (Accessed 01/01/2018)

Creative Bloq Staff. (2015) ‘Wireframes aren’t dead: they’re just changing’, Creative Bloq, 21 May. [Online] Available At: http://www.creativebloq.com/web-design/wireframes-arent-dead-theyre-just-changing-51514940 (Accessed 19/10/2017)

Farnham, B. (2014) ‘Adobe Muse CC Tutorial: The Basics’, 4 August. [YouTube Video] Available at: https://www.youtube.com/watch?v=CKL_nGZ-DPI (Accessed 02/01/2018)

Google Fonts. (2017) Directory. [Online] Available At: https://fonts.google.com/ (Accessed 19/10/2017)

Hayes, M. (2016) ‘Animate CC: Rotating an Element’, 16 October [YouTube Video] Available at: https://www.youtube.com/watch?v=ZrUiZHZdEoY (Accessed 01/01/2018)

Iliev, K. (2018) Free! – How to build a PHP Search Engine. [Online] Available at: https://www.dmxzone.com/go/14246/free-how-to-build-a-php-search-engine/ (Accessed 01/01/2018)

Kozy, R. (2015) ‘Tutorial: How to Make a GIF from an Illustration’, Go Media, 6 August. [Online] Available at: https://gomedia.com/zine/tutorials/tutorial-how-to-make-a-gif-from-an-illustration/ (Accessed 01/01/2018)

Recipe Matcher (2012) Homepage. [Online] Available at: http://www.recipematcher.com/ (Accessed 02/01/2018)

SuperCook (2017) SuperCook Homepage. [Online] Available At: http://www.supercook.com/#/recipes (Accessed 15/10/2017)

Titcomb, J. (2016) ‘Mobile web usage overtakes desktop for first time’, The Telegraph, 1 November. [Online] Available At: http://www.telegraph.co.uk/technology/2016/11/01/mobile-web-usage-overtakes-desktop-for-first-time/ (Accessed 19/10/2017)

Tondo, A. (N/A) Pure CSS Click DropDown Menu. [Online] Available at: https://codepen.io/Tont/pen/hdsev (Accessed 02/01/2018)

WebsiteDimensions.com (N/A) ‘Website Dimensions, Best Practices’ [Online] Available at: http://www.websitedimensions.com/ (Accessed 01/01/2018)

White, T. (2013) ‘How to Get Started with Adobe Illustrator CS6 – 10 Things Beginners Want To Know’, 3 February [YouTube Video] Available at: https://www.youtube.com/watch?v=Kgmu8RwLi28&t=1980s (Accessed 01/01/2018)

W3Schools (2017a) Responsive Two Column Layout. [Online] Available at: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_two_columns_responsive (Accessed 01/01/2018)

W3Schools (2017b) Manual Slideshow. [Online] Available at: https://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_slideshow_self (Accessed 01/01/2018)

W3Schools (2017c) Responsive Web Design – Images. [Online] Available at: https://www.w3schools.com/css/css_rwd_images.asp (Accessed 01/01/2018)

W3Schools (2017d) Image Gallery. [Online] Available at: https://www.w3schools.com/css/css_image_gallery.asp (Accessed 01/01/2018)

Zhou, L. (2018) @9118___ [Instagram Account] Available at: https://www.instagram.com/9118___/ (Accessed 02/01/2018)

Zhou, L. (2017) ‘Balloon Illustration’, Instagram, 17 November. [Online] Available at: https://www.instagram.com/p/Bbm8DTHFMSl/?taken-by=9118___ (Accessed 02/01/2018)