Introduction

[00:00:00]
>> Matias Gonzalez: Hello and welcome. I am Matia Gonzalez. This is the workshop Creative Development for Marketing Websites. I am a graphic designer and I have been a developer for almost 9 years now. I specialize in web shaders, so things like shaders and 3D, but I also have a lot of experience with web development in general and animation libraries. So what this workshop is about, first we're going to discuss the process of creating a marketing website.

[00:00:36]
How we can add different animation techniques to make it more appealing. And last but not least, our websites not only need to look good but they also need to be usable so we're going to discuss different performance techniques and also accessibility tricks. So let's first start talking about the process of creating an interesting experience on the web. And to talk about the process we need to talk about the people involved in that process.

[00:01:10]
For a marketing website we usually have someone that wants the marketing website to be created, so that would be our client that needs our website to promote their product or brand or whatever. That person will provide the vision of what they need and what they want. We also usually have some designer that we work with. And that person is going to analyze what the client needs and try to come up with a concept and a UX and UI for a site.

[00:01:48]
And finally we have you. If you're here, you're probably a developer. And you will be in charge of creating that experience and bringing that to life through code. You may also be a designer yourself, and if you're creating your portfolio, I guess you are also the client. That is harder than it sounds. Nowadays we also have a new actor that's embedded everywhere, which is AI assistants.

[00:02:20]
They can make things better sometimes. They can help us speed up with prototypes and do like quick things, but it's important to play with this technology in order to learn their strengths but also limitations. So building a website is ultimately a social experience. We want to find a common ground between what the client needs, the concept and the actual implementation of it.

[00:02:56]
So the question that I want to first discuss is what can we do as developers to improve that process and try to help achieve the best possible result. So on my experience, the best thing we can do is to experiment a lot, especially at the start of a project. This means that we should create like quick prototypes in order to validate ideas as fast as possible. This would mean like if we want to try a new technique, we might just go ahead and just do it to know if it's even possible to do that and then go ahead and iterate until we are happy with our final implementation.

[00:03:45]
So as a concrete example, when I was working at Basement Studio, we did a website for the Daylight tablet. This is an e-reader that has like a high refresh rate, so it's like a middle ground between an e-reader and a tablet. So at the start of that project, a designer came up with this concept and he used like shadows to evoke like a sense of warmth and calm. In order to like evoke how the tablet will like react to the physical light.

[00:04:22]
And we really like that, so we thought, hey, what if we actually implement that like in real time on the site. So I went ahead and took a bunch of pictures of my living room on how like the light would like cast shadows on different surfaces and how depending on like the distance of the light and the object, it will, the shadow will be different. And after playing some time with that, we got to this first result, so we knew like it was possible to do that so we went back to the designer and we were like, hey, we now got this new trick that we can use on the site and we can actually like implement that on the final design.

[00:05:13]
So they were like, hey, okay, now we can use this technique to tell a more interesting story. So what if we maybe use those shadows to tell how the day would progress. So at the start of the morning you will open like your window and we can like see that and then we can maybe show the product being used throughout the day and like show different pictures of it and then we can also like play with the angle so as you reach the end, we will like show the sunset and finally like the night.

[00:05:50]
And finally we can like show the features of the backlight that you would have that you can use at night. So by like doing all of these experimentations, we could like unlock a new trick that we can like iterate with our designers to improve the experience overall.