OUGD 504 - Studio Brief 2

For this session, we started by discussing the idea of navigation on our websites. Initially, we got into groups and discussed what we consider to be common conventions of navigation. This is the list that we compiled:

• Scroll
• Links
• Navigation Bar
• Arrow
• Search Bar
• Swipe
• Motion - Automatic
• Logo - Homepage
• Sign in
• Social Media Feed

We also spoke about uncommon conventions of navigation, which seemed to be much harder to think of things. This is the list we created for uncommon:

• Horizontal Scroll
• Zooming
• Animation providing help
• Pop-Up
• Eye-Tracker
• Body Movement
• Speech

We briefly discussed the idea of a 'holding' page, or landing page, and concluded that we felt that this was a more common form of navigation. However, this is becoming increasingly less popular, especially amongst the modern mobile internet user. Having to take the extra time and bandwidth in order to enter the actual website is something many people wouldn't want to do and therefore is something that people are starting to avoid when making a website.

Then, as a whole class, we compiled a list from what everyone had been talking about. This is the list for common conventions, taken from everyone:

• Home button - Often a logo
• Menu
• Drop down menu - Content reliant
• Auto updates intuitive to user - Youtube recommended etc.
• Navigation indicators - Colour changes, underlining etc.
• Site Map/Breadcrumbs

Breadcrumbs relate to the extra links that are on a page. Repeats refers to a website that has the same links at the top and bottom of the page. Both of these are only used if appropriate, this all being dependant of the content.

This is the list that we compiled as a class of the uncommon conventions of navigation:

• 3-D View - Google Maps etc.
• Single page of content
• Disappearing menu
• Dynamic content

We then had to start thinking about our own websites and the ways in which navigation could be used within it. Thinking about the ways in which all of our pages linked together, we were asked to create a flow diagram. This would enable us to visually represent how our website would work and what pages you could access from different pages. This is my flow diagram:

Although my flow diagram seems a bit crazy and hectic, I actually tried to make it as simple as possible. Basically, every page will link back to the homepage, as well as to all of the other pages. Therefore, I am thinking of having a fixed menu that has all of the links on it, which is on every page; that way all of the pages link to each other. We also looked at the 5 websites that we had taken into the session. We were asked to think about the underlying grid systems that may have been used and draw them out. Here is what I made of the websites I had taken in:

OUGD 504 - Studio Brief 2

In order to get away from the idea of creating a website that is very similar to the existing website, which can be found here, I decided to create a mind map to start generating more alternate ideas that relate to my topic without being too obvious. This is the mind map that I created:

However, this mind map hasn't really helped me to generate new ideas, but instead is more just a visual representation of the information that I gathered over the summer. I decided that by utilising the methods we have been exploring through the sessions I would be able to generate more ideas; therefore I started by creating a visual word association map in an attempt to produce more abstract ideas and thoughts. This is my word association map:

What I found from doing this was that although I was starting to come up with alternative ideas that were slightly more abstract and conceptual, there was still no idea that really appealed to me. I decided, after talking with a tutor, that the best way to conquer my creative block was to literally have a conversation with myself. This would involve me constantly asking myself why in order to understand where my problem was and how to get around it. This is the conversation that I had with myself:

• What is the problem?

- I don't want to make a design that is the same as the studios actual website because it would make my website redundant and useless. However, I am stuck with this idea and can't think how to make mine different with the information that I have.

• Why is this a problem?

- Because it would mean my site is just regurgitating information that could easily be found elsewhere online.

• Why is that stopping you?

- Because I don't want my website to just be the same as their website. I want mine to be more abstract whilst still successfully visually presenting my message.

• What is the message?

- I want to promote their work whilst also showing other design that is aesthetically similar to theirs; perhaps showing design work from their partners and links in order to achieve this.

• Why, what's the point?

- The point that I am trying to make is that their work is very effective and aesthetically pleasing whilst having a strong focus on communication. It is also very current work, in a style that is very popular at the moment.

• Why is their work effective and aesthetically pleasing?

- I like their work and think this for many reasons, such as: the use of grids, the simplicity of the designs, the lay-outs are functional yet creative and innovative, their use of typography, the minimal application of colour, the pastel colours that are often used, and the style of their work.

• Why is that a good thing, why would anyone care?

- People would care because with this being the current trend, and in my opinion the best type of design, they would need to be aware of this work if they wanted to create current, effective and aesthetically pleasing work.

• Who are these people?
• How would you communicate this to them?

- Designers who already have similar taste and are looking for other artists as a means of inspiration and influence.

- Through a collection of images and examples of design that demonstrates all of their strengths, as well as also giving links to other websites and design blogs that could aid them in their search. 

Now that I have had this conversation with myself, I have a much more focused view on what it is that I aim to do and the ways in which I could do this. I have come up with two main ideas:

• I could compare the type of work that they do alongside other work and explain why I think their work is better?
• My website could demonstrate the current trend within graphic design, highlighting what characteristics are typical of this type of design.

I feel that my second idea, highlighted above, gives me much more scope and is something that I think will benefit me also. After having a discussion with Harrison about this idea, he asked me a question which helped me to define my idea:

• Is it not just like a more niche 'Designspiration'?

- No, because it would be an archive showing the current trend, split into categories of design elements and characteristics. Although this would be a collection of images, similar to designspiration, my website would be much more specific and could also offer links for further research. Within this website, I would not focus solely on 'Deutsche & Japaner' like I had previously thought, but would still include their work amongst my collection.

Now that I have my concept and idea, I can start to look at other websites that I think are appropriate and that help me to solve my own design problems. I looked back at the things we did before this session and wanted to quickly rethink some of the answers that I had. The main thing being the pages that my website will have. Now I understand exactly what I am doing, I have re-done this task:

• Homepage
• Grid (category containing relevant imagery)
• Line (category containing relevant imagery)
• Colour (category containing relevant imagery)
• Pattern (category containing relevant imagery)
• Typography (category containing relevant imagery)
• Shape (category containing relevant imagery)

I could also include the following pages, although these could potentially be removed if I cannot complete everything in the time scale:

• Links - Containing links to further sources of similar work
• Archive - A page that contains all of the images from the website

OUGD 504 - Studio Brief 2

In today's session we were supposed to take our concepts for our websites and start thinking about visuals and they way in which our viewers could interact with the site. However, as I am still stuck in terms of ideas for my website, I used my original idea for this task in order to go through this process. Once I have got my final idea, I will then repeat this process.

The first task for this session was to think about what content our website would have and how it would be split into pages. We had to think of 5 pages that our content would be split into:

• Homepage - Showing what the website would have on it, what it's about etc.
• Partners - Showing all of the studio's partners and links
• Information - About the designers, contact information, awards they've won etc.
• Projects - Various examples of their work
• Studios - Other design studios that are worth knowing about

As a group, we then discussed what we felt were the 5 main pages of a basic website. This is what we came up with:

• Homepage - Indicative of Content, Introduction
• Contact Page - E-Mail, Social Media, Inquiry Form, Telephone Number, Address
• Information/About Page - Ethical Statement, Facts
• Gallery/Portfolio - Image (Categorised only if actually helpful for the user)
• Forums/Posts/User Posts - Very common now that the technology supports it

Overall, websites are all about the user and ensuring that they are getting what they want is essential.

We then had to draw up a quick sketch of how we think our homepage may look. This was the quick sketch that I presented:

We then got into groups in order to critique each others ideas and visuals. This is the feedback that I received:

• Very similar to original website content wise
• Clear layout with links

• I think you could experiment more with the layout style

• Effective layout
• Contact information at the bottom is well situated on the page
• Possibly try some variations in order to discover other potential layouts

• Minimal and simple keeps it clear, concise and straight to the point
• Is there not already a website with the same content?

What I have taken from this feedback is basically what I had already discovered before we did this task; this being the reason that I had previously decided that this wasn't a good idea. Due to the original website for Deutsche & Japaner being very similar to this, content wise, this website is effectively useless. Therefore, I am going to look back at my mind maps and create new ones, much like the ones that we did during the concept workshop, in order to generate a fresh, innovative and creative idea. From the critique I received I did also learn that by making my website very simple and clean, I could effectively display information that is aesthetically pleasing whilst maintaining functionality. This is something I will definitely take into consideration when designing for my final idea.

OUGD 504 - Studio Brief 2

For this session, we have been asked to answer 5 questions to do with our ideas for 'Design For Web':

•  What it your subject matter?

- Germany based design studio 'Deutsche & Japaner'.

• What are you trying to communicate?

- How aesthetically pleasing and effective their work is.

• Who will be/could be your audience or 'end-user'?

- Mainly graphic designers, specifically those interested in the style of work that they produce.

• What will be the most appropriate/effective form of content?

- Text and image, mainly image since I am showing off the work that they produce.

• What is the function and purpose?

- I will be show casing their work in order to make graphic designers aware of them, hopefully influencing and inspiring other designers.

We also had to think about the sector/industry we would be designing for:

• Graphic Design

- My website will be aimed at graphic designers that are perhaps looking for inspiration or influence, or perhaps are just interested in the type of design that 'Deutsche & Japaner' produce.

However, after discussion with peers and self reflection of my idea, I realised that if this was going to be my website, it would effectively become a replica of the official 'Deutsche & Japaner' website. Obviously, this isn't something that I want to do; I am looking to create an original and innovative website. I started thinking about questions that I needed to ask myself and consider:

• How can I make my website different to the official website? - Think about audience, purpose and content.

• Figure out what they design, why they design it and who for.

I think that the best way for me to start generating more original ideas that I can work with, is to utilise the methods we have been recently using within our sessions. I am initially going to try creating a mind map, looking at the research that I have gathered over the summer, which can be found here.

OUGD 504 - Studio Brief 1

Illustrator Workshop:

For this session we are looking into the software 'Illustrator', specifically the use of colour and swatches.

There are two colour modes that are both used for either print or screen; CMYK is used for print whereas RGB is used for screen. We will be focusing on the use of CMYK, which is made up from cyan, magenta, yellow and key (black), as our brief is design for print and so RGB is irrelevant. CMYK colours are often referred to as 'process' colours due to the idea of the printing process. If you were to print with only cyan, magenta and yellow you would not be able to get a proper black, in other terms 100% black, and so the black is applied in order to complete the image.

There are many ways to select colours when working in Illustrator. There is the colour picker in the bottom left hand corner as well as the colour sliders that allow you to choose varying percentages of each colour. The swatches on the right hand side are also a very good method of efficiently applying colour and is the feature that we will be looking at today. Swatches allow you to create your own colours and save them for later use whilst ensuring consistency.

Every new Illustrator document has the default swatch palette which contains the default colours.

We then selected all of the default swatches and deleted them so that we could focus on the swatches that we made. To do this, we simply clicked on the menu and clicked 'Select All Unused' and then deleted. We also changed the way that we viewed the swatches so that it was in list format as opposed to thumbnails. 

We then decided to make a new swatch. In this 'New Swatch' menu, we could alter the sliders to create the colour that we wanted. Once you click 'OK', this colour is then added to the swatches palette. If you make a swatch and then save and quit, when you return to the document the swatches will still be available; they are however exclusive to this document.

We then looked at how we could add colours to the swatches in other ways, like from once we've already used the colour in the design. One way to do this would be selecting the object and then dragging the colour from the bottom left hand side into the swatches panel; or after selecting the object you could click on the 'Colour' icon in the top right hand corner and create a new swatch from there. However, in order to add every colour that you have used is simple. You go on the swatches menu and click 'Add Used Colours'.

You would then end up with icons like these shown above in the swatches panel. The small white triangle in the icon allows you to instantly recognise that these are global colours. In order to make any colour a global colour, you just need to check the box that says 'Global' inside the 'Swatch Options' panel.

Once this has been done, as long as the preview box is checked, you can then edit the colour inside this panel and the colour will change instantly and automatically.

Once you have an object selected, you can then go to the 'Colour' panel in the top right hand corner which allows you to create tints; tints can only be applied to global colours. Once you have the tint that you want, you can then add this to your swatches panel to be used whenever you want.

As you can see here, it is a tint of the colour above which is indicated by the '50%' next to its name.

If you were to then edit the original colour using the 'Swatch Options' you could alter the original colour whilst also changing any tints of this colour in use.

Spot Colours:

-->

These are solid colours that are not printed using a combination of cyan, magenta, yellow and black, but instead are mixed individually. These colours can be used in order to save money, as you only have to print using one colour, as opposed to the possibility of having to print with up to four colours. It could also increase the cost, if you were to use CMYK and spot colours within the same print. Spot colours are also sometimes used for branding and logo design in order to keep consistency. Another reason that spot colours are sometimes used is in order to achieve colours that you cannot get from mixing CMYK; these could be metallic or fluorescent colours.

The Pantone Colour Reference system is a way of identifying a huge range of spot colours for a range of stocks. It contains all of the information that you would need in order to use the colour on the computer, such as CMYK percentages and codes etc. The printers would have a guide so that they would know how to mix the chosen colour. To access this library whilst on the computer, you would go into the swatch menu and open the swatch library, then look in the 'Colour Books' option. Here, there is a list of all the different types of Pantone guides.

Once you have chosen your Pantone guide, a window opens that contains all of the colours from that selected book.

When viewed as a list, with the finder box checked, you get a window like the one below. Here, you can type in the reference number of the colour you want.

This colour can then be added to your swatches so that you can use it consistently whilst knowing you have the correct colour for printing. However, this system for printing spot colours only works when commercially printing because the printers at university all print using CMYK. When using Pantone colours, you must not change the name of it as the printer looks for these specific names when printing.

There are many indications just from looking at the swatches panel as to whether or not you are using spot colours. The name is different, and the icons all have a small 'spot' incorporated in with them.

Going back to the saving and re-using of swatches, we looked at how we could import our swatches onto other documents and other Adobe software. This first method allows us to reuse our swatches within other Illustrator documents:

 As you can see, it is buried deep within many folders. This save location must not be changed as this is where Illustrator looks to find any saved swatches.

 In order to open these on a new document, you simply go to 'Open Swatch Library' and then 'User Defined'.

This second method allows us to use our swatches within other Adobe software such as Photoshop and InDesign:

You cannot save any swatches that use gradients or patterns, but normal colour swatches can all be transferred. When saving as ASE for other programs, you should save it amongst all of the images and other files so that you can easily find it. This is because the other programs do not know where to look for Illustrator swatches and so you need to look for them manually.

The main points of this session were:

• CMYK colours are often referred to as process colours
• Spot colours are made from separately mixed inks
• Understanding how to use global colours and the swatch palette

OUGD 504 - Web Session 1

In today's session we are going to go over the basics of design for web, talking about these areas:

• Web standard and limitation
• Layout
• Setup
• Basic Coding

Before we would normally start designing anything to do with a website, we would first need to answer the three main questions, which are:

• What is the purpose?
• Who is the target audience?
• What do the audience need?

There are a lot of acronyms and abbreviations in the world of design for web, and understanding what each of them mean can often help in understanding how to successfully code and design a website. I have wrote the meaning of the most important terms for this session.

• HTML
• XHTML
• CSS
• API
• WYSIWYG - What You See Is What You Get
• MIME
• SQL
• MYSQL
• SEO - Search Engine Optimiser
• FTP
• URL - Uniform Research Locator
• XML
• PHP
• ASP
• JSP
• CGI
• AJAX
• ASCII
• DNS
• GIF
• HTTP
• HTTPS
• UI - User Interface
• UX - User Experience
• WWW - World Wide Web

All of these are languages used in design for web; it is a language that needs to be formatted correctly in order for it to work. In order for it to work across all systems, it needs to be a standardised language that can be understood by all of the different systems it may be on.

There are lots of limitations in designing for web; generally speaking you have to design for the lowest common denominator. This is something that is currently in dispute due to new retina display screens that have a resolution of 220 pixels per inch. This means that if you were to design for the lowest common denominator, when it is viewed on a new retina display everything becomes blurry and pixelated. However, the reverse of this whereby you design for the new retina display and simply reduce the size would result in all of the files being huge.

Colour is another obvious limitation; the use of RGB being essential when designing for web. Web safe colours is a collection made up of 216 colours. In order for your colours to work on all computers and systems, you can only choose between these 216 colours.

'When colour first arrived on the web computers could only support a maximum of 256 colours on their 8-bit monitors. A list of 216 web safe colours was identified.  These colours were/are reproduced consistently across the web using HTML, specifically a six or where possible a three digit hexadecimal code.'

Red

#FF0000

#FF0

White

#FFFFFFF

#FFF

Black

#0000000

#000

Within the last 8 years, CSS has allowed us to identify all of the RGB colours, meaning that we can now use many more colours. There are 256 tones of red, green and blue that are all combined together in different amounts which results in over 16 million different colours that can be made. 256 x 256 x 256 = 16, 777, 21 colours. This is significantly more than the 216 web safe colours that could be made using HTML. In order to get 100% red using CSS, you would type in: (255, 0, 0) where (Red, Green, Blue)

However, these colours made in CSS are not always consistent, but you cannot create gradients or opacity when using HTML. If you want to use web safe colours when working in Photoshop or Illustrator, you can check ‘Web Safe Colours’ on the colour picker.

As well as colours, there are also Web Safe Fonts. In order for a font to be displayed consistently across different computers a standard font must be used. Further to this, a font-family is chosen giving several ‘fall back’ options to ensure maximum compatibility between browsers and systems. For example if the browser/system does not support the first font it would try the next one instead. For example it would look something like this:

Serif font – “Times New roman”, Times, Serif

Sans-Serif – Arial, Helvetica, sans-serif

It would work its way from left to right until it found a font it supports. The speech marks need to be used if the font’s name is more than 1 word otherwise the computer would think that each word represented a different font. However, if you want to use a different font that isn’t ‘web safe’, then you can install the font onto the website using CSS. This breaks all copyright laws and is illegal unless you pay the license fee.

The CSS compatible @font-face allows you to install fonts to a website, meaning the font choice remains consistent regardless of the browser or system. However, using font-face breaches licensing and copyright laws related to specific font foundries. There are many free font websites, which include free license usage for @font-face kits including Font Squirrel. If a downloadable font has a web font kit, it means you can upload it to your website.

Size, Dimension and Pixel Resolution:

• 640 x 480
• 800 x 600
• 1024 x 768
• 1920 x 1080
• 2880 x 1800 (220ppi)

 

File Formats:

• PNG
• GIF
• PDF
• JPEG

These ‘lossy’ file formats can be compressed so that the file is as small as possible, which is what is used for screen. The resolution of screens range from 72 ppi, which is what is normally used to design for web, all the way up to 220 ppi. However, most monitors use 96 ppi and have done for a while.

We are now ready to start thinking about going into Dreamweaver and designing our websites. However, before you start designing on the computer, as with anything else, we need to create thumbnails and 'scamps' so that we have a good idea of how our design will look. A ‘scamp’ is a rough initial drawing of the idea and layout. You would then make a site map, which indicates the content you would need and the amount of pages that will be made. This also helps to determine the cost you would charge.

Dreamweaver:

 This is the first screen that you get when you open Dreamweaver and select to start a new HTML file. As you can see in the top left of the document, this is looking at the file in 'Design' mode which means that this is what would be seen if previewed on the internet.

This is how it looks when viewed in 'Code' mode. As you can see, although there are 9 lines of coding, the website is still only a blank page.

This is the 'Split' mode, in which you can see the coding on the left and the actual design on the right. However, once you coding begins getting more and more elaborate, what is seen on the right isn't exactly how it will be seen. This is why it is essential to be constantly checking your design during the coding process.

We then started to remove the code that we didn't need such as the top line, which wouldn't make any difference in this case. Generally, this line of code is needed in order to ensure that it functions properly but as we will not be putting this online, we will not actually need it. However, we do need the at the start, as well as at the end. These tell the computer that the language we are working with is hypertext mark-up language. Wherever there is an opening tag, there must be an corresponding closing tag. For example this would be the first and last thing on the entire code:

• <html>
• (This is where all of the code would go)
• </html>

The tag that says refers to anything that increases the functionality of a website that isn't actually visible. For example, if you wanted to use other languages on the website, this is the section that you would insert the appropriate code. A meta-tag, which is is used for search engine optimisation and is where you would type in key words for the search. They are not actually needed for a website to work. A 'favicon' is the small logo that is seen on the left hand side of the URL. If you want something to be visible on the website, it has to be placed in between the two tags.

In order for Dreamweaver to run to its full potential, as with any other software, you need to be working from the user work folder on the hard drive. Also, you cannot package when using Dreamweaver and so when you start you need to create a 'root' folder. Everything that you are using within Dreamweaver must be inside this folder in order for it to work; if this were not the case, you would end up with broken links. When naming the root folder, the convention is to never use upper case or spacing.

 Once the 'root' folder has been created, you need to create a sub folder within it. Some servers look for a sub folder named 'images', in which should be all of the media files. The rest of the content and information is fine to be left loose within the 'root' folder.

This is how it would look inside the 'root' folder.

Once you are ready to save, you need to create a site in the root folder in order for Dreamweaver to know where this folder is. To do so, you need to go to the top where it says 'Site' and click 'New Site'.

 

From here, you can name it whatever you want. The most effective and common thing to call it would be whatever the website was called. You then click on the small folder icon to the right and find the root folder that should be inside the user work folder. Once on the root folder, click 'OK' and then save.

Then you are ready to save. When saving, you need to make sure that you leave the file extension on so that the internet can understand what type of file it is. As this would be the hope page of our website, we need to ensure that we name it correctly so that when online, the internet will know which page to open first. To do so, we have to follow certain conventions. The name of the file needs to be universal and understandable by everyone and so the file must be called 'index.html'. Once saved, you can view how the website will look by clicking on the small globe icon and choosing a search engine.

This is how my website currently looks, blank and empty. The best way to work when using Dreamweaver is to ensure that you are constantly checking how your website looks. No matter how small the change may be, every time a change is made to the code you should save and preview it. This way, if something goes wrong you will know exactly what it is instead of having to sieve through loads of coding.

I then went back onto the Dreamweaver document and changed the title of the webpage. To do so, I replaced where it had said 'Untitled Document' into 'Samuel Horbury'. I then saved and previewed the changes.

As you can see, the tab is now named 'Samuel Horbury' instead of untitled document.

In order to add some content to my website, I added text in between the two tags. This meant that it would be visible on my page.

Here it is, saying 'This is my website'.

OUGD 504 - Studio Brief 1

Concept Workshop:

TASK - Create a concept for either a new/fictional restaurant, bar or hotel that is situated in Leeds.
For this project we were put into groups of around 7 or 8 and I was with: Joe L, Will J, James K, Bobby J, Rinesh M and Jasper L.

Questions to think about -

• What does your client need?
• Who is the audience?
• What is the purpose?

Are you targetting:

• Potential customers
• Current customers
• Potential volunteers
• Students

To start this workshop we had to select words out of two separate jars. The first jar contained random words and we were to pick three, whereas the second jar contained the words 'bar', 'restaurant' and 'hotel' and we only had to pick one. The words we got were Hat, Calendar and Frame for Jar 1 and Restaurant from Jar 2.

In order to get the best idea possible we brain stormed for each object, allowing us to then filter our ideas and choose the best one. We also created a brain storm for the word restaurant in order to give us some ideas on how we could relate each object to the idea of a restaurant. Here are our brain storms:

Frame -

 

We went through our brain storm once we had finished it and picked out the more appropriate and useful ones:

• Time Frame
• You've Been Framed
• Rigid Structure/Support/Protection
• Enclosed
• Stable
• Photo/Paint
• Freeze Frame
• Set-Up
• Skeleton
• Climbing Frame
• Camera/Instagram
• Frame of Mind
• Window/Door
• Boundaries
• Art Gallery

Hat -

 

Here are the more appropriate and useful ideas from this brain storm:

• 'Mad as a Hatter'
• Hatrick
• Top Hat/Flat Cap/Baseball Cap etc.
• Magic
• Fashion
• Protection
• Chef Hat
• Uniform
• Thinking Cap
• Class/Social Status
• Crown/Royalty

Calendar -

 

Here are the more appropriate and useful ideas from this brain storm:

• Seasons/Weather
• Mayan Calendar
• Star Signs/Horoscopes
• Time
• Academic
• Religion
• Zodiac
• Holidays/Christmas
• Grids
• Deadlines

Restaurant -

 

The main points made from this brainstorm are:

• Food
• Drink
• Status
• Menu
• Kitchen/Chefs
• Music
• Leeds/Context
• Social/Leisure
• Pop-Up
• Uniform
• Takeaway
• Waiter/Waitress
• Chain/Independent
• Quality
• Money/Value
• Hygiene
• Buffet/All You Can Eat
• Self-Service
• Tips
• Atmosphere/Ambience
• Celebration
• Culture

After having discussed all of the ideas as a group, we decided that it was down to two: Seasons/Weather and Time Frame, these have been highlighted above. We decided in order to push our idea's as far as possible, we would think of possible outcomes related to each idea.

For this we started with the idea 'Calendar - Seasons/Weather'. We wanted some sort of restaurant that changed in some way along with the seasons. We discussed many ways that this could be possible, originally discussing the idea of a tree house. These are many advantages and disadvantages to this idea, so we thought it would be best to think what these could be.

Advantages -

• Unique Experience
• Changing/Dynamic
• Bespoke
• Extravagant
• Outside
• Good Publicity

 Disadvantages -

• Expensive
• Niche Market
• Safety Issues
• Impractical

We continued to discuss ideas, going from our tree house to some sort of balcony terrace establishment. We wanted to keep this idea of height and the feeling of being outside and kept the idea going. We then thought that with it being based in Leeds, there aren't many places this could be situated. The idea of a dome like building was then mentioned and we decided to push this as far as we could go.

It would be a two story building, the dome covering the top of the second floor which would be where all of the seating would be. Also on the second floor, we would have the floor covered in grass and plants, imitating the idea of being outside. In order for this establishment to be more sustainable, we would grow our own produce and sell it as well as use it within the kitchen. The shop, where you could buy our produce in various forms, would be on the first floor along with a bar. With there being a dome over the top of the building, the outside would be clearly visible and so the effects of the seasons and various weather would be visible from the inside.

We felt that this idea was now as far as it could go, without being silly. In order to ensure this was the best idea, we did the same process for our other idea, 'Frame - Time Frame'.

When thinking about time frame, as well as the idea of a restaurant, we came up with unconventional and alternative meal times. With Leeds being a big city, filled with students and working professionals, many people have unconventional working hours and therefore eat at different times. From this, we came up with the idea to create a restaurant that would be open during these times that sells affordable yet high quality food. Thinking about places in Leeds that this would be most effective, we decided that the train station would be the best place. Here, we could supply our service to commuters and working professionals that are leaving and coming into Leeds. We felt that this idea was solving a real-life problem and had much more scope than the other idea, thus decided to run with this one.

We created another mind map in order to clarify our ideas and ensure we were answering all of the different elements that we needed to.

Our Concept:

 

What are you clients needs? - 

They need good quality, affordable food and drink at unconventional hours.

Who is the audience? - 

Commuters (Individual), Middle Class, 18-35, Professionals.

What is the purpose? - 

To provide a service that otherwise wouldn't be available and solve the problem of having no where to purchase good quality food after hours. The food should energise, comfort or satisfy.

In order to keep pushing this concept and ensure that our idea was completely thought out, we decided to make sure everything was specific, including elements that could help us understand our target audience. We decided that our opening times would be 10pm - 6:30am; these times would ensure that we had no rivals, as they would all be shut during these times and we would be the only option. The price range of our products would vary from £2 - £10, meaning that our food is more affordable and accessible to the everyday traveler.

We also needed a name, and all began to brain storm and think of as many names as we could. These are what we came up with:

• Eat Vite
• Meal Shift
• Strap Hunger
• After Hours
• Chow Now
• The Larder
• Dusk till Dawn
• Overdue
• Bon Vivant
• Night Bite
• Travel-Eat
• Late Plate
• Warm & Toastie
• Light Snooze
• Midnight Deli
• Nox
• The Nox Box

We ended up choosing the name Nox, which comes from the Roman translation of the Greek goddess of the night. It is short and memorable which is what we wanted.

We also started thinking about possible scope for this establishment, mainly thinking about other places that it could be located such as:

• Airports
• Service Stations
• Student Library's
• Hospitals
• Student Union's

These are all places similar to train stations in that they often have people around them at late hours of the night.

Now that our concept had been completely thought out and we had our idea that we wanted to use, we had to think about producing visuals. In order to be as efficient as possible, we split into pairs and smaller groups and shared out the workload. Along with Joe L, I was in charge of creating a logo. To start, I sketched up some initial ideas based around the themes of night time, early mornings and Greece. We decided between us that I would focus more on image based designs, whereas he would create logo's using typography.

I then took the ideas that I felt were more effective and could be developed further and re-created them digitally.

I created these clocks from the idea of opening times, showing the times that we were open (10-6:30). However, this could be interpreted as 10am-6pm instead of 10pm-6:30am. Therefore these would obviously not work

Thinking about the theme of Greece I decided to create a Colosseum building, in hope it would help me to generate further ideas based around it. However, I felt like it didn't have a logo aesthetic or help to communicate the purpose of our establishment.

For this idea, it was more based around the idea of service from night to day, the image turning from a moon into the sun. Although I think this suits the concept of the project, it doesn't work as a logo. It is too long and would be more effective as some sort of loyalty card.

 

This design was again based around the idea of the sun rising, showing three stages of the sun getting progressively higher in the sky. Like the previous design, I don't feel as though it is successful in terms of logo design.

I like these three designs and think that they are different and interesting. However, they seem as though they would be more appropriate for a hotel as opposed to a restaurant. I decided that I would look at perhaps incorporating both text and imagery in order to create a logo that visually represented the brand as well as showed the name.

 Here, I have incorporated the use of imagery through replacing the 'O' in Nox for a rising sun. This visually represents the early morning whilst also giving the name of the establishment. However, from a distance it is hard to tell that this says Nox, therefore making it useless.

 

 I went back to the idea of incorporating the Greek theme within the logo, this time through the use of typography. By adding extra lines and serifs onto the letter forms, they had a much more Greek aesthetic. Although the group liked this logo, we decided that it was too aesthetically similar to that of American fraternity's. This would obviously be giving the wrong impression of our restaurant so we decided to use a logo Joe created using just typography.

Joe's designs:

 

These are all of the variations that Joe created using only typography and in some cases slight colour changes. After much discussion amongst the group, we decided that from all of the logo designs that we created, this was the most effective:

We liked the simplicity of this design which makes it much more readable and legible; with this mainly being seen between the hours of 10pm and 6:30am it needs to be very clean and easy to understand. The way in which the 'o' is within this design is also very interesting and becomes open to interpretation and could be seen as numerous different things:

• It could represent the '10' referring to the opening time.
• It could be conveying the idea of food and thus representing a plate and cutlery.
• It could also represent the sun rising and conveying a sense of early mornings.

The choice of using just black and white was also something that we considered and eventually chose for various reasons:

• It is a very professional looking logo now, especially due to the colour choice, which we felt was much more appropriate for our target audience.
• It could represent the night time, the white representing the morning.
• Black and white logo designs are often timeless, thus preventing the need to re-brand.
• It conveys a sense of high quality which again targets our audience.

From this logo, we could then produce a wider range of designs in order to successfully convey our idea and concept. These include:

Menu - 

Packaging - 

Mock-Up Shop Front -

 

Final Presentation: