Graphic Design Notes

 Uncategorized  Comments Off on Graphic Design Notes
Mar 202013

Notes on Sprite

Width (exacly to size of first image)
Height (exacly to size of first image)
background-position: 0 -180px; (x, y)

background-poisiont 0 -360px; (x, y)

Read Stephanie Rewis article on BG images.

box-sizing: border-box (if you add padding then it’s not calculalted as part of the total width

Negative margins – sometimes absoloute positioning might be better.

ul text-align:center

li display:inline

a display:inlin-block

 Posted by at 2:32 pm

Notes on Typography from somewhere!

 Uncategorized  Comments Off on Notes on Typography from somewhere!
Jan 032013

H1 30% larger
H2 25% larger

P{ margin-left 1.5em
X height – distance between baselines & mean line
• Badani & Futura
• Perpetua & Gill Sans
• Metan San & Meta Serif
• Baskervill & Futurea

 Posted by at 12:16 pm

Design Insights # 1 notes – Responsive Design

 Uncategorized  Comments Off on Design Insights # 1 notes – Responsive Design
Jan 032013

Adaptive -> Changes

Fluid -> Stretches
Resolution & Pixel density need to be considered.

Before starting think about content.

Different devices = different content needs


Tablet users mostly in browsing mode

Designing for multiple screens

  • Desktop
  • Mobile
  • Tablet
  • Internet ready TV
  • Home entertainment system
  • Handhelod games consoles
  •  Adaptive design is very labout intensive and a bit less future prrof
  • Fluid is cheaper and more future proof

Which one to use can depend on the content.


When designing for mobile first design for the smallest and weakest – Javascript & CSs

Progressive enhancement

Check out the mobile first website


Fluid design

Desktop version  – search on top rights

Small version – no search on top rights


LukeW | RESS: Responsive Design + Server Side Components


Project flow:

Agile development, scrum style using 2 week bursts works best for responsive design

  • Design part by part
  • Split into user stories/product backlog

Prince2 – waterfall method


Prototyping saves time & effort, mockup mobile early, real content. Design in the browser/



SASS & Compass – toolset to generate CSS

JavaScript components – may vary depending on device.

  • Interactions- no hover on touch screen
  • Programme for touch start and touch end events


Responsive images

  • Max-width technique
  • Stretch BG images
  • No script technique


Asset production

  • Fonts & be careful of @font-face rendering
  • Look @ fonts on all devices before starting

WikiMobile – nav menu

Equal height columns are a bad idea


No pagination on mobile if possible. Load more buttons.

2% have javascript turned off




Chrome & Firefox portable

Blog posts on head London website



Start with girds and Nav first

Grids in frameworks can be rigid


Bootswatch – customise bootstrap

Skeletion CSS framwork


Mark Pilgrim


Ruby Installed on .???

HTML5 rocks resource list

Create your own boilerplate

No HTML5 on websites at present is safest

WebSockets – continuous connections

Ethan Marcotte

Luke Wrob

 Posted by at 11:44 am

Open Street Maps – What are they and why use them?

 Uncategorized  Comments Off on Open Street Maps – What are they and why use them?
Nov 062012

Open Street Map

Below I’ll try to explain Open Street Map and why it’s important to have various open sources for data such as maps! This post is mainly made of up excerpts from

On the Open Street Map Wiki page OSM is defined as “the project that creates and provides free geographic data and mapping to anyone who wants it. Most maps you think of as free actually have legal or technical restrictions on their use.”

Essentially this means that OSM is Wikipedia for maps where any user can add and edit maps plus the data is freely available for anyone to use (commercial or non-commercial).

 How it works for mappers:

A mapper creates an account with The using the Edit button then gets presented with two options:

  • Edit with Potlatch 2 –an in browser flash based editor (easiest to use for new users)
  • Edit with Remote control – a java based desktop editor (bigger learning curve and slightly more technical)

Screenshot of Potlatch 2: Flash based Map Editor. You literally trace the Arial imagery onto the map.


There are a variety of forms of gathering data for OSM(more details here):

  1. GPS – This is currently the most common way of gathering data for OSM, and often preferred or even essential for collecting the initial geometry of roads, paths and other ways.
  2. Local knowledge – Perhaps the best source of data is when you simply happen to know the area very well, and thus for example the names of the roads, shops etc. If the basic road layout is already present, you often don’t need any technical devices and can start straight away.
  3. Tracing maps using Aerial imagery (imagery mainly provided by Bing Maps under agreement)
  4. Photography or drawings
  5. Data may already be collected that requires people to convert it into a map. See local and global mapping projects.
  6. Seeing mistakes in a map and fixing them. There are a number of Quality Assurance tools which can be used to find problem areas.

Who cares?

An abridged version of the FAQ page on the OSM Wiki is below.

Why don’t you just use Google Maps/whoever for your data?

Because that data is copyrighted and owned by multiple organisations like the Ordnance Survey. Google/whoever just licenses it. If we were to use it, we’d have to pay for it. There’s also the potential that Google could introduce adverts etc in exchange for using their maps.

Who owns OpenStreetMap?

You do. The data and software is owned by you, the contributors.

Compare OSM and Google Maps side by side.

Who Uses OSM?

The growing list of names now includes Foursquare, Wikipedia and Apple (though there’s some debate over just how much OpenStreetMap data Apple uses in its glitchy maps, as it also lists TomTom as a provider). Craigslist also chose to use OSM for its own new built-in maps views, but never used Google to begin with.

In summary

As a user of maps, I hadn’t really given it much thought before now but now that I have been learning about the differences in the technologies I think it’s important and great to have an open source map data alternative which is freely available to people and  commercial programmes alike.

 Posted by at 10:36 am

Annual Event – Notes

 Uncategorized  Comments Off on Annual Event – Notes
Feb 062012

Here are my notes from the annual event. They kind of make sense to me but may not make sense to you….

Kerri- Anne Ellis – Pirata

Have a look at Kerri-Anne Ellis website.

Pirata is a digital production agency.

Look up/learn more about:

  • Net beans – dreamweaver
  • Tower – Project management
  • Media Queries
  • Eloquent Javascript – Book

Industry Trends:

  • Facebook – possibel to charge 30k plus for facebook tab
  • Mobiles – responsive webs design
  • Modernize : HTML5 , HTML Canvas
  • jQuery – learn javascript first, jquery mobile, full frontal JavaScript conference

Twitter – Sarah Parameter – good person to follow and also worth following people on her list.


Rob Hawkes – HTML5

Websites to look up:

Favourite HTML5


  • header
  • sections
  • aside
  • nav
  • article
  • footer
  • figuere
  • fig caption
  • mark
  • time


  • Basic client-side validation built in
  • Calendar and colour have been added
  • progress, meter, output


  • GPS
  • WiFi Signal
  • IP
  • Search based

Additionally – 

  • History API for back button action if using Ajax
  • Full screen API (can’t use keyb input due to security)
  • Canvas – 2D graphics platform


Check out – 

  • David Siaasndros
  • Hello racer – Web GL
  • Rome – demo for google chrome
  • Popcorn.js – documentary#
  • Audio responsive
  • Websockets
  • Device API
  • Media capture
  • Web NFC API
  • Web vibration
  • Node.JS
  • Interactice Media in Bournemouth
  • Header groups

Chris Mills – W3C and Web Desgin

  • Web Standards Project
  • Silverlight

The Web Native – Andy Hume and Paul Lloyd

  • Media queries – but design for all not seperate
  • Responsive = access to all
  • REST (representational State Transfer) – read the guidelines – doctorate/wiki page
  • DRY – don’t repeat yourself
  • Flexible Grids and fluid images – Ethan Marcotte
  • Content should not depend on design but design should depend on contecnt
  • Micro-copy – error messages
  • Patterns not pages
  • Deliver system/ framewok
  • Yahoo graded browser support
  • Responsive Images

Richart Rutter – Fontdeck

  • Subliminal professionalism
  • Symbols
  • Ligatures
  • optimise legibility
  • kerning
  • font-linking – woff

Fonts used:

  • Aston Martin Hermann Zapf’s Classico
  • Adelle – 6 different weights
  • Bliss – truephone
  • folio- widths (Nike better world)
  • Open Type Fonts
  • Discretionary Ligatures
  • Lining numerals – caps
  • old style numeras
  • Proper small caps (use)
  • Ampersand – web typography conference
  • Trilogy font face
  • Hyphens
 Posted by at 1:49 pm

Small Business Website project – reflections

 Uncategorized  Comments Off on Small Business Website project – reflections
Dec 072011

So reflecting on our small business project websites I found that sometimes there was a large learning curve around certain elements. I certainly struggled with the floats, as I would traditionally have used tables, and getting them to work in the way that I had wanted. After much playing around with them on several occasions I hit a wall and it was only after further text readings that I found out/realised what I had done wrong. The problems that I experienced though will stand to me as I will now know how to avoid them!

I also found it important for me to get the right balance between the visual elements and the text elements even while it is    in progress. I found when putting this site together I decided to leave the images until last. I did this as I wasn’t 100% sure which images I was going to use and which ones would work. In hindsight I think it would have helped me if I had selected/placed the images in the website first and worked around them.

I am still finding that the download times for the images on  my site are slow. I resized all images so that they are correct and I wouldn’t expec tthem to take so long to load at their current size. I am still not sure why this is happening and am going to investigate to see if it is the server that the files are hosted on.

 Posted by at 9:54 am

Bad & Good Typography

 coursework  Comments Off on Bad & Good Typography
Nov 082011


I’ve decided to start with the bad news and there is quite a bit coming from the bouncy castle industry. Some examples below.

This website typography is difficult to read, inconsistent. When the web page loads the top logo does a 3d swirl which is terrible. Behind some of the  text there are drop shadows which do nothing for the readability or tone of the text. The telephone number on the top weaves around a red star! All in all this is incredibly bad!

Although this site mainly uses verdana it uses 6 different colours and sizes of the text. I think this would probably be fine if there was a logical structure to their font use but this does not seem to be these case. This website also has the scrolling top banner with a lot of text at the top which it difficult to read.

The website fonts used for the logo on this website vary. On one section they have a static image and then they have a rolling set of lines which create another logo image which is difficult to read. Although the font that they have chosen is quite standard the text disappears into the background until it is unreadable towards the bottom. Also, the person that put this website together used images in place of the body text.


I was going to continue with the bouncy castle theme for the good typography websites but couldn’t find any!

Nice clean and simple fonts which are readable and set the tone of the content well. This website is quite visual so it’s good that the fonts aren’t too attention grabbing.

The fonts used in this website display contemporary and classical and work really well for this brand and message that they are trying to convey.

The typography used on the Mama Shelter website is really great. The contrasting colours they have used draw your eye to the messages that the hotel are trying to convey. It looks like the website migh be using Javascript to pull their stylesheet through. EDIT: They’ve created custom fonts for the website and import them using the follwoing code:

@font-face{font-family:”Mama Shelter”;font-weight:100;src:url(/fonts/mamashelterthin-webfont.eot);

 Posted by at 9:27 pm

Good & Bad Colour Schemes

 coursework  Comments Off on Good & Bad Colour Schemes
Oct 312011

The Good:

Nice subtle use of colours with matching colours in the images. Red to re-inforce the branding. East to read contrasting text.

Aplle website image

Again this website uses good subtle contrasting colours which are simple yet work well.

Facebook website image

Good use of blues and contrasting colours with shadows. Branding is subtle yet distinct.

The Bad:

Million dollar homepage

I’ve included this because although the website itself has an OK colour scheme the pixels that have been purchased by the various companies are a mad wash of different colours which makes the website very difficult to look at.

Bad colour schemes

This website is very difficult to read. Although the white text on black background gives good contrast this is too much for the body text and the blue headings are terrible.

The highlighted yellow text is difficult to read and the red text on the white background is also an eyesore and then the text colours change to blue and then black so it’s confusing for the reader.

10/1/2012: found another one here:




 Posted by at 10:38 pm