My design process wasn’t invented this week, or just to make good copy for this web site. It is process that has evolved through my work with different clients and teams. Like good design, it’s not flashy or rigid; it is clean, functional, and flexible.

I use familiar tools to do radically new things, and often I use brand new tools to improve on my ability to deliver familiar needs. We can skip steps or expand the process, depending on the needs of the project and the human beings I am working with. In summary, here’s how I work:

1. Research

The beginning of a project includes google searches, interviewing stakeholders and or programmers, discussing current analytics and research. Also the development of a design brief if there isn’t one already.

Even after initial meetings to discuss the project and the company I still won’t know enough to really design an effective logo or UI. That’s where a mood board or scrap pile can come in. Google searching and Wikipedia reading for keywords and images can be put together to develop good ‘landscape’ of the industry or market the company is in.

For web and UI projects I’ll go over any user data the company has with their research or UX team.

2. Brainstorming & Sketching

After getting a good frame of the company and industry it’s good to just sit and brainstorm.

My favorite way to start a branding project is to mind map (check out David Airey’s Explanation). I have gotten quite a few interesting ideas for logos and very visual designs from this technique.

Anything from weird and esoteric to simple and commonly used UI layouts can be sketched out and discussed with development to see if that might be a good path to solve any UI problems. If concepts are needed for something fresh and new, a sketch can lead to perfectly fitting ideas way before I touch any production applications.

3. Production

Current tools I am using: Adobe Illustrator, Indesign & Photoshop. Sketch.app has been taking over for Photoshop for mobile and web UI production though. I use Espresso, LESS and WordPress for web production.

4. Feedback

I try to present all my work to stakeholders and not just sent over a pdf. I discuss the visual decisions I made. It always refers back to the Research and Brainstorming phases to rationalize my work. I try to present 2-3 options or variations based upon the strongest ideas to come out of the brainstorming phase.

5. Revision

After web or UI feedback, I will make whatever changes are necessary for development and continue the conversation. For logo/branding work a version is usually picked and revised.

6. Handoff

With branding, logo or identity work, I hand off vector files of different resolutions. I also create print ready work if anything needs to be printed.

Website mockups are sent over and are coded up, if it’s on WordPress I’ll start coding up the custom theme.

Posted on: October 1st, 2013
Author: Laurence Orr

Posted in: Writing

Respond to this post »

CrowdedFilm is a collaborative Facebook game where the player can make mashup films and have them voted on by a film making community and even his/her Facebook friends.

CrowdedFilm Logo

New Logo

CrowdedFilm Logomark CrowdedFilm Editing Page

Film Editing Screen (shown inside Facebook environment)

CrowdedFilm Playing Page

Film Screen (shown inside Facebook environment)

Trying to make film editing easy and fun isn’t a simple thing to do. The first attempts are what you see below. I came up with a metaphor which was to make each clip a “puzzle piece,” where the user can simply drag n’ drop clips and have them “click” together to form an interesting mash up film. One of the goals is to give the feeling of film-editing at the same time making it easy and especially fun to do.

I echoed the puzzle piece idea throughout the logo shape. Also, each color in the logo would be a transition between clips, such as: wipe, dissolve, and hard edit.

This is just initial design work, and I am sure it will evolve to a very interesting point before it gets released. I do feel a lot of branding design early in the process of User Experience is most helpful in capturing everyone who is involved imaginations.

Posted on: November 19th, 2012
Author: Laurence Orr

Posted in: Portfolio

Tags: , ,

Respond to this post »

Pipio is an iOS app that will help you recognize a bird call and tell you what bird you are listening to.

New iOS7 Design:

Last year the app had to change because of iOS7 look and feel as well as audio recognition of the bird was too difficult for our small team. After some user research and discussion the app became more about birders sharing their experiences with birds.

pipio-mobile-7-01 pipio-mobile-7-02 pipio-mobile-7-03
Startup Santa Barbara Competition Design:
pipio-logo pipio mobile pipio mobile

Startup Screen • Identification Screen • Bird Profile Screen

pipio web

Web Landing Page

pipio wireframe

Mobile wireframe showing a ‘first use’ flow

Pipio started as “Chirp”, the winner of the Santa Barbara Startup Weekend of June 2012 where I was the lead designer.

The beauty of the app is that it isn’t just recognition. It will help birders save their life lists with a ton of relevant information and connect with other birders with similar bird lists.

The local television news (KEYT) even ran a story on us.

Posted on: October 12th, 2012
Author: Laurence Orr

Posted in: Portfolio

Tags: , , , , , ,

Respond to this post »

The Core Idea Responsive WordPress Website

Responsive Web Design

Robert Teneyck was my boss at Ideocore a bunch of years ago. Robert is a damn good branding and marketing pro. I’ve learned a lot from him as I’ve worked with him on many projects. We’ve developed a good rapport together, especially building his website which is called The Core Idea.

It’s a light and clean website built on WordPress using HTML5 and CSS3. I made it responsive for most mobile devices and iPads. I also made sure all the images were Retina screen ready.

I had a great time designing it together and it was even was a fun bit of code to write.

Posted on: September 25th, 2012
Author: Laurence Orr

Posted in: Portfolio

Tags: , , ,

3 Responses »