Artistic influences on front-end development 🎨

Published on 11.11.2023

Category: Frontend

I’ve always been a very visual person. It helps me tremendously when I can relate through the visual, and I think that has to do with my close connection to art, among other things. I often think in images, and through images of any kind I develop a feeling, an idea or an association that allows me to understand what I have to do. Only then can I find the words to describe my idea.

In art, the aim is usually for the artwork to trigger a feeling in the viewer, and this is not much different with websites. In the world of web design, however, you want to attract users, not make them feel uncomfortable. My approach is to first find a feeling, a vibe, and to visualize it - whether in my head or through digital designs and sketches.

Integrating creative thinking into the code

When designing websites, I first ask myself what feeling I want to convey. I like to use colors, fonts, shapes and images. The scope for creativity is enormous and I love experimenting with it. I also think back to the early days of the internet, where eye-catching elements such as flashing text, midis and seemingly out-of-control animated GIFs were accepted. These details gave each website an individual character that revealed something of the individual’s inner world. Although such practices are no longer as popular today, I find it exciting to think about what creative elements like this could still be integrated into modern websites.

Artistic approaches are limited in the code itself, but the structuring and organization of the code can still convey a certain aesthetic. A meaningful design is possible, for example, by assigning plausible and easy-to-understand variable and function names. As you can quickly see from my repositories on GitHub, I work a lot with CSS. I’m still not quite sure what the best possible order of the respective declarations is. It makes sense to me to start with the layout and/or flex and grid. But on the other hand, I personally like to put the background color first. Simply because I tend to orient myself towards colors. So I’m still in the process of finding the ideal order.

Choosing an appealing code editor also helps to make work more fun. If the development environment is to my liking, working in it is even more fun. This may sound superficial, but: I love syntax highlighting and how it makes my code look in beautiful colors!

.about-grid {
    background-image: url('img/pexels-burak-the-weekender-1253050.jpg'); /* Aha! Hintergrund-Bild */
    background-size: cover;
    background-position: center;

    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    justify-content: center;
    column-gap: 2rem;

    width: 95%;
    min-height: 100px;
    
    margin-top: 2%;
    margin-left: 0px;
    margin-bottom: 100px;
    padding-top: 1%;
    padding-right: 50px;
    padding: 2%;

    border: 1px solid #222;
    text-align: justify;
    text-justify:distribute;
    letter-spacing: 0px;
    word-spacing: 3px;
}

Aesthetic principles from art in front-end design

I have a lot of fun playing around with colors, but I also enjoy doing the exact opposite. Whether it’s painting, drawing or frontend design, I think it’s great to have all the colors at my disposal and to find a suitable interplay that is colorful, maybe even flashy, but not chaotic.

I was particularly inspired by the GameBoy Color’s four-color system, which is why I limited myself to four colors for this blog. I find the idea of taking this principle even further by limiting it to just two colors particularly appealing at the moment. Considerations about directing the viewer’s gaze and the optimal arrangement of elements and text, influenced by my experience as a comic artist, also play a major role in my design process.

I don’t necessarily believe that the combination of art and code can lead to more innovative and user-friendly solutions. But I do believe that it is important for everyone to discover the best working and learning method for themselves. By “best” I mean the method that helps with progress, understanding, learning, remembering and internalizing. Because that brings a sense of achievement, motivation and enjoyment. So perhaps we should say that creativity can lead to more innovative and user-friendly solutions, not necessarily art. Which brings up a philosophical thought: If coding is art and you have mastered the art of coding - i.e. you are an artist - then surely this must lead to innovative solutions.

For example, in Galaxy Groove I had a lot of fun coming up with the concept of what a retro spacegame community could look like and with the cute pixel art I could also let my creativity run wild. Unfortunately, I still haven’t taken the time to create a prototype of the game myself because I’ve prioritized other construction sites. There is indeed a trend towards the Old Web, at least visually. Maybe I should write a separate post about that! :-)

Galaxy Groove Screenshot

Development tools and resources

When I started coding back then, there weren’t that many options, and I mainly worked in the standard text editor and also in the editor that was already integrated in Geocities, for example. Later I tried Dreamweaver, which also worked. However, I didn’t really like the editor. Then I discovered Brackets, and that was my editor of choice. This was followed by a long break, during which I didn’t need a code editor. And now that I’ve returned to web design or web development after a long break, I have VS Code. In connection with my further education, I first installed and used IntelliJ IDEA. I was dealing with Java and IntelliJ seemed to be the best option. When I finished with Java and went back to websites with HTML and CSS, I installed VS Code. At the moment I have both, but VS Code is my clear favorite.

Feedback, community and personal development

My main focus is currently on JavaScript, which is essential and I have a lot of catching up to do. When I feel ready, I will definitely look into one of the well-known and popular frontend frameworks. But I also want to learn more about Git and make sure I get the most out of GitHub. Besides the aforementioned two-color design, I’d like to explore current trends in the new old-web approach, but I’m also keen to try something completely “fresh”. I’m thinking along the lines of space and sci-fi.

Thanks for stopping by and see you soon! ✌️