On July 23rd, 2010, I attended the Front-End Design Conference; “A single day design conference focused on content, presentation and behavior“. The all-female lineup spoke to a packed room at the Hilton Bayfront in St. Petersburg, FL about branding, ideas, design, CSS, and Old Spice commercials. Sarah Parmenter even flew over from across the ocean to speak about designing apps for the iPhone. The official Front-End Design Conference site has collected links to the speaker’s that chose to share their slides. There also is a @frontendconf twitter account with ongoing discussion and a record of all the tweeting that was going on during the event.

I found the talks on generating ideas and self-branding to be the most applicable to me. Brainstorming and coming up with new ideas for a project is often thought of as a process without rules. I spent a lot of time recently with this, in trying to develop an idea for an Xbox Live Indie Game, and it can be frustrating at first. Creativity and ideas are expected to come from an unseen muse that should never be mentioned, or put on the clock. Yet many of us have to present ideas, art, and projects with deadlines. If anything, sometimes you just need to get the ball rolling. The first panel, brainstorming 101, presents some techniques for honing in on ideas and themes that I will be trying out at the next opportunity.

As a developer who dabbles in improving his design skills, I also liked seeing different design workflows. The more of the start-to-finish process I see and the more Photoshop layers I can explore, the better.

ROUGH NOTES:

Here are some rough panel notes. Several of the speakers have shared their slides online. See those for more info and some pretty visuals.

Learning to Love Ideas: brainstorming 101

• Quote- “Thinking is a skill that must be learned”
• 1888 newspaper ads are content telling a story. The future of social platforms = storytelling
• The worst thing a designer can hear is: “Just do whatever you want”. Figure out why you are doing what you are doing- the problems you are trying to solve.
• Is it better to brainstorm alone or in groups? Each has their pros and cons. Start alone (untethered thoughts in your own bubble) & then share with the a group (more experience/insight/time sinks)
  • Solo-do what works for you, drawing works.
  • Groups– set a time limit, small, stay on track, give everyone chance, don’t criticize
• Some great brainstorming ideas
  • 4 Squares – Create 4 squares on paper. Write in the boxes:
    • A – completely outlandish idea.
    • B – slightly refine and simplify the idea from 1st box.
    • C – refine and simplify box B
    • D – refine and simplify again
  • Clustering – writing ideas and words around the base idea (web diagram)
  • Mind Mapping – similar to clustering. more structured. branches. coloring. drawings? Time consuming
  • SCAMPER – questions. substitute, combine, adapt, modify, put to other uses, eliminate, rearange or reverse
  • Morphilogical Synthesis – Filling out a grid that matches creative elements & execution (see slides)
• Good design starts with a good idea

Design is in the Details

• Color psycology; Consider your audience and location (even the local area).
• Sequence of selecting colors. Base color > color scheme > muted tones > text color
• Link: Pictaculous– colors based around a main photo
• “..kind of wanted to lick the screen” – Effect of well-used ‘Times’ font
• Line-length – 45-75 chars. Line-height: 1.5em. See elements of typographic style
• Font used on plaid mania is Droid Sans (Niki really likes plaid)
• Grids can be an aid to creativity

The Art of Self-Branding

• The attendees were asked to introduce themselves to someone near them, and aftewards, to remember 3 adjectives that apply to that person.
• disconnect over branding
• You are not a unique snowflake, but you have a unique storyarc
• Immediate understanding & impressions, not what you’re saying about yourself, determine your credibility
• Speech and copy are the same. Write your web content as speech.
• Create a brand promise & brand execution of adjectives
• Watch the TED Talk “Persist through CRAP”
• Link: artofselfbranding.com

Conquer the Blank Canvas

• Link: thegridsystem.org.
• Use a layer with grids for laying out design elements
• Her early wireframe in this example uses solid colors, and is like a base for the final design
• Link: theleagueofmoveabletype.com
• Use Wikipedia commons for old free imagery. Any image from here was used as a low opacity background on this example design.

CSS Workflow by Jina Bolt

Jina Bolton – Interactive Designer at Crush + Lovely

• Links: sushiandrobots.com, artinmycoffee.com, crushlovely.com
• Use sub “layout” folder for build images to better organize.
• They use SVN (for versioning/commiting changes)
• She uses several stylesheets, separate for layout/typography/etc. (Note: I am still am unsure why all these HTTP requests are necessary when this could be in one. I think this more applies to larger sites that can easily lose their organization)
• Validation lazyness;  Many of us are guilty of this.
• Link: itsalovelyday.com
• Link: Diagnostic CSS by Eric Meyer
• Link: http://mobify.me/ – Make your website mobile

10 Tips for iPhone User Interface Design

Sarah Parmenter – Designer and Founder of “You Know Who”

• How your app is built:
  1. Custom app
  2. Web-only app – e.g. dribble
  3. Hybrid app – e.g. jQTouch
• Pre-composed takes off the default gloss on the icon
• Types of Apps
  • SERIOUS ENTERTAINMENT, App is serious, and the entertainment is inside
  • Utility- used for 30 seconds or less
• App functionality walkthrough- hierarchy
• Spotlight icons forgotten
• Apple brownie points for a visually rich landscape mode,
• Nice design example showing the base colors, to the final design: Specific elements improving are text highlights, tactile bgs, subtle shadows, high gloss finish, clean crisp icons, subtle gradients, custom icons
• Pricing UI design-
  • 1 working day = 2 complete screens on average (1 to 4)
  • One Fee for UX, and UI wireframe. 2nd fee for ui design and docs, 3rd final fee for Photoshop files
• Appstore Pitfalls-
  • Use purely the Apple SDK to avoid issues
  • Don’t use apple icon/imagery,
  • Don’t use Apple trademarks

Fuel Your Brand

Adelle Charles and Fuel Brand Inc.

• Group participation; word, phrase, thought association with various well-known brands.
• This set of associations and adjectives is often inconsistent with the company’s own personal ideas of what they are, and what they want people to see them as. Some were laughable. (Note: This was getting interesting..I was hoping to hear more along these lines)
• Talk turned into more audience participation, to come up with a brand. A bit difficult to brainstorm with this many people at once.

It was a great event, and I look forward to seeing more happen with the web community in Florida. This post is launching with my new personal and professional hybrid blog where I’ll be posting code, tutorials, rants, and the stuff that Google doesn’t find so easily (for your benefit).