web development

Now i have established the web site designs and shapes i have now worked on putting the screen onto the mocked up mac screen. I have done a range of different screen shots in order to see the extent of design, and the detail on the website itself, such as the scroll over buttons.

Web development

I have been working on the mock up for the screen context of the web designs i have done. This involves quite  a bit of photoshop, which is helping me improve my skills, but it does mean it takes a little longer than the average person at the moment. 

I have been editing the actual screen so that i can then place the jpeg straight onto the screen in order to get the best fit and make it look more realistic.

Scroll over

In order to give definition to the buttons that would be highlighted i have given them a different colour that would be associated with that element, linked through the publication. By adding the gradient and enlarging them slightly, this would be the effect of the roll over buttons and it shows the level of depth and shape to the buttons themselves. 

Gradiented table

I have added subtle gradient to the table and the elements within it, this is to give the lok of shine over the elements and try and give them a sense of depth. I want them to have the look like you could push them/touch them, so by generating a sense of light around it gives the them some shape. I defiantly prefer this to the flat design that i had created with the previous development. 

Initial web layout

taking on the tweaked and designed table i have started playing around with the layout and style of the website, experimenting with the style and shape of the icons. How to incorporate colour and what pages were best to show.
As i was developing i did realise that i didn't want to have the flat colours for the icons, that it made it look really childish and not very aesthetically pleasing. Out of the development i did the only thing i liked was the grid and pages idea, as well as the interactive buttons i designed but i defiantly need to re-think that design style of the overall website.

Open publication - Free publishing

Experience elements

taking on the layout of the periodic table, i have separated the main elements, in my opinion, that makes brands experiences so that they could the be combined and it would then give the purpose of the branding elements analysis. So you could compare and contrast against the main body of periodic tables.

Open publication - Free publishing

New table layout

In order to set up the website as well as finishing the publication design i had to finish the layout for the table itself, as well as add the res tof this information,. This turned out to be very time consuming, but i am really happy with the effect because i feel that it really looks like a periodic table, whilst at the same time having a unique style mirroring the content. 

Cover development

Taking on the cover design for the original cover i have taken a selected amount of covers for the annuals and added colours which can be loosely associated to the elements themselves, working together with the info and research.

Final wrap packaging

This is now the final packaging for my ISTD boards, the wrap has been completed. It is made out of dyed pig suede, and as previously mentioned i didn't want to add branding to the front due to the nature of the complicated info graphics inside, i wanted them to speak for themselves.

// FINAL PACKAGING

TIME SHEET WEEK 19