OUGD 504 - Studio Brief 2 - Designing for Web

We have been learning about web design through sessions with Simon using Dreamweaver as a tool to make them. Coding is the specific technique we have been learning, this is all essentially all part of working toward this brief. I started for this brief by looking more into my summer brief research on Li Hongbo, I initially wanted to create a web site that showcased his work in an appropriate and effective manner because as far as I could see there wasn't one site dedicated to his work or the history behind it. 

I have always been interested in design that uses paper in a completely different way, I think it first stemmed from my final piece on my art foundation course where I did extensive research into the craft of paper cutting and eventually created my own paper cut sculpture work. I have chosen this specific subject because I feel its something that i'm really interested in, it involves aspect of design and also slight aspects of architecture and the physical act of actually making something as opposed to creating something digitally or even just drawing.

My initial ideas for my website consisted of using quite a fluid and user friendly method of displaying his work because I felt that With Li Hongbo his work has to be physically interacted with to actually get a grasp of how it works. He's an artist who layers paper on top of each other glued in a certain way to create a concertina effect, once he has made stacks of sometimes over thousands of layers of paper he sculpts and shapes the stacks into shapes which once finished can be moved in ways that you really dont expect them too. 

I find this video one of the best ways to display his work.

From this idea of just using his work in a website I decided against the use of just a standard grid layout of pictures just because of the nature of his work. I wanted a way I could dynamically display his work that would be interactive to the user by way or rolling over an image or by clicking.

I found this site that influenced me to create the home page I had in my mind.
Mono face

The interactive element behind it is something that I really liked, it doesn't particularly have a purpose but I feel it is quite an effect way of displaying something interactive.

These were some intial designs for how I wanted my website to look like, I was originally particularly fond of the idea of using one of the paper skulls he created as a flash image on the homepage for the user to interact with. Using flash in my website is pretty out of the question but this element would be a proposed conceptual idea. 

The second image is another idea I has where the homepage would have a side scrolling element which displayed his work. 

After having a brief chat with Lorane I came to the conclusion I didn't have much of an idea that I wanted to get out of the site and I didn't really know who my specific target audience would be, knowing these things would really give me a much better understanding of what I wanted to do.
After my brief crit I went away and decided to take on board the comments and revise my subject to give it more of a purpose. 
I used paper as a basis and went from there. My idea now was to create an educational and informative site that designers or anyone interested in the subject matter could go to one place to find out information and work on a whole host of different artists.

I started to create some more ideas for home pages that gave a large focus to paper, I started to look at paper textures for backgrounds and origami and folding techniques.

I thought about using scrunched up pieces or paper to represent different artist profiles and when clicked on the paper would un-scrunch out into a creased page with artist info and images on.

I liked this idea of using a folded page and within each fold would be a different artist you could click on, It essentially would be a drop down menu but with a more interactive element to it.

I also liked the idea of experimenting with folded paper to uses as a navigation tool where the different folds in the paper would link you to a different artist.

This idea consisted of a sheet of paper folded into different triangular sections that would be the basis for the background, I then wanted to have in each individual triangle a section that folded out to reveal a different artist. 

I think these ideas were a good basis for me to start thinking about my site in a better way, I want the website to directly incorporate paper into its design particularly in how the textures look.

After these secondary ideas I felt i needed some more research into actual web based design so I had a look to see if I could find anything to influence my project further. After some searching I came across a site that incorporated all the images from Flkr and put them in one place using an intuitive and user friendly method a similar think I want to try and achieve. 

tag galaxy

You start by searching a key word

This then brings up an interactive flash image of different planets the relate to your key word represented as a sun in the centre. you can circle around the sun by scrolling with your mouse 

When you click on one of the planets the site takes you to a new screen where images fly in to coat the sphere.

You can rotate the ball and click on any of the pictures to get a larger preview image. 

I really like how this site worked and how it used the information of already existing images to create a content for the website. i thought about my ideas and wanted to use this as a basis for my own site, in terms of the planet themed interface.

I wouldn't have any need for a search engine to start the website so the home page could consist of scrunched up paper balls that would resemble planets. each of these balls would represent a different category within paper art so the categories would be,
paper cut
paper sculpture 
laser cut paper 
paper within fashion
or something along those lines. 

After clicking a category the link would send you to a similar looking page with different artist within that category, all laid out in a the way that the tag galaxy is laid out.

Clicking on the artist will take you to another page which will include pictures on the artists work and links down the side to navigate back or to other areas of the profile like a bio or potentially a link to an artists shop if they have one already set up. 

I think this idea so far has a lot of space for scope and improvement and a constant update of artist profiles, I felt the feedback was quite good from the group crits we had, at first I wasn't sure the space theme would be relevant but the feedback I got seemed positive.

OUGD - 504 - design for web workshop 3

      \\\\\\\\

      |  .  .  |        |''''''''''''''''''''''|

      |   /    |       /   Bonjour |

      |  =    |        |________|

___         ____

| |                   |  |

|    (.)        (.)   | |

|                      | |

We have made another 3 buttons for rollover which are 

contact 

work 

about

we made these in illustrator in the same way we did for the home button last session, save the buttons by saving file for web in the root folder sub folder named images.

underneath the last button we input the text <div id then a box pops up with the word button in, press return twice then input the div close. repeat this 3 times each time underneath the last button.

a href="#" is the code to link a page to another page, where the # sits you need to delete this and input 

a href="index.html" this page doesn't exist yet but this is the link that we will be creating. to create the page we first go down to where we originally had home written on our site. to distinguish between each page we put in this is a home page, we save that file then go down the same line of text and put in this is a work page. This time we save as and save that specific page as work.html in the root folder. We repeat this for all the pages saving as and naming them differently each time.

Were now going to create some boxes within the pages for a columns layout 

This is the coding for the columns in the page. you do the same thing for the left and the right sides of the page. We then needed to go back in to the source code page and crate another line of code before the close div on the page to link it together. 

We then put the text from the page between the div so you can see the formatting of the columns, then I went to lorem ipsum to get some text to put into my other column.

We then learnt how to place an image on a page which was relatively simple, first we needed to select an image on the internet of a relatively small file size. then we take the image to photoshop and resize to the dimensions we want, save the picture as a jpeg file and go across to our source code and in the column we want the photo to appear in create another line between the div and just go to insert - image then select the relevant image 

If your website requires video vimeo is the best site to use because there are size options on the vimeo website, for audio the best site to use is soundcloud. The benefit to using these sites is because the videos are embedded so you are not using any space on your site the bandwidth is used up from the hosts website.

Lightbox is a good website to create thumbnail images that will open up on your site. - lightbox

OUGD504 - creative suite workshop 1

Illustrator

In this session we will be focusing on using the swatch pallet in illustrator, its main advantage being you can create and save your own swatches. This will give you consistency throughout your work, thats easy to access. 

This is a good way to set up your swatch pallet by deleting all the un-used colours

Then you can make the swatches easier to navigate by putting it in a large list view

To create a new swatch you just go onto the menu or use the bottom right button, the standard mode should be CMYK, you can use any way to make a colour if you want to use the the colour picker you can create a new swatch in the colour that your happy with 

If you tick the global box it will change anything over the whole document under that colour, 

Spot colour

Spot colour is a solid colour, that is printed not using CMYK, its a colour that has been printed using its own colour. using spot colours can make printing significantly cheaper, the more inks you use to higher the cost. It can also make a print more expensive if your already using CMYK.

They allow you consistency in reproduction within your print, a client may often give you a spot colour to work with as what your designing for may need to be reproduced in many different places.

fluorescent and metallic colours are specialised inks this gives you other options when printing with spot colours.

If you open the colour swatch library you can select the different pantone books and others.

These are the pantone solid colour uncoated swatches

these colours only really apply when your commercially printing if your using the computers in the print room the colours will be accurately produced but may not look exactly the same. When using a spot colour you shouldn't change the name because this is how a printer will recognise the code for the colour.

When saving your swatches you should save as AI so its ready for illustrator, to open it you just need to go to the open swatch pallet option then click on the saved file. You can also save a swatch library as ASE which means you can use them with other programmes within adobe software. 

OUGD 504 - Dreamweaver workshop

explore websites, do some research
the Session we had today was focusing on website standards and limitation  

Web safe colours
original computers could only support, maximum 256 on their 8-bit monitors, a list of 216 web safe colours were identified.

these colours were reproduced across the web using html, specifically a six or three digit hexadecimal code.

Red
#FF0000
#FF0

White 
#FFFFFF
#FFF

Black 
#000000
#000

web safe colours

This wider range of colours can be reproduced by using CSS rather than HTML, these colours are identified by using the same principals as illustrator or photoshop, by specifying the percentage of 255 per RGB.
100% red would be rgb(255, 0. 0)

Web safe fonts

Computers must use a standard font to be able to be displayed consistently.
Font families are chosen with fallback options to ensure maximum compatibility between browsers and systems, for example if the browser does not support your specific font it will try the next font listed.

Some common font families 
serif fonts - 
Georgia, serif
"palatino linotype", "book antiqua", Palention, serif

if the font has a space in its name you have to put speech marks round it so the computer can distinguish between the names of the fonts.

some web safe font families - 
sans-serif fonts

Arial, Helvetica Sans-serif 
Tahoma, Geneva, Sans-serif
"Trebuchet MS", Helvetica, Sans-serif
Verdana, Geneva, Sans-serif

CSS font face

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 a font-face breaches licensing and copyright laws related to specific font foundries.

there are many free font websites that include free licensing usage for @font-face kits including fontsquirrel.com.

Size, dimention, pixel resolution

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

File formats

PNG
GIF
PDF
JPEG
-
72ppi
RGB
-
lossy 
compressed 
these are all compressed so they can be as small as possible, there is an art to file compression so you can display something that is small in size but still with good quality.

We then started to look use dreamweaver by opening a new blank document, in this session we are going to learn to do some basic coding

this is the blank document 

and this is the code to create just a blank document

Line one isn't completely necessary to make a site work, you can delete it to create a website in its barest form, 
you can also delete the second line adress so you just left with <html>
a target with a / in front of it means close without it means open, eg <html> </html> you need to have an open and a close to make a site work.

line 3 its open <head> then on line six is </head>
the head relates to functionality, this is where it is always contained. in between these tabs is a meta tab which is used for search engine optimisation, to optimise a search you add in key words, this tab its where you would place the words. Not needed for a website to work. Meta tabs dont need close tabs. 

The title is another thing that can increase search engine optimisation, it isnt included in the actual design but will appear in the site adress. its also appears in a tab and is given the name a favicon. 

open and close body (<body>) anything that is part of the design needs to go after this and before the close body tab.

File management is important because if all your files arnt in the same place then the website wont work. everything your working on must be contained in one folder, its a similar system to indesign but to a more extreame level. When you first start a website you must start as how you mean to go on, to keep all your files you must create a root folder. 
for uni computers, save onto your hard drive, never use spaces or uppercase.
I have created a root folder on my HD and within this I have made a sub folder which I have named images, this is where any media goes. All the html and css files go loose inside the root folder. 

To get this up you click on the site option on the top bar 

You find your root file on you user HD then click choose 

This will then appear at the bottom right hand corner of your screen to show you where all your files are being saved. 

When saving your work you must call your first page, the home page - index, this is a globally recognised term for the first page any other page can be called whatever you want.\

This is how you preview your work live on a website page. The best way to work is to have your browsers open and every time you make a change you should preview it each time, so that if something isnt working you know whats gone wrong.

OUGD 504 - Design Production: Concept Task

We were put in groups of about 6 people and told we were going to be given 3 different words and a place, for example the choice of places were between a bar, a hotel or a restaurant. the words that we had to choose out of a pot could be relating to anything. The words we chose were pipe abacus and ball. Out of the 3 words we had to select one to focus our concept on to make it relate to the place we were given, in our group we picked hotel. The word we eventually chose was abacus, after brainstorming all the words to think of the best possibilities relating to a hotel we found that abacus had the best potential.

Our initial ideas consisted of:

Having slides for children and adults to move around the hotel
Having a hotel for blind people and making it a sensory experience with brail
Making it really chic and trendy in the centre of the city
We considered the fact that the plural of Abacus is Abaci - suggested name?
The idea of incorporating geometric design within the hotel to represent the balls
Perhaps sectioning off the hotel to incorporate the history of Abacus - countries?

After choosing our word we did some more research into the abacus and its origin, we wanted to establish a theme throughout the hotel that didn't necessarily directly relate to an abacus but  contained aspects relating to it. 

As a group we liked the fact an abacus was used throughout the world in many different cultures and countries and that it had exactly the same meaning. It was a universally known object that didn't hold any language boundaries. We traced its origin and found that there was no single know origin it was basically just the most logical way to count back in the day. We liked the simplicity of the design and we also explored the possibility of relating our abacus themed hotel to accommodate blind people as using an abacus can be a purely sensory experience, you wouldn't necessarily need to see to use one.

Once we had come up with our words to use, we then applied them to possible concept ideas. We had so many different ideas, considering audience especially and whether the concept should be focusing on a younger audience or adults, seeing as we are designing a hotel.

after exploring many different possibilities we started to come up with a theme for our hotel, we eventually chose a nature inspired theme which stemmed from the natural, simplistic back to basic nature of the abacus. We did some initial research into hotels in forests and 'glamping', focusing on the look to them and the sort of things they offer. Initially we liked the idea of these pod like tents you can buy that are inflated for you to stay in, the idea behind the tents is that they are fully transparent so that you can be more connected to nature. We felt using these bubble tents in our concept would tie nicely in with the abacus theme, as the spherical shape echoed the design of the counting balls used on the abacus. We thought of how we can arrange the tents and we felt setting them into the ground might work well.

Building on this idea we explored other possibilities for the placement of the bubble tents, it was suggested that they could be up in trees after we did some research into the adventure activities course called go ape. This is an adventure course that you make your way around through and down zip wires. We like the idea of having rooms suspended in trees because it was something unique that ties in well with the abacus theme.

Other research for the concept consisted at looking at the Edan project which was a definite inspiration for our hotel, It incorporates the eco friendly theme and a similar structural idea that we were looking for.

We had to take into account of some aspects of our hotel like for example, the target audience, the location (either had to be in or around leeds), the facilities and the branding like logo designs and the use of appropriate colours ect... Not to mention the actual design of the hotel.

We all assigned jobs to each other for specific parts of the hotel after we had sorted some of the basic ideas that we were going to use for the concept. I started to draw up some ideas for the look of the hotel to give something visual to show when we presented our concept in the next session. I then moved on to designing a logo for the hotel, I started with a sheet of ideas using the circular shape of the sleeping pods and also the abacus beads as a basis for the design. I wanted the design to be simple and clean but also reflect what our hotel concept is about.

After discussing within the group we came to a conclusion to use the logo as seen below, I designed it with many different aspects in mind. The lines in the logo represent the tree and also the shape of a leaf to relate it back to nature, the ball represents the pod you sleep in but it can also represent the sun to re enforce the nature side of the branding.

I also had a go at creating a type face to couple with the logo image, which in the end I didn't end up using because I felt a digitised typeface work a lot better.

In the end we couldn't decide on a logo so we presented both, im quite happy with the way they turned out I feel the concept was represented well within the logo.

Other areas that we went into when discussing our concept hotel as a whole was the colour scheme, this at first doesn't seem particularly important but it one of the main things people will see when you see the hotel. In this instance the colour would have to be right because the hotel is trying to blend into nature and if there are colours that done fit or are out of place then it will become immediately noticeable. As a group we selected quite a neutral and soft colour pallet, I was chosen to help blend the hotel into its natural surroundings. 

Finally we had to present our ideas to the rest of the class Laura in our group had prepared the slides so we could talk about our concept.