Category Archives: Design

Grid systems in web design

A grid system was used whilst designing http://cell-industries.co.uk/

The decision was made to use a grid system whilst designing the layout of the website. A 20×20 pixel grid with 12 columns was chosen. Using a grid aided in the neat placement of objects in the design.

It was deemed necessary to use a grid layout system since conveying the purpose and explaining the idea of the website to people was the most important challenge of the design. Using a grid layout allows the web page designs to become more structured. This structure enhances the user experience by implying that thought has been given to how the website is presenting information to the user and therefore gives the user confidence in the website.

Another advantage of using a grid to design with is that it can be transferable to the development stage of the website. When guidelines and sizes have been set for UI elements in the design stage, laying out the pages with code becomes much quicker. It is also easier to generate more seamless visuals from Photoshop mock ups to the coded webpage simply by following the dimensions of the grid.

Further reading an great resources: http://www.smashingmagazine.com/2007/04/14/designing-with-grid-based-approach/

Logo design

The design process for the logo was started once the general design style for the project had been decided on. The aim was to design a logo that looked attractive whilst also being symbolic of Cell Industries. It was decided that the logo must be simplistic enough to match the flat UI design style chosen for the website and be transferable from web to print design.

The process started with brainstorming words related to Cell Industries as a team and then deciding which were the most relevant and important ones. Words such as ‘cell’, ‘cloning’, ‘environments’, ‘cube’, ‘sci-fi’, ‘futuristic’, ‘future’, ‘preservation’ and ‘forever’ were discussed until the decision that ultimately ‘cell’, ‘cloning’ and ‘preservation’ represented the company best. With these words in mind the process of sketching a logo started with a shape inspired by the symbol for infinity and then the shape of two cells splitting or ‘cloning’. The infinity symbol was chosen as it suggests something that never ends; when an environment is cloned it is preserved forever.

 

Example of logo sketches

Following the sketching stage, mock ups of the logo in Illustrator were made. Illustrator was used to make sure the logo was a vector graphic to make it scalable to any size as well as making it easier to be made into an SVG. The final iteration of the logo became a single shape that is symbolic of the company.

Paired with the logo for Cell Industries a logo for Project Titan was also needed. Using the same method of making the logo symbolic of what it’s representing, the logo for Project Titan was designed to represent the Clone Cube with the ‘clone’ inside of it whilst also adhering to the flat style decided on.

logo.png          project-titan.png

The block symbol style of the logos allows for them to be easily transferable from web to print design and also means they can be made into any colour.

Blocked out pages and the footer

Based on template and the designs we started to block out the pages with the elements to start to build up the website. All the content is dummy content which will need to be filled in later but the website is starting to take shape. All the navigation links through to every other page as well so there is no need to append the url manually when trying to see another page.

It’s really nice to see Cell take shape and have something tangible to look at. It also gives us an idea of how much text will be needed in each section and a really good feel about how the site will look when we have finished.

The footer has also been implemented along with the social buttons that will link off to Facebook and Twitter. There is also a placeholder for the simplified cell logo which will be faded in the center of the footer and or the header.

Environment Pages – Initial Design and Markup considerations

The Environment pages on the website are perhaps the most important pages to the project. They host a large percentage of the “cool” and cutting-edge technology that we are aiming to showcase.

This environment pages are going to showcase:

  • The 3D Environment Model in different views - 360 degrees, top, side, live (timelapse) view
  • The different ways of interacting with it - Webcam gestures and keyboard etc.
  • Information about the environment - Graphs or textual information.

We also decided that these pages should probably look relatively different to the other areas of the website. For example, the homepage, which is going to be a more traditional looking webpage. The environment pages are going to look more like an interface, with many buttons, data and different ways of interacting with it.

Based on what we decided the purpose of the environment pages were I set about designing it. I started with the desktop full-width design as I felt this was easier to visual as an interface style design. I chose to make the max-width 1400px which was 200px more than the maximum width on the rest of the website as it would set it apart from the rest of the website and make it look more like a bespoke interface for the environment. However, whilst making it stand apart from the other areas of the website I didn’t want it to look like a completely different website. So I made sure I fulfilled our look and feel decisions of a flat UI style.

This was the result of a few hours designing and feedback from James and Joe:

environment-page-design

Now that we had a base design for the page in desktop, the next challenge was to think about how to design this for mobile first.

We drew some sketches of how the mobile layout could look, removing pieces of the desktop design that we felt were not completely necessary or may have affected performance on mobile more than was justifiable.

mobile-sketch copy

Once we had decided on how we wanted the mobile layout to look we thought about how we were going to organise the HTML markup of the page into a hierarchical structure. Starting by numbering the importance of certain parts of the page, with the lowest being most important and the highest being the least important.

environment-page-design-heirarchy

This would then translate into how the HTML markup would be written, features of the design that are removed in mobile would be at the bottom of the markup and parts that were there throughout the page from mobile to desktop would be at the top of the markup. Whilst also taking into account how elements have to be re-positioned and moved from one CSS breakpoint to another using CSS but without the ability to re-order any HTML markup.

Some of the early HTML markup for the environment page:

html

SVG sprite sheet

What is SVG?

SVG, or Scalable Vector Graphics, is a XML-style markup driven vector graphic rendering engine for the browser. SVG is supported in every browser, except IE < v9 and Android < v3.

Why use SVG?

When you use images in an html document with the tag, you are defining a file that the user’s browser will request. This request will take up bandwidth and require more precious time to download. If your image is instead a set of dom nodes, it cuts that extra HTTP request out, making your website faster and more user friendly.

It also allows us to be more collaborative with the sprites on the website. I created a SVG sprite sheet and all the sprites will be contained in this one document. This makes it easier if the time comes that we need to edit a certain sprite as we just have this one document. It also makes it easier when writing image paths as it should be the same path for every sprite.

SVG also offers a way to do full resolution graphical elements, no matter what size screen, what zoom level, or what resolution your user’s device has. Which allows us to only ever make one version of the sprite in question. We may well do some image fall backs for browsers that don’t support SVG but as that is IE 8 and below we might not even cater for this browser so this might not even be an issue.

How does it work

Using an SVG works quite a lot like using any other image. You firstly define the size and the url.

#foo
{
width: 24px;
height: 24px;
background: url("/img/sprite.png") -200px 0;
}

Then using the two numbers after the url you can locate and position the specific sprite.

Our sprite sheet is as systematic as it possibly can at the moment. All the header sprites (which is at the top of the webpage) start in the top left of the sprite sheet and move across to the right. Additional sprites for other pages when added to the sheet will start their own line.

Navigation design

I picked up the task of designing the navigation for the cell website. We had had the discussion about the feel of the website and we all came to the conclusion that we wanted it to give more of a ‘user interface’ feel to whoever was browsing the website. This in my eyes meant that the navigation should not be invasive nor should it be busy. It needs to be a clean and intuitive feature to the website. This is what I came up with:

http://precisepixels.co.uk/fyp/navtrial/index.html

1

However I had written the navigation using some Javascript so James picked it up to transform it into a pure CSS element while showing me what he changed.