I was lucky enough to be able to go to this years Front End Design Conference in St. Petersburg. It was a great well-produced low key event and I highly recommend it to anyone in the area or willing to take a trip.

I wanted to write down my notes and thoughts on the experience, so here we go:

Matt Griffin - “I, Web Designer”

Matt Griffin, founder of Bearded spoke about his labor of love - an upcoming film he’s been producing for two years called What Comes Next Is The Future documenting web design and development. His presentation I, Web Designer talked about his experience at Bearded and showcased bits and pieces from his film.

No doubt a documentary on Web Development is cool as a retrospective on where we’ve come from but to be honest I was scratching my head a bit as to the real purpose of showing this to an audience of web developers.

The documentary was well produced so kudos to Matt although there was one interview I wasn’t thrilled about. An interviewee in the film said (I’m paraphrasing here as I don’t have the exact quote) Nothing against designers, but web-development is difficult. I agree, it can get complicated, but who are we to disparage another profession? Was this just to make us feel smart?

Smith Schwartz - “Sass for Engineers”

Okay, I’ll get off my soapbox now. Smith Schwartz then spoke on Sass with her talk Sass for Engineers. The majority of the talk was about the benefits of Sass, and being a Sass-convert already I don’t have much to add to that. However there were some specifics she mentioned that I liked:

• She extolled the virtues of naming conventions - whether that was OOCSS, MVCSS, ITCSS, BEM, BEMIT, Smurf, SMACSS - the important thing was to find a convention you like and stick with it.
• Some examples of a naming convention would be class prefixes:
  • .l-className: L for Layout - Things that layout your page
  • .m-className: M for Modules - the content - i.e an article
  • .m-className--component: A component related to a parent module, i.e. an author of an article
  • .m-className.mm-className: MM for Modifiers - So for example perhaps these are added to a featured article to make it bolder and splashy
  • .is-className: These are for state - classes that are added by javascript
• Lastly, she recommended the standard of sorting properties alphabetically since these are both read and understood by humans and computers (plus you can easily find duplicate property declarations). I’m going to be using this from my projects from now on.

Samantha Warren - “Mind The Gap”

Next was Samantha Warren’s talk “Mind The Gap: Becoming a better designer by owning your blind spots”. She told the story of how she wanted to follow the footsteps of a fellow Twitter employee and take up ceramics and how this relates to embarking on a new venture. The reality - summarized bluntly - is that when starting anything what you produce at first will suck. It’s easy to get discouraged, but the only magic trick for getting good is to experiment, build, try. She played Ira Glass’ talk on taste and talent which is absolutely worth a listen. For closure she showed off her current work at ceramics and the talk holds up - her work now is pretty good!

Sam Kapila - “How Design Research Leads to Design Decisions”

Sam Kapila’s talk was really informative and connected with me on a lot of topics in design I had been thinking about but haven’t been able to articulate. The key message in her talk How Design Research Leads to Design Decisions was to not design to follow a trend or to impress other designers, but design for your users in their needs in their context.

Stated that way it sounds kind of simplistic but I think it’s very easy to become disconnected from your users and build & design things that you think are solving a problem or connecting with people when in reality you’ve missed the mark. It reminds me of the problem Facebook faced with their Year In Review feature. The tag line of their auto-generated video was “It’s been a great year! Thanks for being a part of it.” - Perhaps for the employees of Facebook who were building the feature, but for some users their year was not great - the example from the linked Forbes article highlighted one user’s six-year-old daughter who died of brain cancer and yet her face showed up surrounded by holiday clip art.

She provided a few examples of this, namely the Hamburger menu which to some users was not read as a menu but simply as three lines and cautioned against parallax scrolling which, while neat, adds bloat and can trigger vertigo in some users.

To avoid these kind of missteps she recommends design research. When we don’t we end up following trends that may not suit the client, make arbitrary decisions, go off brand, harm the UX or insult the users. Doing the research leads us to discover the cultural, social or economic factors that may not be apparent to us, gives us a body of evidence to back up and support design decisions and gets stakeholders on the same page since they are more involved. As an example - MailChimp is known for a playful attitude but they make it a point to keep the tone straightforward for any error messages.

She provided many examples and tips for conducting design research - I don’t want to repeat these verbatim but rather highlight key points:

• Research includes background checks & history, interviews, a competitive market study - what are we and others doing right, wrong, differently - and a SWOT analysis (Strengths, Weaknesses, Opportunities and Threats)
• Interview questions for clients include “Who are you?”, “Who needs to know?”, “How will they find out?” and “Why should they care?”
• During user interviews you should be silent and simply listen
• This work will grant you a competitive advantage. “When everyone zigs, ZAG!” - Marty Neumeier, brand strategist (The Brand Gap, Zag and The Designful Company)

Finally she recommended the book Just Enough Research by Erika Hall.

Rachel Smith - “Beyond Boxes”

Rachel Smith’s talk - “Beyond Boxes” - was a great look into moving past static 2D cookie cutter sites. She started by showing off some of her work which was impressive and very experimental. Her presentation then covered the basics of how to work with canvas.

She stressed that while making canvas experiments and the kind of work that she does may not align with your day job it can still be beneficial as a learning exercise. She outlined quite a few things she learned about javascript while teaching herself how to work with canvas.

Aaron Draplin - “Tall Tales from a Large Man”

The last speaker for the first day was Aaron Draplin which was the highlight for me for FEDC. The majority of the talk was him showcasing his work and talking about his experiences finding his way into this field. His work really resonates with me as he focuses on simple clear functional designs and the sheer amount of work speaks to his incredible inspiring work ethic. He stressed that the client is first and that he will work tirelessly until the client is happy since ultimately it is them who he is designing for, not himself - a sentiment which echoed Sam Kapila’s message from earlier in the day.

Finally he made it a point to discuss the position of privilege he and other designers are in - to never take the position for granted since it’s rare to be paid to do what you love and create pixels all day. This was a great contrast to my feelings from Matt’s talk from the beginning of the conference.

Ron Edelen - “Badass Motion Design for Interactive”

On to the second day. In “Badass Motion Design for Interactive” Ron Edelen primarily showcased his work. It was impressive but the key take away was his call to use easing for animations. “YES!”, I screamed internally at that moment. He supported animations to enhance clarity and understanding and recommended against them when they detract from the experience. He also urged designers to keep their animations quick. But if you only took one of these recommendations to heart my words of wisdom would be this: EASE! For the love of all that is holy, ease!

Ethan Marcotte - “Responsive Design: Beyond Our Devices”

Ethan Marcotte, famous for his article on responsive design, focused on moving design away from being device specific and instead on to patterns. His points that were my takeaways:

• We tend to design in ideal environments. The reality is not everyone browses like you do. In the real world people browse on small screens (even smartwatches), cheap devices and on poor connections (60% of the world’s mobile connections are sub-3G).
• The design should be priority-focused: Important elements should stand out more, not prettier or design-centric elements.
• Your semantic structure - the HTML - should follow this (New technologies like flexbox’s order rule allow us to change the visual order so we no longer have to build the markup to make the design work)
• Style guides help create a shared repo for patterns and help new-employee on-boarding

He recommended a few A List Apart articles: Style Guide Generator Roundup and The Language of Modular Design along with the Ushahidi Platform Pattern Library as a style guide example. This wasn’t in Ethan’s talk but I’ve just recently ran into Atomic Docs which is another potential option for style guide generation that I wanted to mention here.

Doug Neiner - “React: Thinking State First”

Doug Neiner’s talk on React: Thinking State First was a very well thought out talk on the benefits of React as well as a primer on how to use it. I already have my ticket for the React hype train so I didn’t take any notes, but I heard discussion from my brother and his co-workers who were also attending the conference with me that React seemed impressive and worth playing around with. Welcome to the tribe gentlemen.

Greg Rewis - “Flexing Your Layout Muscles - A Pragmatic Look At Flexbox”

Greg Rewis covered Flexbox - Why it’s needed, why it’s great and how to use it. This was my favorite technical talk of the conference as I had been hearing great stuff about flexbox but had yet to play with it myself. Well, Greg Rewis convinced me - as long my project is IE 11 and up I want to start using flexbox.

I took notes but it would be more useful to simply view his slides directly. Once he posts these I will link to them here.

Amanda Cheung - “Bridging the gap between design and development”

Amanda Cheung then spoke on “Bridging the gap between design and development”. To be honest her talk seemed somewhat unfocused to me, but touched on the points that Samantha Warren brought up with her talk on the first day.

Tiago Garcia - “Lazy Loading ES2015 Modules in the Browser”

I have to apologize to Tiago Garcia who spoke on Lazy Loading ES2015 Modules in the Browser. Lunch caught up to me and his talk was heavy on code details, resulting in the perfect storm of sleepiness. To offer a critique - I would recommend less specifics on the different formats of javascript modules and focus the majority of the talk on lazy-loading. I would also keep the code to the absolute minimum as even developers get turned off when lots of code appears in a presentation slide.

Carl Smith: Closing Keynote

Last was the closing keynote by Carl Smith who took the stage barefoot and in shorts, so my interest was already piqued. He told his story of starting out in the field to where he is today. He made a good point that I had never thought of - Our field still holds on to the ideal of sharing and working together, similar to Hollywood of the 30s or today’s craft beer movement in America - industries where competitors share tips and techniques to make the whole field better. This was more industry self-congratulation perhaps but with a purpose - he was pointing out how valuable this was and making sure we don’t forget to maintain this ideal. His current work is focused on continuing to grow this.

He also touched on some important life lessons which are all great takeaways:

• It’s not about “work / life balance” but simply “life balance” - at one point his wife confessed to him that she didn’t like him anymore. Work stress was taking a toll and turning him into a person he didn’t used to be. A lesson on losing sight of what’s important.
• He spoke on his realization that everything he hated and disagreed with about his former boss he found himself doing when he was in the leader position. A lesson in perspective and remembering to stay empathic.
• He also spoke on how his company ended up working more effectively and profitable without him - A lesson on the difficulty of realizing your limitations and when to call it quits.

The best lesson, though, was embedded in how he described his eventual role while running nGen Works. An employee would come to him with a problem and he would ask them “Okay, what would you do to solve the problem?” The employee would always have some sort of solution, to which he would reply “Okay, let’s try that and see how it turns out.” To me, this boiled down to confidence and how everyone has this deep fear that they don’t know what they’re doing - that they somehow missed out on some big secret. The reality which I’ve also come to discover over the years is that there is no secret - nobody knows what they’re doing! You just have to try and see what comes out of it - same with Samantha’s ceramic classes, Rachel Smith’s canvas experiments or Draplin’s mountains of design work.

That was the key idea that I took from FEDC. You can read, study and plan forever but most of your learning will come from trying, experimenting and failing. Everyone gets discouraged. The designers/developers/artists/owners who succeed are the ones who power through it.