March 2017 – Christina Anzalone Art & Design Blog

Freeform: Blog about any topic related to web design

03/29/2017 No Comments

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.

Advanced Web Design

What is a work flow? What’s your ideal personal work flow?

03/23/2017 No Comments

A Work Flow for web development is the process in which you design and create the website. There are a few steps involved in the process, and it differs a bit based on if you are starting from scratch or if you are redesigning something that already exists. Organization is the key, and it can get overwhelming if you’re presented with a ton of unorganized information that you need to make sense of. My ideal personal workflow is:

Define client needs and audience.
Research what competitors are doing, what’s working, what’s not, and draw inspiration.
Organize the information and figure out the sitemap.
Research fonts and color schemes, make type and color studies to see what will fit the mood of the website and match the client’s branding, what will appeal to the target audience?
This is the part where you’re supposed to do wireframes, but I actually really just like to start comping right away with actual information/data that will be on the website, so I can visualize what it will look like and how everything will look altogether, colors, fonts, images. Create a few mood boards, determine which one will fit best, then from there start determining the layout. I can gain a good idea of what the layout should be from doing that, then do wireframes if needed.
Get approval and start coding. It’s probably a good idea to get your HTML organized first, then start styling in CSS.

Advanced Web Design

Plug-ins: What are they and why are they important?

03/16/2017 No Comments

Plugins are pieces of software that can be added to a WordPress website. They contain a group of functions that can add new features to your site and extend the functionality. They are written in PHP programming language and can be integrated seamlessly with WordPress. WordPress users can make their site cool without knowing advanced code. They are important especially for people who don’t know much PHP programming, but want to have a sleek, modern website.

Advanced Web Design

WP Project: Present your comps

03/09/2017 No Comments

This week our WordPress comps are due and the project has been a bit stressful. I fluctuate between wanting the site to be creative, but also wanting it to be clean and classic. I don’t want too many colors or distractions because I want the focus to be on my work, yet at the same time, I do need to figure out my own branding, color scheme and mood and it needs to be reflected. I do want there to be a giant hedgehog on the site, and I spent a lot of time trying to figure out what that should look like. I’m really liking glitch art right now too, so I experimented with some of those techniques on a drawing I did of my old hedgehog Boo Boo, and I used the color scheme I have tentatively decided upon, which is very bright and bold, but it’s so I can get a pop art feel. I did finally have a breakthrough with the art, and it does embody the spirit of what I am going for. It looks like something out of the 80’s, like it would be in an old IBM computer game or Street Fighter. I might redo the hog drawing though and redo all the digital effects, but it’s good for now and at least I have a clear direction now. The website design itself was also a bit of a mashup, and what was stressing me out is that there are so many ways the portfolio page can be done, what is the best way? What is the compromise between everything being easily accessible, vs the site being fun to interact with? Even some of the sites I looked at for inspiration did start to annoy me once the initial novelty of seeing something unique wore off. Because though those sites have an interesting menu interface, they don’t make it easy to go back to the landing pages for each category, so having to click a lot does become annoying, but the pages are pretty and most people won’t be going back to the pages a million times to look at minute details on how they laid out a button or some other UI detail.

Anyway, I’m happier with my font choices now, though the main one seems to sometimes not translate to jpeg very well. I think the layout and functionality of the site is there though. I made 2 different Portfolio landing pages because I’m indecisive. But look at that pink hog though.

home page and portfolio page version 1 Homepage and portfolio page version 2 comp of many pages

Advanced Web Design

Mid-term checkin: How’s your semester going?

03/08/2017 No Comments

It’s going ok, my internship is good, I’m interning at a local magazine and enjoying article layout, also learning about making posts via Word Press there. I’m surviving classes, it’s all web this semester so I have been able to wrap my head around a few code items that I had encountered in previous semesters but didn’t understand what they were talking about, such as psuedo classes, before: and after: and content: “”. I now at least know what is happening if I see that in a code example. I am also starting to use animations more, which is fun, though still have more experimenting to do with that. I’m now a bit better at dissecting plug-in examples and figuring out how they work, though it takes me a while sometimes if the code is extensive. I try to recreate the example that is online first, then once I know that works, I go and try to fuse it into my own project, but that has it’s own challenges. Making sure you have all the javascript linked correctly, figuring out which classes need to be restyled in CSS, figuring out how to change all of it when it goes responsive…it’s a bit exhausting and daunting, even with the inspector, which also doesn’t always work correctly with resizing and viewing mobile sizes. Anyway, when things finally DO start working and doing what you want them to do, it’s even more rewarding. I’ve also been trying to figure out my own branding on top of that, and I’m so indecisive, I drive myself crazy. There is a lot of pressure for it to be awesome, but I’ll talk more about that in the next post.

Advanced Web Design

Working with Responsive Images: What are the Pitfalls?

03/01/2017 No Comments

Some pitfalls of working with responsive images are:

Some may need to be repositioned within a div as the screen gets larger or smaller .
You have to make sure your image has a decent resolution if it is going to be full-screen, but not too big where it will eat data/bandwidth.
Some screens use retina display, and you may need to have 2 versions of each image so that retina displays can see the higher resolution one.
If an image is not working, you need to have a background color as a fallback.
If text is on top of the image, the readability of the text may be based on where it’s located on the picture, which again means you may need to reposition elements as the screen gets smaller, and consider what would happen if the image gets switched out with a different one down the road, the text still needs to be readable.

General Web Design

Why it Might Be a Good Idea to Always Use a Type Kit Instead of External Linking

03/01/2017 No Comments

I was searching to see if Lato font uses ligatures and I stumbled upon this troubleshooting page from a month ago, where suddenly Lato font had been updated on Google Fonts and people’s webpages were looking off due to the x-height change. They ended up reverting it, but the lesson is that they can change the appearance of fonts at any random time without notice, which could result in broken, ugly pages and alignment being off.