matuzo.at from scratch – #1 Designing and finding inspiration


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, so the technology I’m going to use and what I’m going to cover
and what I want to implement and 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. So, let’s talk about that for a second.
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. So 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. And my JavaScript might get better because I just
subscribed to “Just JavaScript” by Abramov, a JavaScript course – sorry – 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 looking really really looking forward to this, you might also
want to subscribe. So, if you know basic HTML and basic CSS, I guess my videos are
going to be interesting for you. Now 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 and 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 build – ah – design my own website and this is really important. I believe
that…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 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 I also… 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
don’t… 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. 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. So, 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 you know 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. 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. 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. 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. 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 – and I really hate… 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. 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. 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 for 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. 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” and 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. So 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. 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. 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. 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 I
built 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 is 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 at
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. This is an ongoing,… 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. 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, for example, 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 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… it’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 this theme 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’s 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 but
I’m going to pretty much everything I put online I’m going to put it on the
home page, I like that. Yes, then I visited that 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. 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,
I just hope that this helps you just get started with design or to finish design
actually. I just wanted to share my process how I find inspiration how I
design stuff and 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.

2 Comments

Add a Comment

Your email address will not be published. Required fields are marked *