Source: lacarioca

Sketchbook

Final redesign for the original Davide Cernuschi Photography website.

DESIGN ONE

DESIGN & APPROACH

After doing my research, I decided that I wanted to start with a full page photograph design. The main aim of the website is to show the audience a selection of Cernuschi’s photographs. Less importantly, to provide the user with information about him and contact details. 

Cernuschi specialises in editorial and commercial photography, therefore I wanted to design a rather corporate, clean and stylish looking website. I didn’t want to include a lot of text around the photographs because this would have taken the emphasis off them.

NAVIGATION & STRUCTURE

I decided to make the navigation for this design different and exciting. To start with, I split the main navigation up, so the photo albums were separate to the more informative pages such as biography and contact. The informative pages are placed in the header, so they are always on show clearly. I have only given the design a small thin header to allow more room for the full page photograph. Nothing more is needed.

The navigation for the photo albums is show in a drop down menu. This is so it can be hidden when it is not in use and therefore allow more room and concentration on the full page photograph. The transition would be built using Javascript, with a click function to slide the navigation design up and down. I decided to go for the up and down slide rather than left and right to keep the design neat and tucked in.

The navigation menu for the photo albums has a dark grey menu an opacity of 80%. Having a solid colour made it look too predominant and this isn’t what I wanted, hence being able to hide the navigation altogether. It is also clear to see the active link because the text turns into a light grey rather than white.

It is easy to change the full page photograph with the left and right arrows in the bottom left of the website. The buttons are large, easy to see but quite subtle at the same time because of the colour scheme.

I decided to include thumbnails of the right hand side. They would pop out from the right when the thin grey bar is hovered over. Again, this would be built in Javascript but this time with the hover, fade in and out functions. When you hover towards the top or bottom of the thumbnails navigation, the thumbnails would scroll up or down automatically. The thumbnails aren’t compulsory to use because of the left and right arrow buttons that are available too. However, it is good to have thumbnails when there are a number of photographs in the same album.

LAYOUT & EXPANSION

I haven’t really stuck to a clear grid system for this design. However, I have kept text and elements such as buttons all in line and out of the way to allow the majority of space to be taken up with the full page photograph. Navigation isn’t exactly where the viewer may expect it to be, but it is easy to see and use and well as different and more exciting. I feel the design has a sense of organisation because everything works around the full page photograph. 

There’s plenty of room to expand this website. If I were to add another photo album, it would just be a case of adding more to the navigation menu on the left hand side. If I wanted to add more informative links, they could be added to the navigation in the header. 

To improve this design, I would add a clear link back to the homepage. Even though ‘DAVIDE CERNUSCHI’ would include a link back to the homepage and the majority of users will know this, some may not.

Mobile web app version of the SP Shopfitting desktop website.

I designed a mobile application for SP Shopfitting. The main aim of the site is to show a selection of images and contact details, as they are the most important features for the website. I decided to design a web app rather than a native app because it will be quicker and available for every mobile. The audience will be able to get the information they want quickly. The app includes links that link to the phone and location services on the mobile. Unlike the desktop site, the apps usability is more important than the design. I have also included a link to the desktop version of the site incase the view wants to see the website in more detail.

sp_shopfitting.amybroadhurst.co.uk

Final design and build for SP Shopfitting Ltd desktop website.

SP SHOPFITTING LIMITED

sp_shopfitting.amybroadhurst.co.uk

spshopfitting.co.uk

DESIGN & APPROACH

I have designed and built a website from scratch for a shopfitting company based in Northwich. SP Shopfitting didn’t already have a website so their main aim was to get themselves on the internet and to give their customers something to see. This was a live brief so I was working with real clients. 

I met up with the Marketing Director of SP Shopfitting and they told me what they were looking for in the website. They wanted a simple website to show the different work they have produced, let the audience know a bit of information about the company and to provide contact details. They just wanted a basic, minimal portfolio type website to raise awareness of the company.

I asked the client to look at other shopfitting company websites to get an idea of the style they were looking for. The Marketing Director gave me content such as a logo, company profile, client list, contact details and many images in a number of photo albums. Using this, and my research into other shopfitting company websites, I started to design the website for SP Shopfitting Limited.

NAVIGATION & STRUCTURE

The navigation and structure of the SP Shopfitting website makes it clear to understand the content and easy to follow. The logo includes a link which takes you back to the home page, like most well designed websites. I have included links to the portfolio page on the home page and on the about page. I have also added content such as a short description of the company and contact details to the home page. The home page is the first thing the audience will see so having important information like that available straight away is a great structure for usability.

The thumbnails on the portfolio page are links to different projects SP Shopfitting have completed. When a thumbnail is clicked, photographs pop up in a slideshow which floats above the portfolio page. I used a plugin called Fancybox 2 to create the slideshow when it came to building the website. The images I was provided with weren’t great, so I had to manipulate these.  I designed the thumbnails to be black and white which gives a consistent design for the page.  When an image is hovered over, the black and white image turns into

colour. I built this in the CSS. It brings colour and excitement into the page. However, even when there is no hover present, the banner image works to bring in colour.

I have embedded a map of the location of SP Shopfitting into the contact page. This allows the viewer to locate SP Shopfitting quickly, without having to leave the website. However, the map does include links if you do wish to view the map on Google Maps.

LAYOUT & EXPANSION

I have stuck to a clear grid system when designing the website. The system is made up of three columns, this is easy to spot when comparing the layout and composition of the different pages. The grid has allowed me to keep everything in line and at the same sizes. Having a grid structure makes the website a lot easier on the eye because everything is in order. 

If I were to expand my website, there would be plenty of space. Elements such as thumbnails of photographs, more content, and social media buttons could be added. This may require changing the design slightly but having a strong grid system will make this quick and easy to do.

Presentation boards for the SP Shopfitting Limited website design and build.

Presentation boards for the Ruth Minton website design and build.

Presentation boards for the Davide Cernuschi website design.

Javascript Compression for Coda.

I’d been having a few problems building a site that included the jQuery Cycle Plugin and jQuery Fancybox plugin. The only way I could get the site to work together was to include the script for Cycle and Fancybox on every page that needed Javascript but this could potentially make the site run slow. Today, Jason taught me a good way to fix this problem. He told me to compress both Javascript files then put them into one file together. This means only one script will be needed. The link above is the link to the plugin for Coda.

Multiple Classes.

If you want to make a number of different changes to an element, it’s really handy to give it multiple classes. For example,

<div class=”wrapper home-wrapper ”></div>

The two classes here are ‘home-wrapper’ and ‘wrapper’. You’d be able to have the ‘wrapper’ class for the wrapper, then the ‘home-wrapper’ class to make changes to the wrapper on the home page for example.

On the Sass it would look like this;

.wrapper
   width: 230px
   height: 230px
   background-color: #000

   &.home-wrapper
      height: 300px 

nth-child

The nth child selector is great for making changes to certain elements that are the same. For example, below shows how the class of photo has a margin-right of 20px. Bringing ‘&:nth-of-type(3n)’ into it means nth-of-type(3n) with .photo as it’s parent. 3n means 3x0, 3x1, 3x2, 3x3 etc, therefore the 3rd, 6th and 9th element.

.gallery
   .photo
      float: left
      width: 220px
      height: 220px 
      margin: 20px 20px 0 0

      &:nth-of-type(3n)
         margin-right: 0

Strategy Meeting 26/4

Today we had a meeting at work about the future of the company. We did SWOT analysis which is great for looking at where we are now and where we want to be. It was pretty crazy, I’d never had a meeting like it. Even though I’ve only been there for a couple of months, I felt like I fit in well and I had quite a lot to contribute. I have different perspectives than others that come from development and marketing backgrounds. I really enjoyed the day, getting everyone together was brilliant to share ideas and form relationships. I’m feeling really ready to finish uni and start working in industry full time.

I’m using a subdomain of my own domain to show clients their designed and built sites before putting them on their own domain. This also helps to view the website in all browsers when debugging and to see how the website is running once it is live.

I’ve just uploaded SP Shopfitting to a subdomain to show the client. I’ve found that it is running really slow. I’m pretty sure it’s because the images for the Fancybox slideshow are really big in size. I’m currently in the process of downloading Adobe Lightroom so I can change the size of all the images at the same time.

I’ve also now downloaded Coda. It can read sass files which I prefer to work on and works as a file transfer too which saves me upgrading my free trial of Transmit.

http://subtlepatterns.com/

This is a great website for finding textures to use on a website. They’re good for backgrounds, navigation bars and button design etc. When using them as a background for a website, you say to repeat the background and the way the texture is designed means that it repeats smoothly. You can’t see where the break is in the texture. 

CSS Sprites - Sprite Cow

Sprite Cow helps get the background position, width and height of sprites within a spritesheet. It displays it clearly so it’s easy to put into the CSS.