Mixin’ at Mixin Conf 2016 💜
I spent Friday in Perth at Mixin Conf. I had such a great time listening to all the speakers and chatting to people in the community. I also got to meet some of the people from the Mixin team who were actually pretty stoked to have someone visiting from Sydney and also be so pumped about the conference. :D
I can’t remember how I found out about the conference but I did submit two talk proposals when I found out about a call for proposals. I must have seen it promoted on Twitter or somewhere else. I was unfortunately declined but I tried not to get too down about it – it turns out there were a heck of a lot better speakers in the end, some international and very well-known, and they were definitely the better choice. ;) Because of that, I still very much wanted to attend the conference. I missed out on early bird tickets because it was pending a decision from my company (they kindly paid for the conference and flights!) but didn’t want to miss out on the conference.
And I am so glad I attended because it was not only a lot of fun but the speakers’ talks were amazing, educational and eye-opening. This is only my second conference but it has set the bar pretty high. The Perth web community is very close-knit, and I think Mixin really showed that.
For some reason, I had woken up at 3:30am and unable to go back to sleep, so I ended up going to the gym around 5:30 and grabbing breakfast at Flora & Fauna cafe before the conference. We were treated so well and they really took my dietary requirements into account when they packed our personalised lunch bags. 😍 We also got shirts. I don’t know if all conferences give out shirts (this sets the bar high, guys)…
I attended the conference afterparty as well. I made myself go, even though I was close to passing out because I had very little sleep that day. I am usually not one to go to parties and socialising is a difficult thing for me to do often because I am so introverted. But I had met so many great people that day and I wanted to continue having great conversations. So after a quick change of clothes, I walked the 25 minutes there, hoping like hell it would be worth it.
It was! We took hilarious photo booth photos, I met more new people, and there was a lot of dancing. I don’t know what it is about other scenarios, but I didn’t find myself embarrassed to dance. My dancing background is not something I am ashamed of but I just don’t feel right dancing if no one else is putting in the effort. And believe me, everyone was having a really good time. :D
As for the conference, I have outlined my notes and takeaways below. I was most excited to see Una Kravets talk, because I am such a big fan of her work. 😍 I got to have a good chat with her which was honestly such a privilege!
Art Directing Web Design – Andy Clarke
Andy Clarke discussed taking web design to the next level. By taking inspiration from print and leveraging grid systems in a better way, he inspired us to think outside the box and recreate webpages to make them stand out. He reminded us of the era of hit counters and guestbooks, and mentioned our infatuation with processes like Atomic Design (Brad Frost) and tools like pattern libraries – things that we often stick to because we fear criticism or failure for our work.
These processes need art direction to be meaningful. Without art direction even the most attractive atoms, molecules and templates, have little more than superficial looks to unite them
- we fear criticism or failure for our work
- art direction improves what we make for the web
- shoutout: Trent Walton, who creates a design for each of his blog posts
- the art of distilling an essential, precise meaning or purpose from a piece of content
- art direction can not only establish relationship with content, but connect someone to the spirit of a brand
- pull quotes can be used to lead people’s focal point
- every element presents an opportunity to be creative
- using CSS’s first-line is actually marvellous for responsive design
- Mark Porter: design is being in charge of the distribution of elements in space
- the problem is not Bootstrap – it is our lack of knowledge on how to use grids creatively
- layouts where size corresponds to Fibonacci numbers can actually have really nice rhythm
- grids anchor our layout but don’t contain the items on the page unless we make them do so
- combining two grids (compound grid) is an established design technique
- we are not limited to vertical grids, horizontal fields can create imaginative layouts
- an interesting way to use figcaptions – use CSS flexbox to align the caption or reverse the order
Working with Images – Una Kravets
Fangirling right now because I love Una’s work on CSS blend modes. 💜 Although her talk was not focussed on this, she totally found a way to weave it in. Giving a detailed analysis on image file types and performance, Una shared her love for ImageOptim, Bob Ross (aww yissss!), batch resizing via the command line, and up-and-coming image file types.
Less colours, less problems!
It was most interesting to see that compressing images with certain tools resulted in images where you couldn’t even see the difference with the naked eye – yet dozens of kilobytes had been shaved off. Also a trick or two: blurring parts of an image makes it smaller in file size. The technique is also great for perceived performance (check out Medium). And what really made Una say, ‘less colours, less problems!’ is the fact that black and white images load faster than the original coloured image, not to mention the same happens with a coloured CSS blend mode versus a pre-edited image.
Perhaps something that would be embarrassing is the fact that Una analysed the Mixin website and found that the Mixin team could serve their images better. But she only suggested this with the best intentions. She ended with a final note to be aware of emerging image formats, educate everyone about what you can do with images, and to find balance. 🙌 Oh, and optimise your images. :D
- the best camera is the one you have with you!
- there is an increased use of cameras in smartphones
- better compression of PNG (go for 8bit rather than gif)
- JPG will always decrease the image quality
- WEBP – lossy or lossless, animated format support, better compression than JPG. saves 30%
- predictive: using values of the neighbouring blocks of colour
- Safari: JPEG 2000
- IE/Edge: JPEG XR
brew install imagemagick
- BPG – better portable graphics / replace JPG
- FLIF Free Lossless Image Format – smaller than literally everything 😜
- FLIF is responsive – browser can decode and render the quality of the image ahead of time! 👏
- use progressive JPG if you can – it loads with low quality, and quality increases as the image loads, not in strips/lines like baseline JPG
- GIFV by Imgur – GIF or video depending on how fast it is
- Why video over GIF? They are compressed differently
- GIF saves every single frame (intraframe) and it is sent to the server and runs through the frames
- Video encodes differences between frames
- don’t send an image larger than it needs to be.
Pencil Mileage – Alice Lee
Alice spoke about the process and psychology of learning. She only became an illustrator four short years ago, and previously did not consider herself a creative at all. She attended business school, which she described as the total spiritual opposite of art.
So she started out as a ‘total noob’. And she explained, using four quadrants, that we often go from feeling excitement and not knowing of our incompetence (unconscious incompetence), to knowing we are a total noob (conscious incompetence), to not realising that we have actually become better (unconscious competence), to knowing where we stand and how to rate ourselves (conscious competence).
We need to give ourselves space to be human and not to be so strategic about our careers
Alice’s talk really resonated with people who make excuses from learning or moving forward, and encouraged us to make small steps, because even these can often elevate you. More repetition builds familiarity with what you do. She encouraged us not to burn ourselves out but to challenge ourselves in a low way.
- be optimistic – have friendtors (friends who are mentors)
- knowing you are a noob means you are halfway there!
- shoutout to Allison House who mentioned that life is cyclical, and sometimes you just need a ‘reset’
- once you are aware of your competence, you can harness this internally
- ‘What is that thing you want to do that you keep talking yourself out of?’
Full Stack Anxiety – Joel Califa
Joel started out graphic designing “educational Counter-Strike posters”. It was hilarious seeing his early designs because it was a lot like what we were used to seeing on the web and we thought it was amazing. I know I am embarrassed the old graphics I designed. Joel also took us down memory lane as he brought up Neopets, and the fact that you could learn HTML and CSS from making PetPages. He reminisced over Frontpage and Flash, only to realise he had an equal interest in both design and development.
Joel decided to skip school and the ‘fancy diplomas’ that came with them. He told us that we often ask if we are doing the right thing, and with great visuals, he told us that getting a rough understanding of what is out there is better than knowing nothing at all. Because of course, the choice is not easy – we are not choosing what to learn, we are also choosing what not to learn.
The choice is not easy – I am not choosing what to learn, I am also choosing what not to learn
Joel acknowledged that although there is a lot of pressure to constantly learn new stuff, it all boils down to two things when it comes to learning new skills:
- is it going to be in high demand for years to come?
- is it going to help me be what I want to be?
A few other things to remember include writing things down, which reduces stress and psychic residue; use if/then statements to determine whether you are going to learn a particular skill; and most importantly, we do not have unlimited bandwidth, ’cos hell – we are human.
- you have no idea what to do when you start to grow as something else
- (using a spider graphic) you no longer put time into the rest of your skills, and those skills shrink 😞
- getting a job becomes harder
- am I doing the right thing?
- get a rough understanding of what is out there – context won’t illuminate the right path, but it’ll show you where you can go
- the reason things make you anxious is because:
- they are treated the same and there is no way to tell what is more important. When you treat things the same way, they get really overwhelming
- they are open loops.
- psychic residue: you need to do these things but haven’t written them down yet
- the more open loops you have, the more cognitive stress you have
- writing things down can make you less stressed
- if I really enjoy doing it / if it keeps me up until 5am, then I’ll learn it
A CSS Eulogy – Mike Riethmuller
I first saw Mike talk at a SydCSS first-time speakers event over a year ago. It’s crazy to think that we had not had a proper conversation until Friday! His talk, adorned with sarcasm, was about the hacks and CSS tricks that we used to use but now, with new CSS, no longer need to use. He also showed us that how we came to do these hacks can actually help us see where CSS is going in the future.
Hilarious quotes ensued, not to mention the abuse of a class named ‘clearfix’ – as Mike described, to ‘shotgun’ the clearfix class.
I analysed the blogs and websites of all the speakers at this conference, because that’s a great way to make friends.
Hacks are not necessarily bad, they are really just clever workarounds for the limitations of CSS. And new limitations will often require new hacks. Mike has one of these clever workarounds for fluid typography, something that will eliminate the need for media queries. It’ll take me a while to get my head around it, personally. 😜
- Nicole Sullivan: media object
- Harry Roberts: flag object
- Philip Walton: media object with flexbox, has source order control 😜
- negative margins
- modals, LOL: used to use -50% but position doesn’t work this way. transforms do!
dialogis available and you get positioning for free
- viewport units – cannot control the rate at which the viewport unit scales
- fluid modular scales: less change in a mobile environment and greater change in a desktop environment for readability
- there is never a better time for exploring on the web!
- be a part of the evolutionary process
Designing a Design System – Jina Bolton
Jina was hilarious. Her presentation was full of Australian puns. She seemed off to a shy start but soon her bubbly personality shone through. She went through the importance of having a design system – also referred to as brand guidelines, pattern library, front-end style guide – and how every company is different and may or may not need a complex one. No product is too large or small for a design system.
A design system is not simply about how to use a logo – but is more like a philosophy. Jina stressed that it is about communication within a team, within a company, and should be a product on its own. A design system is not just a side project.
Design systems also go into detail about voice and tone, and is a living, funded product (not a zombie style guide 😜) with a roadmap and backlog just like any other product. ❤️ Jina told us about the history of design systems and how the Salesforce Lightning Design System came to be. She went into detail about design principles (clarity, efficiency, consistency, beauty) and how the order of these matters. She also mentioned the importance of keyboard navigation, accessibility requirements and visual states, and how taking notes on things like these is important.
Although design systems help things to become more consistent, you can have ‘special snowflakes’ and things that are out of place, such as things for special promotions, landing pages, and so on. And it is good to keep in mind that patterns are not dogma and they can change and adapt. Design systems need to allow for change and evolution: it is OK to iterate, because this encourages innovation.
- Questions like ‘where can I find the icons?’ are often common. 😆
- Nathan Curtis: Team Models For Scaling A Design System
- cyclical pairing model, system informs the product, but product also informs the design system (large for Salesforce)
- design principles:
- clarity: enable ambiguity
- consistency: create familiarity, strengthen intuition
- beauty: demonstrate respect for people’s time
- clarity for new users is solid, then help them be more efficient
- sometimes you will have debates that centre around clarity and what to name things, which is why consistency comes later
- documentation is paramount!
- design tokens, an abstraction for everything impacting the visual design of an app/platform. being single source of truth
- design tokens converted to all things they need – Sass, LESS, Stylus, etc.
- concept of night mode 🙃
- more time and bigger space to be creative
The Secret Life of Comedy – Espen Brunborg
Espen began by reading out an excerpt from the ‘Bible’… which was a funny retelling of the story of the internet. He used a wonderful analogy of music and comedy to encourage us to use an element of surprise and dare to do something different with our designs. He gave us two contrasting lists. Good design – which we all agreed was good, but until he showed us the second list, we didn’t even think about it.
- This is good design:
- fast. give people what they want when they want it
- universal. give people the same experience everywhere
- intuitive. speaks in a language that we have learned. it is predictable
- invisible. it is just there in the background facilitating content or the user journey
- user-centric. about the user. no ego. based on feedback
- scientific. measurable, testable
- This is good, but overlooked:
- slow. an emotional connection takes time
- individual. feels like it is made for you
- surprising. discovering something you didn’t intend to find
- impressive. good design is impressive (Seb Lester)
- visionary. example, Steve Jobs and the iPod
- artistic. you cannot really predict them. or a/b test your way to originality
Music sets expectations and meets them. Comedy sets expectations and breaks them
It is often the progress of technology that causes everyone to panic and want to keep up. We sacrifice quality for cheapness. You make cheap shit. So what defines ‘good shit’?
Through a series of examples, Espen showed us that we can weave comedy into our designs by way of thinking outside the box, ‘violating the expectation’ and surprising the user, making our websites less predictable. While music is a way of having things be efficient, safer, and expectable in its harmony – we have to be willing to take the risk and dare to do something different. Although the character ‘Mr But’ will always rebut your daring thinking, you have to give him a big slap. ;) Comedy helps sell the product, whereas music helps the user make the purchase. Comedy can bring personality into your designs, because there is more to it than just consistency, usability, and performance.
- utility vs beauty, science vs art, convention vs expression
- replace (vs) with (&) – combine the two
- hipster jokes. setup. anticipation. punch line
- drop anticipation but then punch line – violating the expectation (you are surprised)
- balancing expectations / meeting expectations
- structure, setup, confrontation, resolution
- unpredictable within the safety of this structure
- music: efficient, quicker, safer, expectable. it just works!
- e.g.: making certain things look clickable
- ‘let’s go!?’ vs. ‘save’
- instead of hamburger menu, menu at bottom?
- comedy: personality, difference, friction: makes our sites less predictable.
- why are we so serious!?!?!?!
So, in a nutshell
Will I be going back to Mixin next year?
Sounds like you had a really good time! And it sounds like you learned a lot of stuff! A lot of it sounds really interesting! =3
Love your work Georgie, couldn’t have summed it up better (and the colours on your blog almost match ours 💜)
Thanks so much for coming along (from the whole team). Looking forward to seeing you again next year.
Even though the speakers were all about design, I feel many of the takeaways/notes can also be applied to blogging. When I was trying to figure out an intro post for my theme, I kept trying for “Rebel at heart, unpredictable at best”. I like being unpredictable, especially as a writer, because predictable events are annoying and become cliche. They’re tropes, and tropes are no fun. I actually use a lot of inspiration from television series and movies for how I blog, and if I was a little more into being cheesy, there would be more television show language (e.g. “previously on”, etc.). But I love the comedy thing — setting expectations, then breaking them — and the question of what we’re holding ourselves back from and talking ourselves out of. It’s a great reminder to go out there and be bold and daring and badass, and not lenient. 👍😎
WHOA this is a fantastic breakdown. I want to dedicate some time reading up on all these topics this week. Everything is so insightful! Reading about people with equal interest in design and coding makes me feel better about myself and my own path, because I’ve just always felt that way (but haven’t always been TREATED that way – a lot of companies think that developers don’t care about the product or design, and don’t want to do those things, and have no idea how to include developers in those processes – this has been a very frustrating aspect of my career).
Other things I really liked: “clarity over consistency” at the beginning – it’s important to establish your design system, your UX, and your brand before you worry about consistency. “the problem is not Bootstrap – it is our lack of knowledge on how to use grids creatively ” oh man, YES. Also the problem is customizing Bootstrap and using it to its full potential instead of going halfway with learning/using it and then deciding that’s enough. Also, there’s so much to learn in web development/design right now, so many tools and frameworks and systems and whatever else, it’s just impossible to keep up and it does get so stressful.
All of these talks are things that are so relevant to things I’ve been thinking about lately, so thank you for sharing this! I can’t wait to do more research on all of these things and these people!
Glad you liked my post, Becky! You should definitely follow up on some of the speakers and their blogs or Twitter feeds because they are among the best in their fields of design/development! 👍 Very inspirational and I am sure you will continue to learn a lot from them.
Holy, wow! I’ll have to really sit down one day and read this full entry, especially all your notes! Some of them caught my eyes, and I found myself nodding at a lot of them. For example, it was good to read about smartphone cameras being more in use and that jpeg will involve a loss of quality. I also liked what Alice said about taking small steps when we learn new things.
It’s great you had a wonderful time! I’m glad you didn’t let the rejection prevent you from going because in the end it really benefited you. There’s always next time and future conferences, so I know you’ll have plenty of more opportunities. It’s also great your company paid for your flight to this conference.
Thank you for sharing your conference experience :) I will really need to sit myself down and devour this entry more so when I’ve a bit of free time next week!
Mixin sounds like such a good event! It’s great that you met some nice people and that you went to the after party.
All of these speeches sound so interesting. Reading through your notes, Alice Lee’s speech particularly stood out to me. I find it inspiring that she became an illustrator in just 4 years. My design skills are massively lacking and I always sort of felt that it wasn’t something I could develop anymore, but this is very encouraging to hear. :)
I recently stepped out of my comfort zone and attended a Girl Geek meet up in the city but ended up almost having a panic attack and leaving early because it turned out that everyone else knew each other and I was just left out like a lemon. Plus, I was expecting there to be more developers there as that’s what they try to focus on on their blog and social media, yet I was the only one there who could code!
I used to be very into design but it wasn’t something I enjoyed as much as coding. Alice reminded me that sometimes you can get better at something simply by practicing.
Ah man, it sounds like you had a totally different vibe at your Girl Geek event! :( The ones in Sydney are not super tech-heavy but about half the crowd is more technical. Be proud of being a developer because it would certainly make for an interesting topic of conversation next time instead of you feeling left out. :)
Sounds like you had a blast at Mixin Conf! Even though you didn’t get to speak there, you got a lot of wealthy information out of the presentations :). It’s awesome when event organizers are organized with catering to people’s needs.
I agree with the take away about how we fear criticism/failure for our own work. I think if we start encouraging people appropriately, maybe we’d fear less? The part about knowing how to creatively use frames is on point! I enjoyed using different arrangements of grids when I played around with bootstrap. :D.
I don’t really like how GIF renders the images for animation. I rather have a higher quality by putting it into video mode :). We all have to start somewhere; mistakes teaches us lessons for improvement! When I looked at the formula in the font, my mind was blown. I didn’t know it’s possible XD.
Seeing some of these key points make me pretty excited about what’s in store in the web designing field!