Kristina Kanter

Web Designer

Books

Few years ago I wrote a short list of books for Web and Graphic Designer that helped me to understand what design really means, find the way I can improve my skills as a Web Designer and figure out the right direction for the career path I wanted to take.

During the last two years I had a chance to work in Helsinki as a Web Designer and Junior Front-End Developer with a small yet rapidly developing company of serious and competent specialists, move to London and join the Digital team of the biggest publishing company in the world as a Web Developer. So I felt the need to make another list of books I could recommend as a pleasant and useful reading for Web Designers, but this time it is going to be with more resources on usability and user experience in general.

Smashing UX Design: Foundations for Designing Online User Experiences by Jesmond Allen, James Chudley

I got this book by a pure chance. One day it was just left on my desk, so I decided to start reading it. After few weeks I found a person who actually forgot this book on my desk and had to give it back, but I'd still love to finish it. Turns out it's out of print, existing copies have prices with 3-4 digits, so it would be challenging to get it. How about a rental/sharing service?

Designing Web Interfaces: Principles and Patterns for Rich Interactions by Bill Scott, Theresa Neil
Smashing Book 5 by Smashing Magazine

After I visited the Smashing Conference in Oxford, I pre-ordered this book straight away. It is quite heavy one with more than 500 pages of real-life cases and examples of responsive web design.

Practical Guide to Information Architecture by Donna Spencer

Visual Design

The Universal Principles of Design by William Lidwell, Kritina Holden, Jill Butler

There is not enough words to describe how meaningful and at the same time laconic this book is. I always keep it on my desk and turn over the pages for inspiration.

In Progress by Jessica Hische

This book actually describes more about the graphic design and process of creating a beautiful typographic works (I have a soft spot on typography), but it helped me to identify the steps that every creative graphic idea should go through from paper to vector. It's a good example of how to define the right tools and stages of the project.

Treasury of Alphabets & Lettering by Jan Tschichold

This is a wonderful book, a 'must-have' one for every typographic designer. The copy that I have is in Russian (yup, it's my mother tongue) and was published by a well-known Russian design agency Art. Lebedev Studio. In the end of 1940s Tschichold worked as typographic designer for Penguin Books. It was him who specified the future typography for the famous Penguin paperback series.

Jan Tschichold for Penguin Books

Photo by Penguin/Thames and Hudson

Inspirational

Happiness by Design by Paul Dolan
Design as Art by Bruno Munari
Visual Editions: Composition No.1 by Marc Saporta

Visual Editions is not an usual book publisher, they provide a surprising non-linear reading experience and delightful tactile feelings. Their third book Composition No.1 is a book in a box (literally) that has loose pages each of them with a narrative. It leaves totally to the reader to decide the order of reading it. Their digital edition is full of elegant animations, and also has a randomiser to provide the same experience as with the real published book.

Recently I had a chance to visit one of creatively repurposed buildings in the world plus to be inroduced to an amazing design and web event in London.

House Of Vans, London

This atmospheric industrial space under Waterloo station dates back to Victorian times. Brick tunnels are now transformed into art galleries, skating surfaces, cafe and bar, and a big theatre for hosting events.

House Of Vans Skating Area

But I really can't decide what was more surprising: the place itself or the fact that I was one of the 1000 people who got tickets to Glug Summer Party. They were sold out in 4 minutes! Whew...

Glug Summer Party, Queue

Photo from meetup.com/gluglondon

And after the show has started I quickly understood why it was so popular. In few exciting hours I learned that to make a game from cardboard is quicker than an atomic bomb (poor sharky lost its parent and seeks revenge: Derrick The Deathfin, watched the production of a rap video by Mr. Bingo Hate Mail - Mr Bingo, got introduced to an incredible project called Wayfindr Utswo – Wayfindr, an app that helps blind people to travel independently in London, and so much more.

Glug Summer Party, Theatre

Photo from meetup.com/gluglondon

I especially liked the flash mob made by Ideas by Music for Fighting Cancer campaign. For every expletive in a tweet or Facebook post they donated 20p (£1 if it's done verbally over the phone). Genius! Fuck cancer!

Fighting Cancer Campaign

And one of Mr President's presented campaigns deeply touched my heart. Made by UN Women 'Give mom back her name' video shows interviews of men on streets of Egypt refusing to say their mothers' names in public (For men in Egypt and other countries in the Middle East, there is a taboo of not disclosing one's mother's name in public, lest it become a subject of shame and ridicule). Over time many women have their names being forgotten. They are being called as mothers of their eldest sons. During the campaign people were asked to change their profile icons to their mothers' names and spread the word to stop this embarassing and shameful taboo.

So thanks for this amazing opportunity, Glug! See you next time!

Last week our Digital team had a chance to work with amazing guys from Adaptive Lab on one of the projects for Ebury Publishing. There was so much useful information introduced around how to improve ideation sessions, what stages the project should go through and what kind of user testing suits different purposes at different stages of the project.

The hardest part of this collaboration for me personally was the length of the sprint. In our team we have one week sprints, because of the amount of various projects we are involved in and all sorts tasks we usually need to work on. And it was quite challenging for me but yet very beneficial to focus only on one project during those three weeks digging deeply into details, going through every stage of the project with thorough attention and case, and also finding inspiration in how people with other background and other roles think and work.

Ideation Sessions

First thing that was good to find out was how differently people from other teams and groups think about the project and what users need. It helps if the group of people is not afraid to express their thoughts and everyone is honest and constructive. We were asked to write down all of our suggestions on post-it notes and put them on the wall. Turned out that some of the suggestions were completely opposite which was good, because it meant that there is a space for discussion and testing. In the end all of the suggestion were analysed, broken down into suitable bits and tested on real users. I've learnt that as a designer I have to be curious, to have a desire to know my users better instead of offering them what I think they need.

Collaborative ideation session

Pirate Metrics

Pirate metrics is an analytic method that allows businesses and startups to collect and study data from the users and iterate quickly on their projects with more chance of positive outcome. I say positive, because even if the initial suggestion turned out to have zero or negative feedback from users during the testing, it's still a positive result – your team will spend less time and resources implementing the feature users don't actually need. There are five key metrics that team members should focus on while working on the project and they include Acquisition, Activation, Retention, Referral and Revenue (AARRR! Got it?).

Pirate Metrics by Dave McClure

Photo from Dave McClure website

You can check Dave McClure's slides with more information about pirate metrics or watch his video.

Different ways of testing suggestions

Usability testing is quite flexible, so at the same time it is possible to test more general aspects of an interface like concept, user experience, information architecture, pieces of visual design. There are several ways of testing suggestion on real users. During the sprint we went through click tests which are good for quick answers on simple general questions, 5 seconds test which work very well for rapid testing pages or small parts of the website, guerilla testing that is best for very quick feedback to test the concept and identify problems, and, finally, in-person observation testing. Tha last one is an important part of testing even with unfinished prototypes, because it gives the chance to test them thoroughly with exact target audience. It's not a fast process and it takes time, but it's a good chance to actually get people's reaction to the product.

Here are some tools that can help with usability testing:

Peek – http://peek.usertesting.com/
UserTesting – https://www.usertesting.com/
TryMyUI – http://trymyui.com/
Silverback App – http://silverbackapp.com/
UXPin – http://www.uxpin.com/ (also a great prototyping tool)
Different test from Usability Hub – https://usabilityhub.com/
Loop11 – http://www.loop11.com/
Spur from ZURB – http://www.spurapp.com/
Optimal Workshop – https://www.optimalworkshop.com/

I can't believe it, I've got tickets to Ghibli Museum for our trip in September! furious dancing

Was so happy that sketched this dark-furred Totoro in an hour. Slots to buy tickets are open only 3 month beforehand, so I had to literally track the availability every day in June. Probably, I didn't have to... But I needed to be sure. It's my first trip to Japan. It was my dream for 15 years...

Totoro Sketch

One of the resources that helped me to dive into the deep of Web Design and Development ocean was Smashing Magazine. It was like Web Wiki on drugs: much stronger, richer and fresher than any other website with tutorials.

So when I got to know that it's going to host a conference in Oxford this year, there was no chance for me not to attend it. It's a two-days event for web designers and developers, ranging from front end to UX design. I'll try to summarise what I learned and save the list of useful tools, links and quotes.

Buzz words this conference: service workers, user first, LieFi.

Smashing Conference starts

Quotes

All things were designed by people. Removing something is also an act of design.

When web and native apps meet, responsive design happens.

Web doesn't work without internet, unlike native apps. So the point is to upgrade the web, removing this gap between native and web and provide a full app-like experience in browser. Web is like a conversation, let it be more engaging.

Links & Tools

Pop App – popapp.in — Paper prototyping quickly turns into a clickable app.
keynotopia.com — Keynote meets PowerPoint and they fall in love.
Silverback – silverbackapp.com — Guerilla Usability Testing.
FullStory – fullstory.com – Record and analyse actual behaviour and interactions of your users.

nwjs – nwjs.io — Framework for building hybrid apps (calls Node.js modules).
Addy Osmani – JavaScript Memory Management Masterclass – Video about finding and fixing memory leaks in JavaScript.
Web Page Test – webpagetest.org — Page speed testing with advanced functions.

Postman – getpostman.com — Helps to build, test, and document APIs.
REST Client – restclient.net — Debugger for RESTful web services.
ngrok – ngrok.com – Secure tunnels to localhost.
Charles – charlesproxy.com – Enables a developer to view all of the HTTP and SSL / HTTPS traffic between their machine and the Internet.

jakearchibald.github.io/svgomg/ – Edit SVG’s online. A tool by Jake Archibald.

Recommended Reading

Steve Krug 'Rocket Surgery Made Easy'
Erica Hall 'Just Enough Research'
Steve Portigal 'Interviewing Users'
Alan Cooper 'About Face: The Essentials of Interaction Design'

And my personal Bible was also mentioned few times – Dan Norman 'The Design of Everyday Things'.

Here you can also have a sneak-peak to most of the slides and details. Videos are available on Vimeo. It should be updated with more content soon.

Sketches by Elisabeth Irgens: http://elisabethirgens.com/2015/oxford/

And I also won a book with this picture! First time my Instragram account came in handy.

Smashing Conference, Oxford Town Hall

Colleague brought some interesting stuff from MozFest 2014.

Locksmith tools

Lunch breaks are now busy. Silence is broken only by sckratching and clicking noises and soft murmurs. I could open only three bullets (?) at one time. There is five of them. Need more flexible fingers.

Londopolia - Next steps

Another important part of every project, which often tends to be missed is a website support after the launch.

I guess it's true to say that every web designer wants to work every time only on a shiny new projects. But even after a website is launched and successfully hand over to a client the work should not stop, because even small but continuous work based on post-launch user research makes the project more successful. I'm not talking about bug fixes and software updates. It's all about keeping it fresh, up-to-date and easy to use, for example, by adding new features.

Right now we are working together on a next phase of a project, which includes synchronisation of tours from Facebook Events. Soon it will be available on the website for non-FB users.

Oh well, this kind of weather doesn't count as winter at all: +10 degrees, partly sunny, green palms on streets. But I'm still finding my inspiration in pictures of last spring.

Urban sketch

Working on a new project - Londopolia.com

Started working on a new exiting project, which also happens to be my first project in London.

Incredibly energetic Konstantin Pinaev who takes Russian speaking tourists and dwellers on walking tours around the capital inspired me with his start up idea of Around London in 40 Steps – Monopoly themed tour guides of London. Last year while visiting London I came to his tour around Leicester Square and Covent Garden and was surprised by his way of introducing the city. Non-typical walks and paths, fresh pieces of street art, rare facts and funny myths, and, in the end, a pint of English ale in a local pub with relaxed atmosphere.

So I am very excited to be involved in the development of a website for his project. Just launched a holding page on londopolia.com. It is going to be fun!

Older