WELCOME


Webdev: Finding the visuals

STEP 1: Find an aesthetic:

Is there an aesthetic you really like? Maybe you have a board filled with those designs, or you've recently seen some visuals you really liked. At the moment, I've been interested in Retrofuturism in UI from Sci-Fi media such as Star Wars, The Expanse, The Fifth Element, etc.

I've always loved futuristic designs depicted in media, but I've noticed that a lot of modern aesthetics on that part feel very plain (mostly monochromatic, minimalist) that I didn't realize how much of 80s sci-fi had a lot of character to it that it's still being used in some cases to this day. So I'm making my website based on that style.

STEP 2: Gather references:

Start building a moodboard of the style you like! Bonus points if they've actually been used in UI/UX design e.g. Frutiger Aero. Using UI design references would make it easier for you to refer upon. Otherwise, you're free to come up with UI designs of your own if you feel creative enough. Start with sketches on paper (or any app that lets you doodle) so you can brainstorm.

I've gathered a list of links I found that helped me find the direction I want for my visuals:

These sites consist of blogs that are deep dives of the Sci-fi UI you tend to see in movies and games. It's useful to see other perspectives of how it's done:

Sci-Fi Interfaces

HUDs and GUIs

This one's a specific example from the video game Cyberpunk 2077, which used 80s influenced sci-fi visuals and made them modern:

Cyberpunk 2077—User Interface (Part 2) - Vladimír Vilimovský on Behance

This one's made for games, but games are also a great way to find unique, interactable designs. It contains a database of images and videos referencing how menus look and interact in different genres:

Game UI Database

Interface in Game

This website specializes in navigation bar designs for sites:

Navbar Gallery

I also made a moodboard on Pinterest. You can find some nice looking images on that site, or on Tumblr.

Speaking of Tumblr, there's a blog that does themes for Neocities! Some of what they do are very close to what I'm looking for.

Reddit also has subreddits dedicated to different styles, I found some of these images related to a particular retro style from these Subreddits:

r/CassetteFuturism

r/NoSodiumStarfield

Old website archives are also great to learn from as they were much more creative in their looks:

Web Design Museum

Also if you have a hard time finding a particular aesthetic or don't know the name of it, check the aesthetic wiki. They have all kinds of visuals referenced there and also provide examples from images to media.

I would also suggest consuming the style of that media so you can get a better idea of how they're used.