Posts Tagged ‘web’

Awwwards day 2

The second day of the conference started with coffee & cookies :)

David Vogel – “Zen and the Art of UX Design”
The First talk of the day mainly focused on the interaction and relation between computers and humans. The computer has become smart. The lines between what a machine does and what people do are blurring. The internet of things is coming. This already shows in the upcoming of AI and VR. Prices are going down. Soon it will cost the same to makes project with a chip as a project without a chip. To understand the complexity of it all David mentions holism and reductionism. Explain the parts through the whole or the other way around. When working on a project you start with the experience flow (spine) and then the story mapping (ribs).

Greg Barth – “Do It Yourself, Design, Taking risks, Experimenting, Behind the scenes”
Greg Barth focused his presentation more on his own work. He presented his bizarre surrealistic colorful projects in a fun way. The Great thing about Greg’s work is that he loves to do everything himself. By using fish wire and things as projections he creates very unique experiences. Have a look at his work:

Patrick Hamann – “Embracing the network”
This talk focused mostly on the failing of the network. Each website does a lot of requests to third party websites like advertising. On the 12th of November the main advertising site went down and as a result loads of websites showed blank pages while waiting for the server. You can’t stop failure but you can, and have, to embrace it. You have to design for failure. A good example is loading up a skeleton screen before the real content has loaded. This way the user knows that there is actually something going on instead of starring to a white screen. Also designing the error page is something that is often forgotten. Another part is embracing failure by using tools like pre connect,preload and prefetch to already load content before its needed in order to give the user a fast experience. Also caching is very valuable, especially when we look at the future where we’re also more focusing on offline experiences (push notifications and background sync of websites, not just apps).

Bart Van de Wiele – “Adobe’s UX design future: Project Comet”
Adobe is working on a brand new project especially for web designers. Bart gives us a look at the alpha version. The project looks very promising. Comet works perfectly together with files from other Adobe programs like illustrator. It’s easy to move things from an Adobe project to comet. Comet of course also has the ‘standard’ design tools you need for UX design but also provides new things. One function even got a big applause: The repeat grid option. This option makes it very easily to repeat blocks in both horizontally and vertical grids. It also gives good control over the gap size between the items. Also when you change one item in the grid, for instance the image height, the other items will change too. Comet also gives nice options to drag in images and text. When dragging into the grid, comet automatically fills all instances with the images. This makes it easy to fill your design with the right content. Comet also has a great prototyping mode where you can link the different art boards together and use the simulator to show the interaction between the pages. They also offer a share prototype so the client can also have a look via adobe’s servers. All and all a very promising program.

Trine Falbe – “Designing (non-game) web interfaces for children”
Kids nowadays grow up in world of internet. By designing websites for children you have to take in account that they don’t think the same as adults. Most kids under 12 years old primarily use tablet. Their motor & language skills are not fully developed yet. Don’t use complicated navigation. The reason why kids click everything they see (like advertising) is because the ability to think in an abstract way only starts to develop from age 12. Our brains aren’t fully developed until the age of 26! Kids can learn sign language before they can speak and read. Therefore it’s important to use visual language like icons & images. When you can’t read very well you start looking for visual hints like icons and buttons. The same things happens when we, for instance, try to find our way on a chinese website. The main important things to keep in mind when designing for kids:
– Don’t reposition key navigation
– Visual language outweighs text language
– Use autocomplete and visual search (and use translations aswel so kids can search in every language)
– Use icons & images
– Simple data entry (because of motorskills, it takes a kid way longer to type something)
– Design for social (kids use websites together, they want to share and comment).
Trine also wrote an article about this on Smashing Magazine:

Bjarne Christensen – “Why being a web professional is about to become even more fun”
Bjarne told about how his company changed the way they handle projects. Building sites is more than design & code, and you should find a way to make that clear to clients. Otherwise you”ll be spending a lot of your own time and budget on projects. You should come aboard early in order to define problems together with the client. Who are the users, what are the goals? By using keyword clouds and polar charts you can easily define what direction the project should go.It’s also a good idea to work with both fixed and agile budgets. The fixed part is for the process of defining the project together with the client. This part also gives the client understanding of the whole design process. For the second part you split up the project and estimate how long each part will take (min & max):

Another thing that helps save time is to stop creating templates in photoshop. It’s better to create a look & feel by designing different element and by putting these aspects together after where designer & developer work closely together.

Chris Heilmann -“All the small things”
Chris focused his talk on the fact that the web has become obese. Small interactions make things human but lately websites fill their websites with gimmicks. A lot of websites make the loading times, because of this ‘fat’, the users problem by displaying spinners and loading bars. Also a lot of those website look great on desktop but when it comes to mobile you have to wait a long time for all the javascript and images to load while ‘eating’ your data before you can finally find what you’re looking for. On mobile you want quick access to information. Lately more sites show up that only work in a certain browser. These are not websites but prototypes, Chris says. We live more and more in a ‘Creative Monoculture’. We forget that there are still a lot of people & places with bad connections. An example is Ignite: a dating websites. The company first focused on the american people. When they didn’t get the results they wanted they threw even more money at the project without result. Then they had a closer look at their analytics and found out that they had a lot of visits from countries like India. That’s when they changed their target group from the USA to India. India is one of the countries that is now starting to use internet more and more. But the connections in those countries are not very good yet. We have to take that in account. Not just for them but also to get rid of the ‘fat’ of the web. Chris sums up the mistakes a lot of site make:
– Images: Use of big png’s instead of jpg when there is no transparency needed, highres for every device (there are a lot of tools to automatically convert images and serve them to the right devices, why not use them)
– Javascript: Social media trackers, Loading in a lot of unnecessary libraries, for instance to support old ie. “Why the hell would you support ie8? We don’t even support it anymore” Chris says.
– Video: autoplay, loading big videos as fancy backgrounds
– Fonts: Loading a whole font while you’re only using a part of it (just the numbers for instance)
Some more tips: Provide back-up for slow connections and older browsers. (like a normal background for a gradient). Use newer elements like flexbox. This way you don’t need big javascript plugins anymore. Use the picture element and build in plugins (like in wordpress) to serve the right size of images. Understand language: for instance red means ‘good luck’ in China while we know it primarily as a color for ‘danger’ and ‘alerts’. Use face recognition and image analyses when needed so users can for instance easily tag people without having to tag the same person over and over again.
Know the limits of environments and connections. Don’t fill everything with gimmicks.

Resn – “Perverting the Web”
Resn showed a couple of example on how they ‘pervert’ the web. They take whats beautiful and misuse it. In this way the created bizarre, unexpected projects to engage, to surprise and to disrupt.

Prize-giving Ceremony
I expected a bit more of the price ceremony. According to the schedule it would take an hour but it was finished within 30 minutes. There were 7 prices to be awarded in different categories. The name of the winner was called, the winner said a few thanks you words and that was it. I would have expected at least something visual: a small preview of the winning website.

The Party
The party was a good place to start networking and talking to people. I had a very nice time and met some very nice people. :) Hope to you see guys again some time at another conference.

Overall the Awwwards were a very nice experience. The talks were all about different subjects and the speakers had different points of view which was quite interesting. The talks were both inspirational and educational. Some talks were more structural and showed how to do certain things like ““Dirty Little Tricks From The Dark Corners of eCommerce” and “Embracing the network”. Others were more focused on inspiring people by showing projects like the works of Greg Barth, “Fusing Code and Celluloid” and “Virtual Reality: Evolving Narratives”. Others focused on other aspects than just the web itself like “The Future of the Web is Printed” and “Kickstarting your Sketching and Visual Thinking skills”. All in all I had a very nice time, learned a lot and saw some very inspiring work.

Awwwards: day 1

This year the Awwwards conference takes place in Amsterdam in the beautiful “Tropeninstituut” and luckily I got a ticket!  The place is really beautiful and a great environment for a conference. The event is organised well. The coffee breaks (including croisants, donuts, cake & cookies) and lunch are also very nice (although 13.45 is a bit late for lunch). For readers who don’t know the awwwards: on their website they feature a lot of beautiful innovative websites. Just have a look:

Here are my experiences of day 1:


The first day of the conference started with a quick look at the web in the 90’s: websites filled with gif images and of course flash website. It was funny to see a couple of example of those website that were really ahead of their time back then.

Josh Brewer – “The Centrality of Design”
The First talk of the day was about how design is playing a more prominent role in companies. Designers came out of their dark corners and became more involved in the company strategies. This is shown, not only by the number of CEOs that have a design background, but also the amount of design companies that are being acquired by big companies like Google and Facebook. The results of taking design as an important part of the brand also included in better company results. The talk also focused on how to use ux design and prototyping in a team. It is something to do together and therefore it can be very useful to use simple tools like pen and paper. Sketching is a language that everybody understands and therefore the ceos and other non-design people within a company can also easily be involved in the process and give their opinions in an early stage of the process.

Anrick Bregman – “Virtual Reality: Evolving Narratives”
This presentation focused on several virtual reality projects, Anrick was involved in, and their cons and pros. With virtual reality you’re not merely a viewer but also a part of a film. When making a virtual reality film there are questions to ask like ” who is the viewer?”. Unlike regular cinema you can’t expect somebody to focus on something in particular, because the viewer can look everywhere, so they are more likely to miss small vital details. Things like depth of field and focusing on details to get emotion are also things that work different in virtual reality. The way how to tell a story is very different than regular cinema. Also there is no ‘behind the camera’, everything is in view, so the whole process is quite different than regular film. Virtual reality is still quite new and also depending on available devices. Recent projects are therefore more small experimental studies than full narratives. But the future changes fast and so will the future of virtual reality.

Josh Payton – “Missed Connections – A Look at History, Bureaucracy, Ecosystems and Execution”
Josh starts his presentation with the past: the world of the 90s and flash. Nowadays the internet has changed. We don’t just have a computer but we have phones and laptops: everything is connected. Personalization is now a big thing. From history Josh goes to “Bureaucracy”. As an example he shows the website, apps and kiosk interface of airline company “United’. Their website looks very old fashioned but their apps looks visually way better. But still it works very badly. This brings us to one of the quotes Josh mentions: “If it looks good, it should work good”. If you see a beautiful designed website you also expect it to work very well. Josh then talks about how to improve a website. A lot of company’s do a to b testing, but this only gives you the local maximum, not a better design overall. Don’t over rely on best practices. The web is constantly changing and best practices of a couple of years ago might not be best practices nowadays. Don’t always try to stick with what you have: “Improve it or remove it”. If you want something new you should analyze what you have done before: data > information > knowledge > understanding > wisdow. At the end of the presentation Josh also points out what a lot of other speakers also mentioned: a majority of the website look very much alike. They all use the same grid: Wide header with an image at the top, some text after that and after that the three blocks with text illustrated by icons.

Chiara Aliotta – “The Future of the Web is Printed”
After the break there was a beautiful designed poster lying on my chair which was followed by a beautiful designed presentation. Chiara has an interesting point of view on how to take designs from the past and use them as inspiration for the modern web. “Webdesign is 95% typography” is a quote Chiara mentions. In a lot of cases this is true. Try turning off the font and a site will become completely different. Some brands rely on their typography. Coca Cola for instance took their design a bit further and created an online Design Machine for their sellers. In this tool sellers could easily use the coca cola branding to create new designs. This saves coca cola a lot of money and time because they don’t have to hire a designer now for every new thing. In the presentation she shows some great typography examples from the past from designers like H.N. Werkman, Karl Gerstner & Piet Zwart. Typography. Their designs are playfull and typography plays a big part in it. What we can learn from them is that they play around the grid. This is something we can apply in modern websites too. A lot of websites are based on a grid and framework like boostrap. By looking at printed designs and typography we can play around this grid and create visually more interesting websites. Material Design Icons by Google is a project where you can see the direct influence of the design of the past. The icon set is very much inspired by Otto Neurath & Gerard Arntz Isotype.

Hi-ReS! – “Let’s make the Internet great again!”
We all remember the time in the 90s when flash become popular. Flash was an empty canvas where you could do and make almost everything you wanted without being it depended on browsers. Nowadays we don’t use flash anymore and a lot of new options are there, like css3. But for some reason a lot of websites cling to the same idea and structure. This also happens in the movie industry. Movie websites used to have great artistic websites to make the people interested in a movie before it was released. As an example they showed the website of the movie “Requiem for a dream”. Nowadays people just look up a trailer on youtube and the artistic websites are sort of forgotten. It’s a pity that the web isn’t used that much anymore for artistic websites and pushing the boundaries of what’s possible. As an example they showed a website they made : Void. This interactive experimental project is not just about interaction from the user but also interaction of other users. On this project they got some comments that it isn’t working properly in every browser. But Hi-Res says in order to get things working in every browser you just have to start doing things in order to push the web forward.

Inayaili de León Persson – “Realistic responsive design”
This was for me the least interesting presentation of the day. In a list Inayaili presented the basics on how to work on a project: How to split things up, using post its, planning, prioritizing, testing, styleguides, user checks, etc. It’s interesting if you’re new to big projects or if you’re looking for a better way to handle projects but for me there was nothing new.

Vitaly Friedman – “Dirty Little Tricks From The Dark Corners of eCommerce”
This presentation was about the right and wrong ways to approach the check-out-cart of a webshop. Friedman is a great talker and even if eCommerce is not your expertise the talk was still very inspiring. In a couple of examples he showed in a very direct way the best practices like avoiding hidden costs, using local currency, dealing with choice paralysis , using both unit pricing and total pricing, sorting, filtering out used items, show complimentary projects (not the same products) as related products, quick cart access, quick access to recently viewed items, best practices for rating and pagination, etc. And also things you don’t think off straight away such as hiding the coupon field behind a link(50% of users will actually think a product is overprized if they see a coupon code field without having a coupon themselves) and tracking gestures (showing a pop over when scrolling up again for instance “do you want to add this to your cart?”).

Eva-Lotta Lamm – “Kickstarting your Sketching and Visual Thinking skills”
After all the technology we’ve seen today the most difficult thing still seems to be connecting a laptop to a projector screen. After finally getting it to work there was no time anymore to show the slides so we went on straight to the sketching. Eva all wanted to participate in this so we would understand the meaning of sketching. It is not just for artist or children but for everyone. Sketching is a way to easily get your ideas out but also a very good way to organize notes and make them better scannable. The talk was more a workshop but it was very interesting and definitely inspired me to make more use of sketching and drawing small icons in notes.

Mediamonks – “Fusing Code and Celluloid: Why Agencies Should Integrate Film and Digital Production”
The last talk of the day was a presentation of several projects of mediamonks which illustrated the ways and shifts in the combination of film and code. At first it was more about personalization. This resulted in various projects where the main interaction was pasting a picture of your face into interactive websites or youtube videos. After that it shifted more to film content in a digital environment. As an example they show a project they did for Geox “ One Man For 7 Days In Nonstop Rain“: a video where users can react to. After that they showed a project where the interaction switched more to seduce and interact. This project was for barbeque brand Weber and on the website you could explore barbeque around the world through videos and learn how to barbecue different kinds of dished along the way. The latest developments in technology and experience move towards 360 degrees experience and virtual reality where the viewer becomes the participant. For this they showed a project they did for whisky brand Johnny Walker. In this project ‘Symphony in blue” you can move through interactive digital landscapes.