About the artistic side of front end web development

#1

I’d really like to discuss with anyone interested about this topic.
I see a lot of resources in the web that focus almost 99% of the times on the logic side of web development, ignoring the artistic component.

Don’t get me wrong, I’m not an artist myself but I’m pretty sure some of you, like me, came across a certain website that looked particularly good. You know, those ‘simple’ single column layout websites you scroll down from top to bottom and think ‘This is pretty simple, I could code it myself’. Yet it looks stunning. The right choice of colors, fonts, positioning, backgrounds, images… that turn what could look like an amateur first attempt of a website into something that really catches your eye.

How do you feel about this part of web development?
Do you find it interesting?

Personally, I’m researching more about it, and I will try to post every resource I find helpful in this post.

2 Likes
#2

That’s web designers. Working with stuff like Gimp/Photoshop etc.
They come up with the style of the page, fonts to use, colors to use, positioning of elements etc.
But they generally don’t write the code, they just hand it over to a frontend developer.

I for one hate designing, I just want a done template so I can work with the backend and JavaScript stuff. I find writing CSS and HTML very dull, but I have to do it to a degree.

#3

Hey @Stahlone,

Thanks for raising the artistic side of front end.

That sounds like something I’m also interested in.
The type of web pages that uses minimal effect but blend very well as a whole.
You get to find such under minimalist website when looking for it in Pinterest.

Pinterest suggests good ones and you should have a look at them.

I’m trying to achieve it with my JavaScript calculator project (https://codepen.io/geek4ctrl/pen/pqmeJm) which is still under construction.

#4

I’ve worked in a design-related job for the past decade, so it’s something I’m acutely conscious of.

I think it would be remiss of anyone that’s learning front end to ignore, at a minimum, basic design principles. Imagine costing yourself a job/client because you couldn’t knock up some nice simple logos, or advise on font and colour combinations?

As a learner, it’s so difficult to reign yourself in and not use all the colours and all the fonts and all the layout techniques, but actually it’s so striking when you see a really good developer’s portfolio. They’re always so neat and clean and crisp.

My other half is an architect and we are fans of the sterotypes of the profession - minimalism, Bauhaus, Brutalism and the work of painters like Malevich and Mondrian. It’s only when you try and decorate your own pages in a style that you find interesting or challenging, that you realise how difficult effective presentation is. I’ve done the vast majority of the CSS challenges now, but I’m not showing them to anyone because they don’t yet match the aesthetic in my head.

I’ve actually found effective and compelling layout and typography more mentally draining than a lot of the coding work on FCC so far.

Bit of a ramble, but hopefully I made my point!

#5

I do find it more difficult sometimes as well. I was building a a portfolio website and it tooke me longer to figure fonts and color scheme than it did to implement an image carousel in JS from scratch without looking anywhere for hints.

#6

@Stahlone thanks for posting this! I’m also very interested in the topic.

As students we’re busy learning to code and probably don’t have time to study design in depth. But design is EVERYWHERE and we can learn a lot just by giving some attention to what we run across in our daily lives. Read/watch a little about typography, color theory and layout. I’m not suggesting that we need to master these topics, just be aware of them and pay attention to how they’re employed in the work around us.

Go to a book store and really look at cover designs, consider layouts in magazines, go to a museum and notice color, follow some designers on Instagram, what font is on your tube of toothpaste? What do you like? Why? How can you employ the design ideas in your projects?

We can learn a lot just by paying a little extra attention to what’s already around us.

1 Like
#7

A friend of mine was telling me about this exact issue; they could easily learn to write websites (with a preference for backend), but they ran into a wall when trying to make the website look good. I studied graphic design for 4 years (and it did not go in depth), so for me, this revelation was surprising – I would have thought people are aware it’s a different skillset! But as I searched, there really aren’t as many resources for web developers that want to learn the basics of web design. As was already mentioned, the minimalistic design is often the hardest to pull off… but that’s (with its popularity, too) all the more reason I would have thought there would be more advice available!

Since this topic is interesting for you, I’d like to point out a few areas we focused on in the beginning that you might want to look into (if you didn’t yet):

(1) composition – rule of thirds, proportions, use of empty space (space = room to breathe, people tend to make things quite cramped), …

(2) contrast – not just for readability, but to bring focus to important parts (contrast can be in light x dark, warm x cool colours, bright and desaturated etc., but also in size, plain background x details, …),

(3) design that fits the theme – i.e. you can go beyond “handwritten font for a craft website”, you can use associations people have with the field in general, with colours, with shapes,… (like you’d expect, say, something dynamic and luxurious on a website for car racing, but that would be inappropriate for a funeral service where you’d go with more serious feel),

(4) less is often more (simple layout, limited colour palette, 1-2 fonts per page)

I hope something in that wall of text will be helpful for you. :slight_smile: But it really is good to see someone coming from non-artistic/designer background interested in this topic!

2 Likes
#8

I just read this article and thought some of the suggestions and inferences in it were applicable to this thread and people interested in being front end/ux type coders. Enjoy :smiley:

1 Like
#9

Thaks for the article Ascii.

After reading it, it kind of confirmed how I was feeling about this whole thing. I don’t think ‘taste’ is something you can learn from a book or a course (at least in my case) but instead with a process of exposing yourself to element you consider tasteful.

Something I’m doing lately is keeping a bookmarks folder (I love hoarding info too much) simply with websites I find good looking, reading about art, following designers on twitter…

#10