Monthly Archives: October 2013

swag

Over the month of October, I recapped all 12 conference talks in previous blog posts. Looking back through my notes from each speaker and blogging about my take-aways helped me really organize my thoughts and remember all the great things I learned.

The things I heard at the conference fall into one of three categories:

  1. “Amen!” I know that already and totally agree!
  2. “Huh?” I don’t know that, and I realize how much I still need to learn!
  3. “I’m feeling convicted!” I know that, but don’t want to put it into practice. Either because it’s hard or just not fun or glamorous.

Here is the ‘big idea’ and/or lesson I took away from each of the 12 talks:

10 Commandments of Web Design – Jeffrey Zeldman

  • Stop focusing on ‘techy’ details and make your websites fun and playful – through conversational content.
  • Test everything – using Adobe Creative Cloud Edge Tools and also test your deeply held assumptions.

All of my thoughts on this talk

Faster Design Decisions with Style Tiles – Samantha Warren

  • During the design process, ask ‘Why?” in response to what they tell you, in order to get to the root of their statements
  • Ask metaphor questions like, “If your brand were a ____, it would be a _________ and why?
  • Begin using style tiles in my own design process.

All of my thoughts on this talk

Content/Communication – Kristina Halvorson

The story informs the format – think content first. My interpretation – The content informs the design

    • Require bulk of content up front and understand all content before designing.

All of my thoughts on this talk

A write/read (mobile) web – Luke Wroblewski

“It takes big changes to go small” – Tim Cook, Apple CEO

  • This means the mobile experience should have a focused and clear flow.
  • Remove extraneous bits of design and content that deters users from main purpose and call to action.

All of my thoughts on this talk

The map & the territory – Ethan Marcotte

As a web designer, I need to craft mobile experiences that ensures  that people who might feel like second-rate citizens do not also have a second-rate web browsing experience on the only device they can access the web on: their mobile device.

All of my thoughts on this talk

The Mobile Content Mandate – Karen McGrane

Disruptive Innovation = a product/service that is inferior in many ways comes out but ends up creating a brand new market of customers for their ‘inferior’ product or service

  • The connection I made and the example I can’t stop thinking about: DIY website solutions like Google Sites, SquareSpace, etc vs hiring a web designer/developer

All of my thoughts on this talk

The Long Web – Jeremy Keith

Treat navigation as second. On mobile, you can decide to only place navigation at the bottom of your site. The nav icon can just be an anchor link (#nav) to the bottom of the website, where the navigation resides. Alternatively, the navigation icon could link out to a separate page that only has nav on it – has same experience for user, but different approach for designer/developer.

All of my thoughts on this talk

Putting UI’s in Motion – Val Head

My biggest take-away was that I haven’t been really taking advantage of CSS Animations.

All of my thoughts on this talk

Preprocessing is for Everybody – Chris Coyier

  • CSS is meant for computers to understand – so lets make it more productive to write it by preprocessing!
  • I need to begin looking into and trying out SASS and proprocessing

All of my thoughts on this talk

Beyond Play – Joshua Davis

  • When you engage in creative play, you discover the unknown.
    • For example, I recently learned that 3M has a ’15 percent program’ that allows their employees 15% of their time to research and investigate their own ideas. As a result, products like scotch tap and sticky notes were invented. More about this idea here.
  • If you never engage in creative play, you are only going to replicate others’ work, rather than truly innovating.

All of my thoughts on this talk

What Clients Don’t Know and Why It’s Your Fault – Mike Monteiro

  • We have to understand that most people won’t buy design in their life and so the lack of understanding toward our industry should be understandable.
  • Communicate with clients like doctors communicate with patients.

All of my thoughts on this talk

It’s a Great Time to be an Experience Designer – Jared Spool

  • Innovation is about combining existing inventions in a new way:
    • think Instagram, which combined taking photos with social networks
    • think Apple’s support “Genius Bar”, where they combining appointments with customer support

All of my thoughts on this talk

Hilton Lobby

At An Event Apart – Austin 2013, Jared Spool spoke about why it’s great time to be an experience designer. Here are my take-aways:

  • Design = The rendering of intent
  • Imitation is:
    • less expensive
    • less risky
    • where design is not valued
  • On the flip side, innovation is:
    • more expensive
    • more risky
    • where design is valued
  • Businesses win when it is intentionally innovative/designed. Great business models are intentionally designed.
  • Design is about the visual business
  • Innovation is not about invention, it’s about adding value
    • Design for experience – this way it can be mapped/measured/designed
  • Innovation is about combining existing inventions in a new way:
    • think Instagram, where they combined taking photos with a social network.
    • think Apple’s support, aka Genius Bar, where they combined appointments with customer support.
  • Experience design = rendering intent within the gaps
    • When designing an experience, be intentional in the areas where others get it wrong. Just like Apple did with adding appointments to customer support.
  • The best designers are:
    • good story tellers
    • good critiquers
    • good sketchers
    • good presenters
    • good facilitators
  • How to become a great designer (or as he calls it, “a design unicorn”)
    • train yourself
    • practice your new self
    • deconstruct as many designs as possible
    • seek out feedback (and listen)
    • teach others

 

Design is a Job

At An Event Apart – Austin 2013, Mike Monteiro spoke about how it’s often the designer who’s at fault when the client requests something that makes designers want to role their eyes. The whole talk was full of really awesome quotable bits of advice. So these take-aways are basically all of those quotables:

  • Mike Monteiro wrote, Design is a Job, which I’ve read and highly recommend to any designer struggling with how to work successfully with clients.
  • We have to understand that most people won’t buy design in their life and so the lack of understanding toward our industry should be understandable.
  • Selling design is part of our job (don’t just email the mockup and hope for the best)
  • Don’t ever work for or with someone you don’t respect
  • Stop waiting for an invitation to do your job
  • Clients don’t know how to read your portfolio, the work doesn’t speak for itself.
    • You don’t sell the suit, you sell the service
  • A designer is the sum of their problem-solving and communication skills
  • Referrals are awesome – every job you do is a sales pitch for the next one.
  • A request for proposal (RFP) is a client saying “I’m scared”.
    • Ironically, the work in your portfolio that the clien likes is a result of a specific design process and research that involves more than just giving them a quote. That great work they like started with a relationship with those previous clients where you researched and talked through what they needed, not merely gave them a quote for work.
    • When asked to design something as part of the pitching/proposal process, the best answer is “I don’t know, but I have a process that will get to the solution”.
    • Show the client they are in good hands
  • Having an itemized list on invoice helps clients understand what they are paying for. It takes the mystery out of the client/designer relationship.
  • No one is born a good client… or a good designer
  • Communicate with clients like doctors communicate with patients.
  • The way to be a better designer is to help our clients be better clients.

Joshua Davis

At An Event Apart – Austin 2013, Joshua Davis shared his thoughts on why work and play should be the same, but for many, they are opposites. Here are my take-aways:

  • Joshua Davis is a generative artist who uses computer code to generate repetitive patterns and designs that are highly detailed and pretty amazing – See his work here. He designed the face of Watson, the robot who played on Jeopardy.
  • Many adults say that the opposite of work is play
  • Kids say that the opposite of work is: boring/hard/home/lazy. Probably because kids know their parents ‘go to work’ and when they aren’t at work, are probably at ‘home’, or are ‘lazy’, etc.
  • Joshua thinks that work and play are synonyms not antonyms.
  • When you engage in creative play, you discover the unknown.
    • For example, I recently learned that 3M has a ’15 percent program’ that allows their employees 15% of their time to research and investigate their own ideas. As a result, products like scotch tap and sticky notes were invented. More about this idea here.
  • If you never engage in creative play, you are only going to replicate others’ work, rather than truly innovating.
  • “The type of work you make is the work you will get hired to make” — Joshua Davis
  • “Someone will hire you to be you… and isn’t that great!?!?” — Joshua Davis
  • “Success means going from failure to failure without losing your enthusiasm  — Winston Churchill

 

$5 logo from Von Glitschka

Once upon a time, this very popular illustrator/designer named Von Glitschka created a website to sell logos for $5. The kicker is that he would only spend 5 minutes on each one and there would be no revisions allowed. It was done out of frustration from what he calls ‘cheap a** clients’.

However, for fans of his, this is a great way to have a cheap piece of ‘art’ from the man himself. After some conversations about his $5 logo website with Jamie Carroll, we came to the conclusion that it was pretty genius.

And.. what do you know? I got one for my birthday, from Jamie.

For an undetermined amount of time, this $5 logo has replaced my prior logo on my personal website/blog (desktop version of the website/blog only).

Chris Coyier - An Event Apart Talk

At An Event Apart – Austin 2013, Chris Coyier shared his thoughts on CSS Preprocessing, specifically SASS. Here are my take-aways:

  • CSS as a language is not as ‘abstracted’ as it could be, and so preprocessing serves to solve this.
  • Preprocessing involves writing variables, mix-ins which are sets of variables, extends, and other short-hand ways to make writing CSS quicker. Rachel Nabors explains variables, extends and mix-ins here
    • also involves nesting css styles in a more logical way
  • Some additional software can help with writing CSS3 in SASS, such as Compass and AutoPrefixer (a postprocessor)
  • Ways to convince your team:
    • Preprocessing simplifies the process
    • Allows for consistency
    • Makes CSS prefixes a breeze
    • Makes your site faster
  • How to transition to SASS:
    • CSS files are technically valid SCSS files so you can start renaming files to .scss and import them into a global.css
    • Begin by replacing common colors with variables. Just like this.
    • Also begin by nesting a related thing. Just like this.
    • Learning the SASS syntax really takes about an hour
  • Final thought: CSS is meant for computers to understand – so lets make it more productive to write it by preprocessing!
    • Earlier this year, I signed up for Chris Coyier’s video-learning section of his website called, The Lodge. In it, he has a video series where he redesigns his blog, css-tricks.com. He uses SASS throughout and it was really eye-opening to see it in action throughout the full redesign process. Besides learning SASS techniques, I picked up 100+ new tricks/tips for writing html/css and how to approach website layout (especially how to troubleshoot issues). It’s great to see how another developer builds things and ‘compare notes’.

If you never want to be criticized, for goodness’ sake don’t do anything new.

—Jeff Bezos, Amazon CEO

Minimalism is not a lack of something. It’s simply the perfect amount of something.

—Nicholas Burroughs

CSS Animations - Val Head

At An Event Apart – Austin 2013, Val Head shared with us her knowledge of CSS animations. Here are my take-aways:

  • A few animation concepts to remember – all of which are CSS ‘easing’ options:
    • slow in / slow out – gives an organic/natural feel
    • follow through – where object will go past end point and come back – also a natural easing option
    • anticipation – where object winds up or sling shots into motion – this is opposite of ‘follow through’
    • cubic-bezier – where the object’s easing can be keyframed any which way you would like
      • Ceaser tool for easily creating these keyframes
      • You can use the same keyframes with different animations for different results
    • squash/stretch
    • arc – moves in Z-space (feels 3-d)
  • Where are the best places to add animation?
    • When hiding or revealing content
    • For subtle cues or clues
    • For demonstrations of products or services
    • For surprise and/or delight
  • 2 Deadly Sins!
    • Don’t require user to wait for transition/animation if they make a mistake
    • Don’t make your animations too slow. If you are wondering if your animation is too slow, it probably is.
  • Swapping classes with JavaScript is powerful when used with CSS to add animation – especially for play/pause of animation.
  • If your animations or transitions include critical content, be careful and always test it on devices/browsers.
  • My biggest take-away was that I haven’t been really taking advantage of CSS Animations.

An Event Apart

At An Event Apart – Austin 2013, Jeremy Keith shared his thoughts on new HTML5 features to be using as well as how he likes to build for short and long timescales.

Here are my take-aways:

  • Treat navigation as second. On mobile, you can decide to only place navigation at the bottom of your site. The nav icon can just be an anchor link (#nav) to the bottom of the website, where the navigation resides. Alternatively, the navigation icon could link out to a separate page that only has nav on it – has same experience for user, but different approach for designer/developer.
  • Why do we make password fields display as dots? This is just faux-security and doesn’t add any extra security, except from someone looking over your shoulder?
    • Jeremy Keith challenges us to make the password field real text by default and give the option for hiding it with the click of a button. This approach would increase the success-rate of logging in – which increases usability.
  • “Every user is a non-Javascript user while the website is still loading” —Jeremy Keith
    • Because of this, our progressive enhancements should include both CSS and Javascript. Javascript failing should not stop your website from loading fully.
    • Try conditional loading for 3rd party services like social buttons and embedded content.
  • Think in terms of performance load time as well as in terms of the many years your website will be used for. Short vs long time scales.
  • In the long-term, image formats may not stick around, but text formats will.
  • “The cloud – what a bullsh*t word” —Jeremy Keith
    • I didn’t know where he was going with this, but I found a blog post where he describes further about how the term, ‘the cloud’ just encourages ignorance about where things reside on the web. He compares it to Miasma theory which said that some diseases were caused by ‘bad air’, but the theory was later replaced when germs were discovered.