Category Archives: Travel

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

 

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’.

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.

swag

At An Event Apart – Austin 2013, Karen McGrane shared some interesting facts and statistics on mobile web usage and her thoughts on disruptive innovation.

Here are my take-aways from the talk:

  • Some will say, “Why would anyone want to do ____________ on mobile?” It could be something like, do your taxes, apply for a job, etc. This sort of question limits us and discounts the fact that many of the world’s developing countries, poor and minorities can only access the Internet from a mobile device.
  • 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
    • Examples of disruptive innovation include:
      • large, high quality furniture-sized radios vs smaller plastic radios
      • Offset printers vs desktop printers
      • DSLR camera vs smartphone camera
      • Kodak (bankrupt) vs Instagram (sold for 1 billion)
      • Desktop Internet vs mobile Internet
      • 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
  • The mobile-only user – someone who only accesses the Internet through their mobile devices
    • 45% of low-income people
    • 45% high school students
    • 60% Hispanics
    • 50% young adults
    • By not making the web mobile-friendly, we make a second-class Internet for people who might already feel like a second-class citizen
  • “Browsing the web on mobile can sometimes be like reading the web through a toilet paper roll” —Karen McGrane
  • There is no such thing as ‘writing for mobile’, there is just good writing. If it’s good enough for mobile, it should be on your regular desktop website.
  • Good content transcends platform
  • Responsive design won’t fix your content problems
  • Don’t ask, “Why do that on mobile?” Ask, “What else can we do on mobile?”

At An Event Apart – Austin 2013, Ethan Marcotte shared his thoughts on how our conversation about enhancing the web incorrectly centers around the map (people from different locations) instead of around the territory (people of similar demographics). Here are my take-aways from the talk:

  • Responsive design consists of three things: a fluid grid, flexible images, and media queries
  • A fluid grid is defined as target ÷ context = result. This is a formula for translating a fixed width layout (from Photoshop) to a fluid, percentage-based layout on the web.
  • We should be designing a layout system – just like Samantha Warren said in her talk.
  • We should use media queries to defend the integrity of our design.
  • The map is not the territory – meaning all people in one particular locale have widely different access to the web.  A physical location on the map can’t be easily categorized as having the same access to computers/internet.
  • Because the map is not the territory we need to design for reach (meaning faster loading websites)
  • In Africa, there are a majority of people who only have access to the internet from a mobile-device.
  • In fact, among minorities, the poor, and the developing world; mobile-only internet access is the main-stay.
  • Moreover, the developing world will soon overtake the developed world when it comes to mobile-use.
  • The biggest take-away for me: 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.

At An Event Apart – Austin 2013, Luke Wroblewski shared his thoughts on how we should be designing for mobile creation. This means – how should we build web forms and interactive websites that take into account the user’s habits/posture when using their device.

Here are my take-aways from his talk.

  • The ‘mobile moment’ is where your mobile traffic exceeds your desktop traffic. Facebook recently reached this ‘mobile moment’
  • Most mobile use is in houses, not on the go
  • Ergonomics is now important for touch devices, since the mouse and keyboard barrier are gone. This means how we design the website/app should take ergonomics into account.
  • “It takes big changes to go small” – Tim Cook, Apple CEO
    • This means the mobile experience should have a focused and clear flow.
  • “Just in time education” is best when showing tips on using the website or app. This means only showing tips as the action is being taken. Avoid showing a full how-to guide up-front.
  • The answer for the debate between native apps vs mobile web is – They should both good for their own strengths.
    • The ideal world would utilize cross device usage – so you can pick up where you left off – think reading books on Kindle, using Chrome for browsing on various devices, that remembers what you viewed/searched

My summary:

As I begin building websites for mobile, I need to research and test different ways that are ergonomically correct for users to interact with the device. This involves how large to make buttons, where to place them on the screen and much more.