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.

 

 

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s