Tuesday 26 November 2013

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.

Tuesday 12 November 2013

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