matuzo.at from scratch #1 - Designing and finding inspiration
posted on
The this video I explain how I approach design and how I find inspiration, both online and offline. Subscribe to the YouTube channel.
Video
Transcript
[Introduction]
Hi!
My name is Manuel Matuzovic. I'm a front-end developer from Vienna and I'm redesigning and building my website from scratch, and I'm recording it. This is my second video, thank you so much for the great feedback to my first video and also thank you so much for subscribing to my YouTube channel. I started with 5 subscribers and now I have 102, which is really really amazing.
In my first video I talked about my plans for the next couple of weeks, the technology I'm going to use and what I'm going to cover and what I want to implement. One thing I didn’t tell you about – and thank you Bernd for pointing this out – is the required skill level that you will need in order to be able to follow me.
[Required skills you'll need]
If you are completely new to eleventy, it's absolutely fine. I'm doing a lot of research right now, I'm looking at other websites and I'm trying to steal all the great ideas so they can find their way into my website, and I'm going to start from zero and explain everything that I'm doing.
So, if you're new to eleventy, this is going to be great for you.
If you're completely new to HTML and CSS, if you don't know how to write HTML and CSS, I believe that it's going to be hard for you to follow me because I'm not going to talk about the language basics. I'm going to talk about some basics of HTML, of course, and CSS, as well, but also about some advanced stuff and I'm not going to explain the fundamentals.
You might want to learn HTML and CSS first and then come back because there is some stuff like performance and theming in CSS and also advanced layout that I'm not going to explain in detail.
All the JavaScript stuff is probably going to be pretty basic because I already told you in the first video I'm not a JavaScript pro. I know how to write JavaScript but it's not going to be the most advanced JavaScript, or you don't need any framework knowledge (React, Vue, whatever) because I'm going to write vanilla JavaScript.
My JavaScript might get better because I just subscribed to “Just JavaScript” by Dan Abramov, a JavaScript course that helps you write vanilla JavaScript. It seems like he's planning to create the best vanilla JavaScript course there is, together with Maggie Appleton. I'm really looking forward to this, you might want to subscribe.
So, if you know basic HTML and basic CSS, I guess my videos are going to be interesting for you.
[How I approach design]
Let’s get started with the topic for today, I want to talk about design and finding inspiration. I'm a front-end
developer, I get paid to write HTML, CSS and JavaScript. I don't do design but I believe that I have to understand how design works and I should be able to do some basic design because my job is to translate Sketch, Photoshop, sometimes even InDesign to CSS and HTML. In order to be able to
translate I need to understand both languages, so the languages of the web and also the language of design.
I wouldn't trust myself to build a design system or to design a large website with many different components and states, and so on, but I trust myself to build my own website and I also challenge myself to design my own website and this is really important.
Your website is your personal space, this is where you get to express yourself. You can express yourself by the content, the images, the text that you put online and you also get to express yourself and show who you are with your design. That's why I believe that it's important that you design your website, but for some people, including me, it's hard to design and the way I do it, and this kind of works for me, is that I have a starting point and that starting point is usually something that inspires me, and I'm going to talk about that in a second.
So, I have this starting point and then I just design, I just start and what I don't do is that I don't sit down for a day and try to come up with a design.
I only take a few minutes, maybe 30 minutes or up to one hour maybe, because I work full-time I don't have the time and it's also for me easier to design and not get frustrated if I don't spend too much time on it because if I design something for two hours and I'm not able to come up with the result that I expect I get frustrated and if I only have a limited amount of time, this is not very likely to happen.
[Spend only 30 - 90 minutes every day on design]
So the way I do it is, in the morning I have about 30 to 90 minutes before I have to get to work, I wake up very early, yes, and I work on a design and I work on it for 30 minutes and then I just let it be and the next morning I look at it and if I still like it, I keep on working. If I don't like it, I throw it away and then in the next morning I repeat this, and so on. The tip I have for you: If design is hard for you, don't try to design everything in one go, like you can, I don't know, write the HTML and CSS and JavaScript for a component in a day and then you're finished and it's fine, but I wouldn't recommend to take a whole day to work on a design.
Take your time, spend multiple days looking at the design, iterating over it and tweaking it and maybe just throwing stuff away, if you don't like it anymore, it's fine just try something else but just take your time and while you're designing also try to work on other stuff on your website because there’s so much you have to do. Don't let the design be a blocker, you don't need the design before you start working.
[Don't let the design block you]
You can do all the server setup, you can, in my case, setup eleventy, you can create all the content, write everything, work on the HTML and the
design could be the last thing that you have to do, so don't let a design be a blocker.
[Finding inspiration]
I just mentioned that I usually have this one thing that I start with, like this foundation of my design, something that inspires me. And inspiration is an interesting topic because there are different ways or different sources where you can get inspiration from.
[Don't look at other websites too early]
I'm going to start with the most obvious one, which is looking at other websites. This is something that I definitely cannot recommend. Don't look at other websites because if you look at other websites, it might happen that they influence you in your decision-making and design process so much that there isn’t too much of your personality, of “you” in your design and, again, I believe this is important because you express yourself with the design of your website. So, looking at other websites too early in this process might influence you too much and the chances are high that your website will look like every other website.
There is this famous tweet by John Gold who wrote “Which one
of the two possible websites are you currently designing” and you see this one design with the logo on the left side, a horizontal navigation on the right side followed by a hero area with an image and some tags, a call-to-action button followed by several sections with one to three columns. This is how most websites look like and if you look at too many websites of other people, it might happen that you just create another clone of all the other websites.
[Fonts]
So, if I don't recommend looking at other websites too early, what do I recommend?
Well, you could start with pretty much anything, you can start with a font for example. You just visit, I don't know, Google Fonts and just browse through the fonts, maybe don't take the first ones, don't start with Open Sans or Roboto.
Scroll through the page and see if there’s a font that you like and use this as a starting point or, of course, you can also visit – I don't know how to pronounce it – font squirrel, font squirrel, font squirrel, I don't know, font squirrel. You can browse this website and see if there are free fonts that you can use, that inspire you to create a design. They have a lot of interesting fonts on there.
[Colors]
So, a font could be something that inspires you and also a color, for example. There’s Adobe color, there are other websites as well, that have color swatches and you just browse through the site and see if there is a combination of colors that you like and use this as a starting point.
[dribbble.com]
Another source of inspiration is dribbble.com, and I guess they're different ways of
using dribbble.com. On this page I searched for “website” and you can see some designs and the problem I have with dribbble is that some of the designs are just too beautiful, just too perfect and if I look at this page, everything looks the same to me because, I don't know if I'm using dribble wrong, but there is usually a trend, a certain type of design or usage of color or typography that everyone is doing at the moment and this is why most designs look the same at least they look the same to me.
I don't know if this is a great source for finding inspiration but what I like about dribbble is, you can search for logos or whatever and just see if you can find colors that interest you. So, it doesn't have to be a user interface design, it could be just a logo that you like and if you click on it, you can see the color swatch and you can copy the colors and you can also click one of the colors and then you will see all kinds of designs and combinations with other colors in that specific color. So, this is really cool.
[Magazines]
Another source of inspiration, it is my favorite one, is the offline world.
You can find inspiration anywhere in the offline world, for example, you can look at books or magazines. This is an article
that Dan Davies wrote and it's called “Print to CSS”. He says that he's a huge fan of magazine layouts and the use of typography and structures and the general look and he wanted to bring that look to the web. And for him it was an interesting exercise because he got to practice Grid and he also made some pretty cool designs.
He looked at several magazines and he recreated the layouts in CSS. You can see for example, this is pretty interesting, he's using the heading of the article as a mask on an image, which looks nice and it seems like you can do this with CSS. So, pretty cool stuff, stuff that might inspire you.
[Architecture]
[Showing photos of buildings I took in Talinn]
Another source of inspiration in the offline world is architecture – I'm a huge fan of architecture – my partner's an architect and whenever we travel she shows me all kinds of interesting buildings. What you see here are just some photos I took in Estonia and they have so many awesome buildings there and, of course I know this is a building, you can’t immediately transform this into a web layout like we just saw with the magazines but – I don't know – texture, color, combination of colors and also sometimes shapes can be very inspiring. For example look at that building, I mean this looks so interesting, all kinds of interesting shapes that you could, for example, recreate with CSS or just use it as a foundation for building something or designing something.
[Showing a photo of a poster]
On my current website you can see that the colors I'm using are this whitish-beige color in the background and a light blue and a dark blue color and red. And I found those colors in Italy, I was in Italy on vacation and we stayed at an AirBnB and I was brushing my teeth and usually I'm brushing my teeth everywhere but the bathroom. So I was walking around the Airbnb and I was brushing my teeth and then I saw this poster – and you can actually see me brushing my teeth here, if you look closely – and I saw it and I really liked it. I like the shapes, but not too much, but I liked the colors a lot. So, I took a photo and I saved it to my phone. At some point I used this as a basis for my design. If you look at the website again, you can see that the colors are not exactly the same but they're pretty similar.
[Showing a punk LP]
For my new website, for my redesigned website I already have a very rough idea for a design and the inspiration this time was a LP. I bought this punk LP a few years ago, about eight years ago. It's called “Oi of Japan” which is a compilation of Japanese punk music and a few weeks ago I remembered that I have it and I listened to it and then – I swear it was exactly like that – two days later I woke up in the middle of the night and I thought “My website should look like this cover”. So, I looked at it again and thought “Okay, how can I do it, how can I transform this into a design”.
So, I opened CodePen and I started designing and this is what I came up with. You can see that the title of the LP is my name and the navigation on my website is where the bands are and I don't have an illustration here but Ibuilt a layout in a square shape or a rectangle shape and I did that and I liked it for some time and – you know – I spent 30 to 60 minutes working on it and then I worked one more day and then another day and then I woke up and I looked at it and I thought “I don't know, it looks nice, but I'm not too convinced”. I mean, I like this three column layout here, it's kind of interesting but I thought I should bring my colors back, the colors that I have on my website because I like them a lot.
So, I changed the colors and I also changed the layout a bit and I did some experimenting and I liked that a first but a few days later I didn’t like it anymore, I didn’t like it at all so I just thought “Okay, I'm going to start from scratch. I'm going to delete everything.”, but in order to honor the original inspiration I had, this LP, I'm going to keep this square shape and I'm going to use it as a background image on my website.
I opened illustrator, I created this background image, I saved it and then I got this and I thought “Man, this looks really cool” because it looks like a college block where you can write on and draw something and scribble and it also kind of… it makes me want to draw more squares on this canvas. So, that's what I did, I drew another square, so I got the original idea back and then I added my logo and the navigation here on the top right. Again, you can see that I'm really trying not to copy all the other websites. That's why I did some experimentation with the positioning and then I also added some content. Now what you can see here is not the final design, this is just a rough draft, a prototype. I'm designing in the browser and I will be working in the browser, of course, so I don't need to design the whole thing. Design here is an ongoing process, so while I'm writing the CSS the design will just happen.
Okay, so this is what I'm going to do, it will probably not look like this but it will be something in that direction, probably. It might also happen that at some point, in video 10, I don't know, I decide that I don't like it anymore and I'm going to design something else, we'll see.
[Look at other websites for inspiration]
Okay, in the very beginning I told you that I don't recommend looking at other websites. Actually I do recommend it but it shouldn't be the first thing you do.
At some point it makes sense to look at other websites and that's also what I did.
I visited it this website but Lynn Fisher. Lynn Fisher is awesome. If you don't know her, follow her and check out her website. This is her site and if you make the screen smaller, you can see that on a small screen you just see – I guess it's her – her head and her name at the top and the larger the screen gets the more heads you can see. So, her head splits in the middle and then you see a skull and then all of a sudden a pizza and more different faces and in the end you you see her again, I guess, again holding it all together. This is so cool, unfortunately I'm not Lynn Fisher. I'm not as talented and creative as her and I can’t draw, I can barely write, but I still love looking at websites like hers because it inspires me to get started, to do something, to design something, to get creative, even though I can’t do stuff that she can do.
Another great example is – and I guess that most of you have already seen this website by Bruno Simon and I don't even know how you do it, like there’s a car and you can use the arrow keys to drive around and you can explore his world, his website and this is just so cool. Like again I don't even know how…What is this? JavaScript and three.js? I don't know. It's just so so cool and, again, I'm not as talented as he is to create something like that but it inspires me.
Another example is this website that I stumbled upon recently by – I'm sorry if I didn’t pronounce it correctly – Ilithya and I
spend so much time playing around with that thing, that's really really cool and I also like the colors a lot. Now, I wouldn't try to recreate this and put it on my website because that's not me. I'd like to play around with it but it looks nice and also again it's inspirational and what I like is I looked at the other pages and there are all kinds of interesting things going on. What I like here is that you can see the content is right aligned. On the left side you have this pattern, this dotted pattern and on mobile or small screens they're on the top. At some point they disappear and then reappear again. This is a nice little touch, I like that a lot and it seems like you – oh okay – you have some theming going on, which is also quite nice.
If you like websites like these where a lot of animation is going on, I recommend checking out awwwards.com. There are a lot of really really cool sites on there.
I looked at some other sites, as well. I was on Jeremy Keith's website and I also found some things there. I saw that he has thistheme picker where you can change the theme of the site. It reminds me a lot of a CSS zen garden, that's really cool. Since I'm going to have some theming on my site, as well, I might steal that. I like it a lot. So, there’s theming, which I'm going to steal from Jeremy and I also like that on his home page you can see he doesn't have just a list of the latest blog posts but pretty much everything. There’s a photo that he took, there’s an article that he wrote, I guess.
There are some teasers to articles that he read and he liked and there’s all kinds of content that he created or that he put online, that's summarized on his home page. I'm going to do it as well because on my current website you can only see the the latest blog posts.
es, then I visited Mina Markham's website and I believe
I didn’t even look at the other pages. I got stuck on the home page because I loved the photo that she put on there. I like it because it has a lot of character and it's not a typical photo that you take… a professional photography that you take where you sit like that and you have a photographer perfect camera that takes a photo of you. It's so dynamic and I really like that. I might even put a photo of me on my website I usually don't like taking photos of myself and putting selfies on Instagram or whatever but I believe it makes sense to put a photo of yourself on your personal website if you want people to know who you are.
I also visited Dave Rupert's site. I like that there’s this illustration, of him I guess, but I also liked his about page where he made this horizontal scrolling column layout – I guess he got inspired by Trello – with all the work he's done in the last eleven, twelve years. That's really cool, I might steal that idea as well for my today I learned page, I don't know, we'll see.
And the last website that caught my attention recently is the website of my friend Max Böck. He recently published this blogroll. Usually a blogroll is just a list of names linked to blogs but what he did here is that he added not just a name of the person he links to but also an image and a short paragraph about that person. I like that, I'm going to steal that as well.
[Outro]
So, it makes sense to look at other websites, not just because of design reasons but also because you might get some inspiration for how to present content and what kind of content and how to build the basic structure of your website not just design stuff.
Alright, that's it for today I hope that this helps you just get started with design or to finish a design actually. I just wanted to share my process how I find inspiration how I design stuff.
In the next video I'm going to talk about designing in the browser and this is going to be the first video where you will finally see some CSS. In the meantime please give me feedback again, share me links to your websites. I want to steal ideas from you and also please subscribe to the channel, contact me on Twitter, if you have questions if you have feedback and thanks so much for watching. See you next time.