Category: Typography (page 1 of 3)

Typography is the art and technique of arranging type. The arrangement of type involves the selection of typefaces, point size, line length, leading (line spacing), adjusting the spaces between groups of letters (tracking) and adjusting the space between pairs of letters (kerning).

10 considerations when designing for mobile

This is the first 10 steps to take your mobile design skills to the next level

 Watch the animated version here

10 Considerations For Mobile DesignWhen designing for the desktop you can consider the end-user environment, when designing for print you can picture where the magazine will be read but when design for mobile the end-user scenarios are so varied and so far ranging that todays savvy mobile designer needs to develop an entirely different skill set.

Mobile Meet Up - Glassblowers in London's SohoThis is the edited version of a presentation I gave at Mobile Meet Up on Tues 27th Sept about ‘10 key considerations when designing for mobile.  I must stress this doesn’t mean there are only 10, in fact it’s the opposite, there are many more considerations. But here are my top 10:

1. Real Estate


10 key considerations when designing for mobile

Whether you coming from a desktop background or from advertising the canvas size you have to pay with is drastically reduced on the mobile environment.

Over the years the relative screen size difference has increased. The difference between the smallest (128 x 128) and the largest (800 x 480) is now a factor of 23. That means the largest screen is 23 times bigger than the smallest one.

2. Design with distraction front-of-mind


10 key considerations when designing for mobile

Continue reading

UX / UI Tools – Everything you’ll ever need

Sharpen your toolbox

To provide a quality UX service  for companies small and (very) large you need to supply yourself without the right kit. Once you’ve gone beyond the usual suspects (MacBook, dual screens, sketchbook, etc) there come the need for a current and useable digital toolbox.

Here I have attached the necessary downloads to get you moving. This includes, by far, the most popular tools you’ll need:

As with all edge cases, you may be asked to design an interface for the next generation Smart TV, that is unusual and isn’t included here. This is for you thousands of UI designers of iOS and Android apps and mobile web interfaces. You know, the ones for the masses.

Mobile GUI PSD

The first of the big two

There is a difference between Froyo, Gingerbread and the 4.2 Jelly Bean. At the moment this Jelly Bean PSD is my favourite. Download here: 37.8Mb many layers

Android_FroyoGingerbread_GUI_PSD2

Your slice of Apple pie

I don’t claim credit for this, please thank Teehan + Lax. These guys are genius and have provided the best GUI PSD. See for the originals:

Downloads | Teehan+Lax

www.teehanlax.com/downloads/
iPad Retina GUI PSD

The 9 slice rule

The professional wireframers choice

Icon Templates

iconTemplate

 

This is very so useful.

If you find yourself spending hours ‘pushing pixels’ about while trying to downscale and upscale icons for various screen sizes and platform, then you’ll love this. Standardise your icon palette from the largest (256px) to the smallest (32px). With this template you can design once and simply Save for web by halving the pixels each time i.e. 128px, 96px, 64px, 32px and finually 16px (I wouldn’t go smaller). It like playing darts, you can’t throw an out-show from an odd numbers. Same for Icon Design, you can’t half a pixel, so keep you designs tight and within this template

Icon-Template-124px.psd

Peaked your interest?

This is but part of a selec­tion of design information rus­sell­webb­de­sign gen­er­ated for the creative community out there. Please con­tact us fur­ther to dis­cuss if your brand really wants to ben­e­fit from the new mobile channel:
info@russellwebbdesign.co.uk

If something has peaked your interest. Please leave a comment below.

Branding an iPad Casino App

1.0 Aims and Objectives

To produce the best-in-class iPad and iPhone App for playing slots and table games.

Recently I was involved in conceptualise and leading the UI for a iOS casino App for both iPhone and iPad.  I’m not going to detail all design decisions here but walk you through my perspective on why branding for this product is so important and why the decisions made differentiate it enough to stand-out in what is already a fiercely competitive and crowded marketplace.

Continue reading

Low fidelity prototypes

Why is this basic process, still the best?

I’ve made a few assumptions here, first… you work in UX. Second, you’re familiar with Agile and third, you haven’t much time so I’ll keep this brief. Straight to it, here is a couple of the main advantages of low fidelity prototyping:

  • Get better and more honest feedback
  • More involved collaboration
  • Make the cost of mistakes cheap, not expensive
  • Refine the page flow, not the pages
  • Figure out the interaction design rather than the visual design

lowFidelity-VersionControl

Continue reading

How brand identity works

Integrated brand identify both help reputation and consumer awareness. I was tasked with conceptualising a strong brand identity for a new Russian hedge fund. This involves developing routes that generated the tone, style and flavor of the brand across a 2D and 3D environment. This includes, but is not limited to;

  • color
  • type
  • photography/imagery
  • logos
  • design grid
  • Signage

Here is how I did it;

Concept 1 – New Dawn – A new today

Aspirational. That’s all it is. Clients are looking to dream, and at a product discovery level this is your job, as a creative to deliver that dream.  So, here I delivered a fresh concept concentrating on the business concept of a new start, symbolising both the birth of a new identity and the potential fresh satrt of new ‘start-up’ customers.

RenaissanceCredit_HIQuality_Page_01

Logo type and logo mark

RenaissanceCredit_HIQuality_Page_02

Outdoor campaign

RenaissanceCredit_HIQuality_Page_04

Merchandising collateral

RenaissanceCredit_HIQuality_Page_05

Stationery suite

RenaissanceCredit_HIQuality_Page_06

Concept 2 – Money is here

Employing a mechanism that symbolised the collective is a popular brand identity technique. Both companies and individuals want to be re-assured that they either have there team of their financial institution backing them. The clever designer should also include a graphic device that also contrasts this, as unique-mess and individualism is also important to both large businesses and SMEs.

RenaissanceCredit_HIQuality_Page_07

Logo type and logo mark

RenaissanceCredit_HIQuality_Page_08

Directional wayfinding

RenaissanceCredit_HIQuality_Page_10

Merchandising collateral

RenaissanceCredit_HIQuality_Page_11

Outdoor campaign

RenaissanceCredit_HIQuality_Page_12

Concept 3 – I wish

Dreamlike concepts that play on hopes of what could be are always useful graphic motives when building a potential brand ID.

RenaissanceCredit_HIQuality_Page_13

Stationery suite

RenaissanceCredit_HIQuality_Page_15

Outdoor campaign

RenaissanceCredit_HIQuality_Page_16

Exterior signage

RenaissanceCredit_HIQuality_Page_17

Promotional material

RenaissanceCredit_HIQuality_Page_19

The ABC approach

When designing essentially without a brief, what I call the ‘pure design’ phase, an intelligent designer should deliver three contrasting concepts. Clearly, it’s the designer job to deliver the client’s requirements, but it’s also their job to push the boundaries. So my tip of the day is, when presenting deliver and push then crescendo on your personal favourite and see which is the eventual favoured route – you’ll be surprised!

Get in touch

This is but part of a selec­tion of design articles Russell Webb Design gen­er­ated for the creative community out there. If something has peaked your interest, please leave a comment below.

Mobile best practice for registration – Put the users needs before technology

User Registration on Mobile

Watch the videoWatch the animated version here

I have recently been involved in both high-level concept generation through to territory specific text changes in the exiting world of User Registration. These are my top 5 tips to help you streamline your process or find some inspiration.

1. Do not turn-off your client

Very early on you begin to realise that you, as a UX designer answering to Business and shakeholders alike, should avoid providing a dry and labour-intensive solution to what is a tedious process. This will inevitable put off, or turn off, potential new customers from the start. So, as they walk through your virtual door, try to present a broken-down and achievable process where they can see the light at the end of the tunnel. Don’t forget : Break your offer into bite-sized chunks

Regulations possibly dictate that your customers will need to supply certain information. If so, have them supply that information up-front. That way you, as a caring and customer-centric company can temporally capture that info and call them back should they drop-off. Then you can ask ‘Is everything allright? Can we help you further with your registration?”

Continue reading

Marketing your App through the channels

How to marketing a brand new digital product

This is the challenging part of any marketing brief. You can target your Digital Tribes, whether they be Early Adopters or true Laggards, one sure-fire way is through traditional streams. Using traditional media is a concrete method of new product promotion and should not ignored. Remember: Print is NOT dead.

Building scenarios

Building scenarios

An effective method fo marketing a product to place a customer into the shoes of a typical user.

"I've got a secret but I can't tell anyone"

This opening statement defines a need state for this privacy service. Then you explain the scenario and how the product can benefit that customer. If you can translate this into an attractive case-study, then you have a winner.

Continue reading

Protected: icanhaveit.com – Site Evolution to Revolution

This content is password protected. To view it please enter your password below:

The perfect cycle hire companion tool

Watch the video See ‘Barclays Bikes Android and iPhone App’ Video here

Create the perfect companion tool for the Barclays Cycle Hire scheme

Aims and objectives

  • Launch an application (on Android too) with better functionality and usability than all competitors.
  • Amplify Barclay’s dedication to innovation.
  • Make a positive contribution to London.
  • Promote active lives – and create business benefits from this.
  • Promote a sustainable and environmentally friendly mode of transport.

Differentiate the app through strong Barclay’s brand presence

From Boris bikes to Barclay’s bikes… ensure users are aware this is the official application and be the greatest Cycle Hire App ever

Barclay’s Cycle Superhighways are new cycle lanes into central London from outer London

  • Improve cycling conditions for people who already commute by bike
  • Encourage those who don’t to take to pedal power and keep fit
  • Help cut congestion
  • Relieve overcrowding on public transport
  • Reduce emissions.

Key ‘Must-Have’ features

  • Launch with iPhone and Android applications
  • Integrate cycle hire and cycle superhighways
  • A focus on enabling cyclists to ‘do and discover’
  • A focus on London as a cycling community
  • Core functionality around location and journeys
  • Additional functionality – a ‘must use’ application

Here are just a selection of Android screens

It was important that the growing Android community felt included as iOS is seen as the dominant player in this market. An entirely different UI was developed that benefited from Androids unique functionality. Widgets were developed and integrated features included to aid the experience.

Cycle Finder

Find the nearest docking station right now

  • Locate me (nearest docking stations)
  • 2D Map view (Google maps)
  • Satellite map view (Google maps)
  • Augmented Reality view
  • List view

Superhighway

Barclay’s Cycle Superhighways (BCS) are cycle routes running from outer London into central London. 

  • They give you safer, faster and more direct journeys into the city.
  • We’ve improved road surfaces and improved junctions for a more comfortable ride, and each Superhighway has a clear, unique identity, with blue surfaces to increase driver awareness.

 

Watch the videoSee ‘Barclays Bikes Android and iPhone App’ Video here

This is but part of a larger proposal russellwebbdesign designed and conceptualised for Barclays Capital. In this case it was a complete App Design, from providing the creative at pitch level to final delivery. To discuss what your brand really wants from mobile, contact us on: info@russellwebbdesign.co.uk

Older posts

© 2017 Russell Webb Design

Theme by Anders NorenUp ↑