Workshop 1

Thumbnail Development

DSC00006

In this workshop we were given the task of creating many different thumbnails for a campaign which would encourage people to vote. The slogan of this campaign was “I give an X” so the logo had be an X. Creating a thumbnail is where you draw lots of small images quickly and then you can choose a few of the thumbnails to develop into a final design. This is a good method for coming up with lots of ideas quickly.

Workshop 2

Zombie Apocalypse T-shirt Design

Zombie Apocolypse

In this task we were challenged to make a zombie apocalypse t shirt design for Redbubble but we were only allowed to use rectangles, triangles and circles in Adobe Illustrator. This was rather difficult because I was not familiar with the software and it was made even more difficult constrained to these 3 shapes.

Workshop 3

Design Principle: Similarity

boring

Original Image

Boring into Interesting

Finished Image

For this task we were given an array of boring shapes all coloured grey scattered around a page and we had to rearrange, resize and add colour to them to make them into something more aesthetically pleasing. I decided to arrange my squares and triangles to look like rows of houses which direct the viewers eyes towards the sun which is the centre piece of the design. I also incorporated a lot of symmetry in the design because I felt it gave more order to the piece and I had the right amount of shapes to achieve this. I also chose bright looking colours to catch the attention of the viewer but it also creates contrast between the white space.

Contrasting Triangles

High contrast T-shirt

For this task we had to create another T-shirt for this one I decided contrast would be my key feature so I decided to go for the two most contrasting colours white and black. I arranged them in a spiralling way to create a spinning motion.

Workshop 4

Design Principle: Rhythm

There are three types main types of visual rhythm: Regular, Flowing and Progressive

Regular

DSC00043DSC00040DSC00044DSC00045DSC00046

All of these images are good examples of regular rhythm because they all have a regular pattern and the spaces between each line or row are the same distance apart and same size. The patterns also repeat in a predictable way and have a linear path. Although the first image doesn’t look regular that is because the object is curved so the edges look smaller than the foreground.

Flowing

DSC00028 DSC00031 DSC00030DSC00023

DSC00038

These rhythms are all flowing because the patterns are organic and flowing. The intervals between each line are individual and unique which makes them a flowing rhythm.

Progressive

DSC00027 DSC00024

DSC00021DSC00039

DSC00042

These images have a progressive rhythm because they repeat in with intervals that reduce or increase in size. The intervals could also change in colour or gradient.

Regular Rhythm Composition

Regular Rhythm

This is my regular rhythm composition. I decided to keep this composition simple with the colours and the design. I made sure the sizes of all the lines are all exactly the same and the distances between them are all identical. I feel I could improve this design by adding more colours and maybe more lines.

Flowing Rhythm Composition

Flowing Rhythm

Here is my flowing rhythm composition. For this composition I decided to create a high level of contrast while sticking to the flowing rhythm. If I was to do this task again I would make the design far more complicated and add more flowing lines.

Progressive Rhythm Composition

Progressive Rhythm

Here is my composition for progressive rhythm. I decided to keep this design fairly simple like my previous ones. I made sure the rectangles direct your eyes towards the centre one by making them progressively smaller. I also kept the shades of the colours fair similar so the viewer doesn’t get distracted by one of the squares. I also made sure the intervals between the shapes were slightly different. If I was to do this again I would add more complexity in the design while keeping it’s progressive rhythm.

Workshop 5

C.R.A.P

responsive+websites+designs+001

This first piece has good alignment since the the main text and logo are aligned to the centre and the text at the top is also aligned to the top. The contrast on this piece is good, however the white text slightly blends into the snow on the mountains. There isn’t a strong sense of repetition in this piece because a lot of the elements on this composition are different. The proximity of the piece is good because the text is close together but well spaced.

king-of-fonts-helvetica-1024x640

The contrast in this piece is very good because white on black has the highest level of contrast. There is no repetition in this piece at all. The alignment is slightly offset on the text and the proximity is almost not included.

605d76871edfffa51cd5b799c1c4f1d2

There is not much contrast in this piece because it is very chaotic and hard to read. There is a lot of repetition but it is not regular and does not follow a pattern its more of a cluster of text. There is barely any alignment apart from the red text being aligned to the left and the speech mark being aligned to the border and there is a very low proximity between words in the cluster of text.

Seymour Papert

For this task we had to apply the principles of C.R.A.P and apply it to make a image out of the resources we were given. These resources were a picture, a quote, a title and his name. I decided to mask over his face and make it red to create a bold image and make it contrast from the background. I decided to place the text over the mask and shape the text with the image. I also aligned the text on the right with each other to make it look more aesthetically pleasing.Dog Website

I feel I have improved the result of the website dramatically since the website I chose was so poor to begin with I couldn’t make it look any worse. I have used alignment to align the text down the centre and I have also aligned the dogs to each other.

Workshop 6

Design Principle: Texture

What is the Difference Between 2D and 3D Texture?

2D textures use more visual forms of texture whereas 3D textures use more tactile means to display texture.

What is the Difference Between Visual and Tactile Texture?

Tactile texture is when you can actually feel the texture whereas visual texture is just the illusion of the surfaces texture.

What is a Motif?

A motif is any recurring element or repeated figure in design.

Moss Pattern

This is the result of me creating a seamless texture from an existing image using a tutorial. This was a very tedious task to do without creating blurring on the image but a very useful thing to know.

rhythm pattern

Here is my attempt at making a pattern out of some of my rhythm work from a previous task. I found this fairly easy because my design was fairly basic to begin with so I didn’t have to edit the pattern much.

Cant Open

For this task I had to create a website header using the phrase “If you can’t open it, you don’t own it” incorporating different textures. I used two different rock textures for this and created a shape using the lasso tool around the text then filled it with the rock texture. If I was to do this task again I would have to find a way to add texture to the text itself.

Design Principle: Hierarchy

Website

For this task we had to create an example of a web page for a client. I decided for a very simplistic approach to the task and I aligned the pictures and text. I decided to centre align the text and aligned the pictures horizontally with each other. If I was to change this I would reduce the size of the logo and maybe not make it the centre piece of the design.

Wire Framing

Wireframing

For this task we had to create a wire frame for a website for a client. I found this task fairly easy because it didn’t involve very complex design work. I made sure a lot of the design was aligned with each other so it looked aesthetically pleasing. This time when designing the website I made sure the logo wasn’t too large on the document.

Research

Screen Shot 2015-11-23 at 16.03.11Screen Shot 2015-11-23 at 16.30.19

The design of this app is very simplistic. The entire app revolves around the ability of using a map to find street food near your location. This makes the experience very user friendly and ease to access especially for those with little knowledge of the app. If you don’t want to use the map to find street food you can use the list or search bar to find street food. This app heavily relies on the GPS feature in smart phones, this makes it easy to find your location without any user input, however, this makes it difficult to find your location if you do not have a GPS in your phone because there is no way to manually input your location. The buttons and menus of this app are very minimal and the whole app only consists of white, black and grey which creates a lot of contrast between the text and background. This is good for viewing the app under bright light because the text is clear to read, however the white maybe too bright for people using the app at night.

Screen Shot 2015-11-23 at 16.39.10

This app follows a fairly similar formula as the first, that being that the main feature is the map showing where the street food vendors are located. This app has a black header containing two buttons, one of which brings up the map and the latter brings up a list of the street food vendors. The list tab is broken up into four subsections: Nearby, A-Z, Popular and Faves. When the user clicks on their desired vendor it brings up more information about the vendor such as location.

Screen Shot 2015-11-30 at 15.23.03

Here is the website for Deliveroo, a delivery service that delivers food to people from restaurants or chains that don’t usually do take out. The website gets you straight to the key idea of the service which is delivering food, as you can see that you are asked to type in your postcode straight away. This method prevents confusion and allows for quick and easy ordering. Also the large picture of food on the front page makes you hungry and more likely to order from them. There is high contrast between the white title and the dark picture which makes the title easy to read. There is also a section to learn more about the service but the information is hidden at first glance so there isn’t too much text to read.

I feel this is a very effective layout because it keeps the information concise and easy to read while it gives you the option to do in-depth if you want to.

Screen Shot 2015-11-30 at 15.56.06

This website is for several different food products such as sauces or recipes. This website is very eye catching with its large central image that is on a slideshow so it changes through a list of images so you’re less likely to get bored of the image you’re viewing. The white header displays  buttons for products, the logo, the branding and buttons for social media. I like this style of website because it has very few words unless you go deeper into the website to find more information.

Screen Shot 2015-11-30 at 16.20.19

This website has a more casual feel to it compared to the other examples but this could be more inviting to a formal styled and some people may find it easier to access. This website incorporates images on the buttons which allows users to see what they are clicking on before the click it. This site also uses a lot of images to display information, this seems like a common theme in web design when it has something to do with food.

Screen Shot 2015-12-07 at 15.18.51

Here is the mobile app for the McDonald’s app. The app has a red header at the top of the app which stays throughout every page or screen of the app. There is also a menu that pops up from the left and slides across to reveal more options or services within the app. This app also has a map of where the restaurants are. This seems to be a common theme in these food apps so it is something I must take into consider when designing my app/website.

Screen Shot 2015-12-07 at 15.38.43

This is the app for Food.com which is used for finding out new recipes. This app makes it easier to find the recipe you want quickly and successfully by showing you the key information, such as the time it takes to make and the popularity of the dish, before you click on the recipe. This allows for quick and easy browsing.

Proposal

 

Project Proposal

 

BTEC Interactive Design

BTEC Level 3 BTEC 90 Credit Diploma in Art and Design (Interactive Media)

BTEC Level 3 BTEC Extended Diploma in Art and Design (Interactive Media)

 

Learner Name: Owen

 

 

 

 

Specialist Area: Interactive Design

 

 

Date:     7/12/15

 

Section 1

 

Working title: Street Food Website/App

 

 

Target Market

People young and old who have a busy lifestyle and they like sampling lots of different cuisine.

 

What you will work towards producing: (Detailed description of your proposal)

I will be designing a website and app for finding street food in your local area using geo-tagging tech features. It will also allow vendor to add their menus and information, will allow consumers to rate food and service and will allow consumers to share photos of both the food and vendor.

Section 2

Influences, starting points and contextual references:

I will be influenced by current website and app designs for food websites and apps.

Early ideas research and sources:   (What are your sources for contextual and personal research?)

I have researched other websites and apps in the same field.

Section 3

Intended techniques, non digital and digital processes:

I will sketch ideas for logos and possible layouts for the website/app on paper and will also make several paper prototypes of the website and app.

I will then take these hand drawn pieces and bring them into Photoshop or Illustrator to develop them digitally. Also the final outcome will be digital.

Timescales: (Please insert weekly targets of what you intend to work on from the beginning to the end of the project)

Week 1: Research

Week 2: Research

Week 3: Finish research and create proposal

Week 4: Generate ideas

Week 5: Develop ideas

Week 6: Produce outcome

Week 7: Produce outcome

Week 8: Evaluate

Week 9: Present work

 

Section 4

     Proposed methods of evaluation: (How will you evaluate your project?)

I will self evaluate my work and I will get critique from others in the class.

 

Ideas Generation

DSC00096

First I started by coming up with some possible names for the company. I did this by looking up some different ways of saying food in a thesaurus and playing around with different ideas. I feel the name “Street G’nosh” fits best with the company since it incorporates both street and food, plus it sound good.

I think I will be changing this name to “Street Nosh” because it is easier to understand and easier to spell.

Ideas Development

DSC00105

Here is a mind map that i made of features of the app that helped me visualise some ideas for features of the app.

Paper Prototype

Here is the paper prototype for the mobile app.

DSC00147

DSC00148

DSC00149

DSC00150

DSC00151

DSC00152

DSC00153

DSC00154

Wireframe

Here is the wireframe for the app. Throughout the design of this app I made sure that the user knows which page they are on by highlighting the buttons when they are clicked on.

Screen Shot 2016-01-18 at 15.49.03

Screen Shot 2016-01-18 at 15.51.12

When using the keyboard for this page I realised that the user wouldn’t be able to see the search bar when the keyboard appears so I had to move it up with the keyboard.

Screen Shot 2016-01-18 at 15.50.03

Screen Shot 2016-01-18 at 15.51.25

Screen Shot 2016-01-18 at 15.50.18

Screen Shot 2016-01-18 at 15.51.37

Screen Shot 2016-01-18 at 15.50.34

Screen Shot 2016-01-18 at 15.50.55

Here is the login page so the user is able to login into the app.

Logo Development
Takeout Food Box

Takeout food box on white background

Source Date: 18/01/16

I used this image of a Chinese take away box, also known as an Oyster Pail and used is as a basis of my logo design.

Screen Shot 2016-01-18 at 16.40.11

I then traced the outline of the box with the line tool in Illustrator and created a red background behind the lines to make the white stand out. I think I will be using these colours for my theme for my app.

Produce Outcome

1

Here is the header for the app. I decided to follow the colour scheme of the logo/app icon and apply it to the app. I am currently undecided on the font and the colour of the font.

2

I added a map that will show the location of local street food.

3

I added the search bar so that the user can search for their location instead of manually trying to find it. I made a search bar icon so the search bar can be recognised easily.

4

I decided to get rid of the large “Find Location” button at the bottom of the screen because I felt it was taking up too much space. Instead I decided to reduce the width of the search bar and make an icon for the find location or location services button. I feel this works well because it allows more space for the map.

5

I have decided the app’s rating system will work similarly to that of reddit.com, where the post with the most upvotes will gain the most attention and move higher up the ratings compared to those with less upvotes. However, I have noticed that the icons for rating the vendor will be too small to click successfully for those using the app so I will have to think of a different way to rate the vendor.

6

I decided to replace the upvote system with a system which relies on likes and dislikes to rate the vendors.

7

I added the rest of the example vendors and I also removed the black outline around the list and the add location button because I felt they were not needed. I also rounded the corners of the add location button to make it match the top rated and new submissions button.

8

Here is the new submissions list. It is very similar to the top rated page except it has different vendors on the list depending on how highly rated the vendor is. I need to add a system which allows the user to see what rating the vendor has.

9

I added a like/dislike bar to represent how many likes/dislikes the vendor has got.

10

I only made a few adjustments to these pages such as replacing the alternative login options with the actual icons and making the buttons at the bottom match the others on the rest of the app.

11

Here is the page that becomes unlocked when the users login. I need to include a system that allows the user to favourite their favourite vendors.

12

13

I added a system that allows the user to add vendors to their favourites. The icon turns red when it has been activated.

14

Here is the page that allows the user or vendor to add their street food to the app.

15

I added a keyboard to all the pages that needed some sort of typed input.

16

17

18

19

Here is the final design for the app.

1

Here is the android phone version of the app.

1

Here is the iPad version.

1

Here is the android tablet version of the app.

1

Here is the desktop website.

Final Evaluation

Overall I found this task rather difficult because I found it hard coming up with ideas, however, after going through the research stage this filled me with confidence and a lot more ideas which made coming up with ideas a lot easier. I took inspiration from many apps and saw that the common theme with these apps was that the map was the main feature so I decided to make that the key feature of my app. Another hurdle I faced was coming up with a company/app name. To make this process easier I decided to do some word association where I took the words “street” and “food” and found alternative ways of saying them.

The final product from this project came out as I intended it to and I feel it looks professional and fits in with other apps of it’s nature.

If I was develop the app further I would probably spent more time adding information to each individual vendor such as information like location and how it could be seen on their profile.

“The app is self explanatory and seems easy to use and navigate”

This was one of my key ideas when designing the app. I wanted to make sure ease of use was my main priority like it is with many apps currently on the market. I wanted to make the app simple or basic so this would minimise confusion.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s