Uncategorized

Graphic Design Notes

Notes on Sprite

A:
display:block
Width (exacly to size of first image)
Height (exacly to size of first image)
background-position: 0 -180px; (x, y)
text-indent:-9999px;

A:hover
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
Padding

Negative margins – sometimes absoloute positioning might be better.

ul text-align:center

li display:inline

a display:inlin-block

 

http://bradfrostweb.com/

Uncategorized

Notes on Typography from somewhere!

H1 30% larger
H2 25% larger

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

Uncategorized

Design Insights # 1 notes – Responsive Design

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 trainline.com 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

http://www.lukew.com/ff/entry.asp?1392

 

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

Baselinesscss.com – 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

 

MANYMINDS

 

Chrome & Firefox portable

Blog posts on head London website

 

GRIDS

Start with girds and Nav first

Grids in frameworks can be rigid

 

Bootswatch – customise bootstrap

Skeletion CSS framwork

http://susy.oddbird.net/

SASS>COMPASS>SUSY

Mark Pilgrim

 

Ruby Installed on .???

Whencaniuse.com

HTML5 rocks resource list

Create your own boilerplate

No HTML5 on websites at present is safest

WebSockets – continuous connections

Ethan Marcotte

Luke Wrob

Uncategorized

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

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 www.openstreetmap.org. 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.

Uncategorized

Facebook for Busines

My extended Blog Post can be found here

http://www.aimeetyrrell.com/Facebook.docx

 

Uncategorized

Annual Event – Notes

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

Gerneral

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

Forms

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

Geo-Location

  • 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
  • WHATWG

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
Uncategorized

Small Business Website project – reflections

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.

Project 2

Some websites for project 2 inspiration

Sone websites for inspiration:

 

My notes:

The column on the left is the navigation as it currently stands and the new proposed navigation on the right.

 

Coursework 6

Bad & Good Typography

BAD

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

http://www.allseasonshire.co.uk/

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!

http://www.bounceaboutcastles.com/

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.

http://www.clubdecor.co.uk/TECHNICAL.html

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.

GOOD

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

http://www.wallpaper.com/

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.


http://www.smythson.com/

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.

http://www.mamashelter.com/en/

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);

Coursework 5

Good & Bad Colour Schemes

The Good:

http://www.vodafone.ie

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

http://www.apple.com

Aplle website image

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

http://www.facebook.com

Facebook website image

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

The Bad:

http://milliondollarhomepage.com/

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.

http://www.johntitor.com/

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.

http://www.stevenlim.net/

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:
http://www.fabricland.co.uk/

Sources:
http://www.webmaster-designs.com/bad-website-designs/
http://www.webpagesthatsuck.com/