Website research (pinxai.com)

pinxai.com is a good example of a site that displays it's content well. When the user first enters the site they are presented with the screen above, from there they can click on the image they like and are then shown to a page that contains all the information about the piece pluse some of the thinking behind it.

From the websites that I have researched this is my favourite as it is very simple and and as a whole I love the way that it is presented.

A great visual feature of this site is how the owner has photographed the print material. This gives it a unique look and distinguishable between the digitally view work.

Website research (pulchry.com Typography)

This is a good example of using typography within a website. On their opening page they have their large typographic logo in pink set on a dark background, which makes it "pop". Beneath the logo they have a quote that they think represents their company well, followed by some of their latest work, which gives the user an insight to their style of work.

Website research (pralinenschachtel.de)

This is a blog design that I quite like, although it would not be suitable for the style that I am designing for, I like the illustration at the top of the page and the layout below that is not divided into boxes but just left to sit naturally as it is typed.

Website research (caramelink.com)

This website uses a large detailed graphic at the top of the page and block colours, in the layout, to section up the site. When the user clicks on the button below the logo that says "our latest work" the page smoothly scrolls down the page to show some boxes with their work.

Website research (asos.com menu)

For the menu at the top of my website I have decided to replicate that of the asos.com website. When the user rolls over the menu with their mouse, a drop down comes down. Where it is different to the usual drop down is that it stretches much further than it needs to, to create a white column through the image behind.

Logo design.

This is a symbole that does not have any writing. I did this variation as mant companies, such as nike, use only a symbol to represent their company.

The symbol that I has made is a lightning bolt. I think that I will use it within my website to create patterns.

Mobile version of website design.

I designed this preview of what a mobile version of my website could be. On this version the user will not be able to purchase any items from the store, but they will be able to view the products and the price.

making a website but slicing an image in Photoshop.

To create the website I first design it in Photoshop and use the slice tool to divide the image into important parts, like the images and the logo.

I then go to "save for web and devises", by doing this I am able to isolate the individual images and adjust the settings in which it is saved. Saving the images in this way allows me to change the file type and the amount of colours that are used in the image. I then export the file as HTML and images which creates a HTML file and a folder containing the original design in slices.

Finally I opened the HTML file in Dreamweaver. I centred the web page by selecting the table of images and then in the properties panel setting the alignment to center. I also changed the back ground to black by adding a background style to the body.

Website Research.

The Topman website is also similar to the two others that I already covered, in that it has a magazine style layout and, in the main, only uses black and white.

The Topman website also use the "lifestyle" photos to promote their products. These photos show the models in the products in certain situations that make the customer more inclined to buy it.

Website Research.

This is the website for an online cloths shop called asos.com. They stock cloths from many designer brands and their prices vary from their own brand items to high end brands.

Their home page has a magazine layout and shows the same "lifestyle" photos as the WeSC website. They use blocks of light blue to high light areas that the customer might be interested in.

asos use photography as their capture method for most of the content on the website. They use photography for all on their product previews and there promotional photos. The use of the photos on a website shows how this capture method has developed from its origins, using film, to a digital.

Using graphite rubbing to capture a texture.

We took rubbings using graphite and plain paper to capture the different textures of objects. Some of the textures that we captured include embossed text, a telephone key pad and key holes. The advantage of capturing a texture this way, instead of creating it in Photoshop, is that this method gives a unique effect and depth that cannot be replicated within Photoshop.

Introduction to Nikon D40.

Today I had an introduction to the Nikon D40. it is a DSLR (Digital Single Lens Reflex). I learnt how to adjust the aperture and shutter speed using the on screen functions. By adjusting the aperture I can change the depth of field and by changing the shutter speed I can adjust the amount of light that enters the camera.

360 panorama.

We took this panoramic on the college campus and put it into piece of software that creates an interactive view of the photos. I could no upload the interactive version due to compatibility problems.

Website Research.

 This is the website of WESC for the main of their content they only use black and white with the exception of using colour photos on the background on some of the web pages.

Podium Flyers

Panoramic Photos.

I used a feature in photoshop called Photomerger, this script takes photos that you have taken and then "joins" them together to create a panoramic photo. Here are some example of what it can do with my photos.

In  this task we were asked to recreate a pool ball created in Photoshop. We were not given any hint to how to crate it.

To create mine I used layer styles, mainly inner and outer glows, and layer masks to add high lights and shadows in certain areas. For the balls shadow I used a combination of gradients and blurs to get the correct effect. I think that my version came out as good as the original and I am happy with the outcome.

Proposal for website design.

For the capture unit I am going to create a sub brand to the sports cloths brand Field to Podium. The new brand will be called Podium and will be more street fashion orientated.

Analysis of the current Field to Podium website (www.fieldtopodium.com)

The problems with the current site are:

No store or information about the products.
No close up photos of the products.
No catalogue of the products.
The 10% donation to sports aid is not “pushed” as much as it could be.
The current website is purely flash therefore there is limited content and does not fill the screen as much as it could.
The flash takes a long time to load.
Every time you go to the page you are shown a not needed animation with distasteful music.
The animations into each section are not needed and do not enhance the viewing of the website.
There is no memorable part to the website, not even the design is worth coming back for.
The design of the website does reflect the idea of the business but only through photograph and does not give justice to the quality of their products.

The website that I propose to build will feature the following:-

Background- The background will still be dark, but will have a patteren over the top with a gradient fill.

Logo and header design- The logo will be white set on a dark background and aligned on the right of the page.

Menu- The menu will sit at the top of the page and inside the header. The menu that I will use is inspired by http://careers.asos.com/asos/. This effect works really well and I think it will look really good on this style of website. The background colour of the menu will darker that the header so that it slightly stands out but so it's not to obvious.

Content boxes- The content boxes will have angled corners togive the site the magazine style layout and some will have a small black border on the top of them.

Displaying the products- The products will be displayed in 237x237px squares so that they can equally fit in rows of four horizontally across the page. The product images will also have a 6px border around them to separate them from the background of the website.

Footer- The footer will stretch the whole width of the page and will contain items such as links to social networks and a site map.I will split the footer into three so more content can be incorporated into it.

Text- The main of the text on the website will be black or white depending on the background it is set on.

Links and headings- The links and headings on the website will be blue and most likely #0090f0 as this blue works well with the dark grey. To the headings I will apply a <span> style to them so that they have a background.

The methods and tools that will be used to create the website:

Photography: I will be using photography for to go into a local clothing shop and taking pictures of their products, which I will then be able to put onto my own site as dummy products. By photographing other brands clothing, for this project, I will save time and money on the store side of the website.
I have spoken to the shop owner of 'Forty Five' and they have agreed to let me take photos of there products to put in my online store.
Once I have these photos they will go into the online store as my products.


CSS: I will use css to style my web pages as it can be easily edited later on if I decide to change the design. I will write all of this code myself so that i then get the result that I am looking for.

HTML: I will code all of the Html myself so that I get the correct structure for the website, the advantage of coding yourself is that you know how the website may react to other changes you may make.

Photoshop: Photoshop will be used to edit the photographs that I had taken in the local store and create the background image for the website. Photoshop will also be used to create some of the other bit map images on the website, such as the the semi-transparent header and the promotional banners like the one at the bottom of the home page. 

Illustrator: I will use Illustrator to create the logo. The reason that I use Illustrator over Photoshop is that with Illustrator I can create a vector image can in the future can be re-sized to any size, for example a post card or a billboard, without the quality changing. 

Prior to doing the research I had many ideas, however the research has refined them and I am now able to go into the website with a clear idea of what I would like to achieve in the terms of how it looks and how it functions. 

Super Bad poster

This is a quick poster that I made to show the techniques that I learnt during the day, including the pen tool and layer styles.

Podium shift logo.

This logo is based on the shift style of logos. I used a font called Lane C and reduced the spacing between the letters, I also modified the M to make a underline which I think gives the logo more structure.

I also made a black and white version without the shit effect.

Polygonal lasso tool.

Using the polygonal lasso tool I can select the the area and using the move tool, change the position of the selected area. There are three types of lasso tool, polygonal which selects in straight lines, the lasso tool which I a free hand type and the magnetic lasso will select the edge of a solid colour.

Podium spray logo.

This logo is made from paint splats and sprays with "Podium" written across it. I produced the logo in Illustrator and to incorporate the text into the background I used a compound mask. 

I also created a colour version of the logo which in some cases may be more appropriate for the item it is going on.

I was inspired to create this logo by the Apple paint style logo that was used for a keynote.

Podium "sharp" logo design.

This logo is based on the spore style logos and Gothic calligraphy. I created it in Illustrator by tracing the drawing below that I scanned into my computer.