Evaluation and thoughts

Now the final piece is finished and i dont my critique i can see improvements and different ideas.

The final piece i think does need some work for one the tablet saize ratio is a little off i would like to change how big some of the colums are. One thing that was suggested was typography i admit my typography knowledge is non exsitent so this is somthing in the future i will work on and i hope to continue this piece if i do  i will be changing the font as well as header sizes. The website also loads a little slow i put this down to two things one the dreamweaver roll over image i used this puts script at the top of the page aswell as the bootstrap docs which i did not cut down. also the website is fairly image heavey. However it still loads alright and work well.

I think it fits the breif although i started to stray from retro and sketch but still remained close enough for it to be classes as those although its now moved into the pattern idea aswell. The website now needs a few changes and the rest of the pages to be made but overall the piece is my best work to date and i am happy with it.

WebSite Development and screen shots

I have now finished web design assigment to the point i have handed it in i have not created blog posts for the reason i stuggle to do both at the same time. This post is a recap of the creative process the issues and the triumphs.

I started this project fairly confident of how it would go i thought i understand the framework i would use (bootstrap) and all the components that it entailed. Bootstrap would give me the solid layout i have been needing untill now my design’s have been done with absolute positioning and althought they worked and where interesting they where baisc and bad design wise. This project i wanted to really improve use features i was uncomfratable with use framework and also push the design element.

To start with i downloaded Bootstrap for the Github (as this included all examples aswell). The design i wireframed out was similar to that of an example so i used this as a frame of refrence and also to copy code across and personalize. The first element on my design was sliding images with links this wasnt particularly hard however i at first had forgot to attach the relevant JS files in a script at the bottom. Once i did this the images where working but the sldie show was awful as the images where landscape and potrait and all different sizes i decided for the design i needed all landscape images so i created a photoshop document where i pasted all the images in and saved for web and device the size width would be 1980px (full HD width to allow for full screen on desktop.) This looked loads better i also applied a .hidden-phone class to the slideshow as this meant it would respond to phone and disappear (it would increase loading times and be non esseital content). This was fine and although minor issues worked in general and looked design wise good.

I then started on the navigation. The Nav in my wireframe was a Fixed nav to the left. I decided i wanted to stick with this but the images needed to take the full screen (similar to red carrot) in order to have a big impact. so i used z index to place the slideshow at the front then started to code in the navigation using the affix component of bootstrap. The element worked however it pushed the slideshow down and ruined the design. This was an issue and took a LONG time to reslove however i was able to reslove through exsperimentation i moved the navigation outside of the container that held the slideshow and put it in its own this meant they reacted differently and worked a simple fix but hard to work out.

I had perviously designed the footer whilst working on the wireframes i liked the idea of using 4 different retro colour’s to create contrast and really intesnse viewing. This was a little overwhelming in the wireframe so thought advice from shelley i still used these clour but used different shades of the purple and blue for my main colour scheme. The footer was easy a simple background replace with text indent (for SEO) then width 100% so it filled the spaced on repeat-x.

During Lesson Shelley said it needed somthing similar to the footer at the top to hold to colours together she suggested a little colour swatche repeated with the colour to give it that blocky retro stlye i was looking for. I did this in photo shop and in the end created one and seperated the colours with a black 2 px line to really hold it together  placed this at the top and i feel it works really well but it had not texture so applied a canvas texture to it for a real textured feel to it although its only subtle it made a difference.

The content i played around with different ideas from my wireframes. I treid two coloums (nested in a span10 offset2) however on full screen if felt like wasted space at the side. increased it to 4 coloums and on a full dsktop this works really well however on a phone this gets squashed (however the responsive was being left till last). i added  place holder images to show the style applied the class (img-circle) to them for that circle clean feel.

I added content below with a devider with images pulled to the left and right still using the same placeholders as the images. This worked well and my idea is once on a CMS these would become blog post updates with a read more link at the end of each one.

The basic layout worked well and i was happy with it i then started to resize the screen to see how it would look on tablets and phones however the default styles where not working as they should text did not resize and images didnt either also it did not shrink down to 1 coloum either. I had this issue for a while so i started to play around with file structure and realsied i had been creating it using the non responsive CSS files so i started again but copied teh HTML across and changed the names of row’s and container’s. This made it work and i was able to see it in a more responsive form.

The main issue i noticed when it was responsive was the navigation it meant tha the fixed nav would be over half the content and taking up space it shouldnt. I applied a hidden phone class to it then placed in another navigation that was a drop down menu with a show phone class on it so it would only appear as the old nav dissappeared. This was working well and the content went down into 1 coloum which was what i wanted.

I moved onto creating the other pages. The first one i created to go with the homepage was the services. I wanted a way to show what it was i could offer to clients in a simple and accessable manner. I wanted images that would link to further down the page to the relevent content. I copied the navigation, header and footer to the new document which worked fine then placed images and dummy content in. The layout is fairly basic however its simple accessable the links worked and the layout was fine although it felt like it was missing somthing as it jumped straight into a lot of content there was no big header or image to draw you in i left it at the time and thought i would come back to it.

I then started on other pages i moved on to the portfilio page i tried different gallieries such as galleria.io but altho i implementted it alright it did not allow for what i wanted so i took it back to basics and used a thumbnail with caption a component of bootsrap to display images with a caption and info that linked you to a Case study of each piece of work. I used pieces of still image work i have previously done as i did not want to use any of my previous websites due to lack of profesional standard. This worked well and displayed the images aswell as the content in an easy accessable manner however like the previous page jumped into content and did not give any indecation as to what page you where on exaspect the you are here statement on the nav again i thought i woudl come back to it though.

The case study page (my favorite page) was a simple design i wanted the nav the same but with a Large image and info on the right of it. I did this  fairly simple without issue the image resizes on browser scale. The only issue i had with the page was again jumping into the infomation. I decided to look on bootstrap and other sites for inspriation i came across the hero element on Bootstap so i decided to use this as header for the image i placed it in with the intent of changing the background however i really liked the simple design and big header intro. I stuck with it and decided to put it into the rest of the site for the services and portfilio pages. This really brought it together.

Designwise once i finished i decided to change certain elements such as teh Navigation colour i placed a background image on the fixed nav thats a 50% opecity purple colour that fitted with the theme also used icons for the navigation images. Then i changed the footer because it felt amature compared to other sites and instead used multiple background images to create a profesional footer similar to that seen on many other sites. The phone nav i put to inverse. I linked the slideshow to the portfilio case studies. I also went though and changes some of the images like the services page to roll over icons. I added social media links within the footer for twitter and facebook i made these rollover then duplicated them as i didnt have time to make more but in the future i would replace with google plus and youtube etc.

I did have issues on the tablet however when looking at the website on certain pages like the homepage the 5 coloum layout is overflowing i was unable to reslove this issue despite trying many many many many many many many many soloutions. I now know how to relove the issue however and i will correct this in the future but for the handin it is left with this issue. Also i notced on presenting my work the navigation is on inverse on the homepage as i uploaded a slightly older file. I will correct this on the live version however as it is allready in the code.

Overall the piece is my best piece it does respond to browsers and looks like a true design peice i look forward to working it on further and resloving the issues i will put this into a final peice then use profesionaly.

Images at the bottom are the graphics i have created.

 

 

 

Colour theme and idea changes

I am tweaking my idea to fit a new purpose for the website. Whilst putting together my wireframes i decided to venture outside the “film” idea as it did not fit the style i was wanting to do. The style is more graphic design/ web design playfulness. As this would make a nice showcase for work i decided to work on this as a personal portfilio peice or portfilio website.

The new aim of the website is to showcase myself as a Web Design Company I have drew up a wireframe for the 960 grid which i think looks profesional and is somthing i would like to start codeing (see wireframe below). I do not feel a need to draw more wireframes as i allready have the idea and layout i also tell how the piece might work using a framework like bootstrap. I have also carried out research into other web design company websites.

Research:

http://redcarrot.co.uk/portfolio/view/aes-international/

I looked at red carrot because of previous lecture with the company i looked at how they presented previous work they had done. The layout for the “case study” is somthing that i really enjoy its a great way to show work and show the creative process behind it aswell. I would like to take this onto a more personal and in depth level though touching on the inspriation and creative process rather than just the software and Technology used.

The Red Carrot homepage also has a interesting feature a image that fills the screen as a great opening intrest it draws people in and allows them to get a feel for the piece straight away. I have actuly done this on my wireframe and know that Bootstrap have a feature that is built with JS called carousel (http://twitter.github.com/bootstrap/javascript.html#carousel) In my wireframe i took a screen shot of this and used it as an example piece.

http://www.webboxdesigners.co.uk/services/

was a company high up the google list that provides web design (even though there website isnt great) the have a service page to show what it is they provide the only thing i disagree on is they do not exspand on what it is they do they simply put a header with a small caption (also there images and text do not align he he). There take on about page is interesting and use the same approach many do images of each person with a quirky quote and a nice little image that displays random infomation such as how many cups of tea they drink per month.

http://www.adreamcreation.com/portfolio.html

This website is has there portfilio similar to how i would like mine. a image with caption and a little info that is a link to take them to the website although i would like it to take to a case stufy similar to Red Carrot.

I looked at more aswell some good and some bad they have all given me ideas but i have noticed 1 problem with all of them really and that is they are corporate no real feeling of personailty the onyl page for any that have personailty are the about pages. I would like mine to be me in a nut shell to show a unique and creative approach as that is what we are creatives.

I have been working on colour pallets and shades of colour (picutres below)

Flexible grid system

Today we started to look at different Grid based layout’s. We was each given a different grid system to try out then apply it to our own App websites. I was given the 1140 grid system (http://cssgrid.net/). This system was a very good introduction to the grid based approach.

Here are my pros and cons of the system:

Pro’s:

Great easy use

attached photshop file to show the layout aswell as HTML file showing the coloum princable in an easy to understand way

helpful for understanding flexiable grids

Quick and easy layout’s

gives you the abilty to make anything! (you dont have to find work arounds as the code is basic and only for layout you not restricted creativly by certain add ons or limitaions)

Cons:

No added goodies (like drop down menu’s)Responsive is limited it simply is fluid until 767px where it converts everything to a 1 colum layout

basic

This exsperience has helped me a lot however and so for been the most valuable lesson i belive along with media quieres. I have took what i learnt today and took a fresh look at Bootstrap (http://twitter.github.com/bootstrap/) as i was looking at this before however was to scared by the daunting task of attacking it on my own however with my new found insight into the working of a grid system i can easily see how the system works. Bootstrap is what i will most likely look at for creating my website. I am going to create a simple block colour mock up in bootstrap with no content simply to use it i will aim to creat somthing similar to my photoshop wireframes. If this is successful it also means i can replace my HTML with a new HTML file with the content in and it will fill it in for me :D. I am very excited about this devleopment and makes Web design less of a task i still enjoy HTML and belive its essetial to know but this means i create more profesional and quicker website’s.

 

 

 

 

Sketch Idea developed

My Idea has change dramaticly since my last post. I have actuly changed over to the idea of sketch layout this mean i can use the previous shown example of my work to create a unique style for a website. I have picked a colour theme that reminds me of the 80’s dramatic colour theme which can be found here (https://kuler.adobe.com/#themeID/51683). This website will still be used to show infomation about “Classic films” but not famous ones simply films that are known for a unique sense of style (in cinematography or sounds lights etc.).

I have begun sketching out wireframes on photoshop just trying to get a feel for how the site would look aswell as possible layouts. The gallery below shows 2 of my inital ideas for a 960 wirefram they are playing with the use of color. Also the layout is fairly simple. The second idea has a fixed navigation to the left with a drop down menu for the extra links.

 

(posible image player:http://www.slidorion.com/)

Concepts

My development of concepts hasn’t come to me fully I am unsure however keep coming back to one main idea.
The idea of doing a vintage film website excites me there are loads of genre’s theme’s and style that would work well with this idea. It applies to the brief looking at vintage films and using the aesthetic to influence the website. If I decide to go ahead I need to choice a particular genre to keep it all in one theme I was thinking about doing something a little out of my comfort zone and doing for something with streaks of colour and lots of creativity with the 70’s/80’s feel to it.

These are lists of people’s best of 70’s and 80’s movies

http://www.digitaldreamdoor.com/pages/movie-pages/movie_70s.html

http://uk.imdb.com/list/-Kt5UvjvcVk/

There are a lot of classic movies made at this time the first one that obvious is Star Wars and The Godfather but both of these wouldn’t lend them self’s to the vintage theme. I am looking more towards the classic musical and dancing films during this period that are also set during that time as well. Movies such as Saturday Night Fever, Willy Wonka & The Chocolate Factory,  Grease, Dirty Dancing etc. although not all of these I enjoy it would make for an interesting challenge to provide a website to show the classic films that seam to been lost nowadays.
The purpose of this website will simply be to showcase the best of the 70’s/80’s genre with video clips and photogallery’s from the films.