I’m going to talk about 2 things: Web Brutalism and CSS Animation Effects, both topics are related to user-experience.
Web Brutalism
The latest trend in web design is called web brutalism, which is the total lack of concern for usability and making things look weird and crazy on purpose. It is a reaction to the clean, minimalist, even hipsterish websites that people have become accustomed to.
This website has an extensive list of brutalist websites to explore.
Now, these websites are NOT for a broad audience. You would not want to implement any of these designs into a website for banking or a medical facility, any site where all people need to find and access information quickly and have usability be easy, which is probably 99.9% of websites. BUT, for people who are interested in web design and/or art, or people who are a bit weird and quirky, these sites are fun to browse, just to see what odd stuff can be done on the web. For example, this website turns your cursor into a writing tool, allowing you to write on the screen. You can even play tic-tac-toe with the website. Is it easy to use? No. Does it have an aesthetic that people are used to? No. BUT even though it is difficult, it is fun to scroll and navigate through, trying to figure out what is clickable and what does what, almost like a video game.
So even though you’re not likely going to put giant neon green text on most projects, it’s still worth going through some of the sites for inspiration. See if you actually enjoy any of them and if you have fun. If so, think about how you can implement that fun part of the user-experience into your next website, or how you can make your site unique in a way that isn’t necessarily as jarring as some of those brutalist sites. There was still thought put into those designs to make them intentionally weird. I suppose there a few ways you can tell the difference between a design that is intentional vs. a design that is just bad. What is the intention of the website? Who are their audience? Does the color scheme look like it actually kind of goes together even though the colors are ugly? Are the font choices more than just default? Some websites may take it too far though. You don’t want to induce seizures on your users. Is the site fun or just ugly and annoying? There are some sites on that list that are annoying actually, so where is the line drawn for you on what is taking a design too far off the edge? These sites may also help you appreciate clean, minimalism.
I personally enjoy looking through the brutalist websites because I think they’re funny and I like that they are so different and don’t use the basic cookie-cutter templates and fonts that you see over and over again on most websites, though I understand that there is a basic formula that needs to be in place to keep the usability intact and information as accessible as possible for as many people as possible. At my old job I had to do a bit of research and I used to hate trying to skim medical or govt. websites looking for basic information, heading face-first into a giant wall of small text with no headings. You’re lucky if you get even a small amount of padding on most of those sites. Those sites are just bad, not fun to browse or use at all, nor easy, nor aesthetically interesting.
CSS Animation Effects
I do need to learn more about animation effects and how they work because I want to start implementing them into my designs, in moderation though. It is fun when things move on hover or when you scroll, though sometimes it can keep some content hidden if somebody doesn’t scroll all the way down (I am seeing this at my internship site, I upload the articles and images to their website and the images have a default side animation, they slide in from the left on scroll, but the text is always there. I try to lay out the content so that the text is usually to the side of the picture, as an indicator that there is more to see, but sometimes I have to turn the animations off completely if I think the article will look weird with a bunch of images not appearing right away.)
CSS3 uses the @keyframes property to declare what should happen during the animation. Then you can apply the animation when you style an element and tell it the duration of the animation and how many times it should run (the iteration).
This W3Schools post is good beginner information to start animations from.
You can also use transitions to animate divs, though that link shows it being done on hover.
This W3Schools post talks about 2D transformations.
I’m going to start playing with these techniques to bring my websites more to life and make user-interaction more enjoyable.