Saturday, July 16, 2016

Web Design Trends

Last week in my Web130 class our teacher asked us to do some research and come up with a list of web design or development trends that we find interesting. We then presented our list to the class and gave an overview of each trend we found. It was fun and instructive to see the breadth of topics and opinions shared by a 15ish person class. Here is the original compiled class list.


My 5 Top Web Design Trends


     Microinteractions

This one is definitely my favorite of the five, probably because I am kind of obsessed with UX (user eXperience) and UI (user interface design) principals and ideas right now. Microinteractions are subtle/subtlish visual feedback that help guide the user without being unobtrusive or overly distracting. An example of a microinteraction would be when a button changes color when you hover the mouse over it. This site has some helpful examples of microinteractions that are pretty fun to play with. Now, as much as I like this for of user feedback, there are some things to consider in the technical realm. What if you are using a tablet, how does the hover function work then? Uh-oh, when I’m on a tablet using a touch screen it’s impossible to hover! In this case it would be better to use an interaction that gives feedback when clicked instead of relying on the hover.

      Websites With Slides

This trend takes the home page of a website and replaces it with PowerPoint like functionality. Instead of having one landing page that links to the other pages there is a slide show of several different topics which you can click on to read more about them. This site utilizes the slide show format to display Facebook's year in review. Each slide is a picture of the topic and has a link to a blurb about the topic. My problem with this design is one of navigation, since there is no main page to go back to it can be confusing to navigate this site. I kept thinking “Is this it? I feel like I’m missing something!” But no, the site is small and simple, the navigation structure is just not what I’m used to.

Long Scroll

Oh long scroll, how I love and hate you. Long scroll sites have several pages worth of information and/or navigation items organized vertically in one long front page, so you have to scroll, and scroll, and scroll, and scroll, well you get the idea. From a purely visual point of view long scroll sites can be beautiful and fun, and I’m sure they are a delight to do the visual designs for, but from a practical standpoint they are boorish and excessive. Having a sticky nav at the top of the page that will follow you down as you scroll helps alleviate some of the frustration involved with using a long scroll site but only a little. To be perfectly honest I find most long scroll sites to be a bit masturbatory, they are beautiful feats of design and coding, but are they really necessary?

Here is a super silly example of a long scroll site, how far can you scroll??

Interactive Scrolling

Interactive scrolling can be seen as the next evolutionary step of the long scroll, or perhaps the younger brother of the long scroll. Interactive scrolling utilizes the same continuous scrolling elements of the long scroll to display information and visuals, but it adds a movement element. The visuals in a basic long scroll site are static whereas with interactive scrolling react and move based on your scrolling through the site. I feel pretty much the same way about Interactive scrolling as I do about the long scroll….meh. It is pretty cool, but I don’t really want to use it on a regular basis. Call me lazy, but I don’t want to have to scroll for 3 minutes to basically watch a cartoon advertisement for your business, actually it’s a .org so is it a business? Who knows! I certainly don’t, and do you want to know why I don’t? Because I got tired of scrolling and left the site before they could sum up what they do for me.

     Material Design

Material Design is a specific design language that Google developed and released upon the world in 2014. It is based on the idea of having a comprehensive visual language that everyone can understand and use. Do you use Gmail? Google+? Google Hangouts? Google in general? Then you have encountered Material Design. The manifesto babel on their site breaks it down as a synthesis “between classic principles of good design with the innovation and possibility of technology and science.” That’s cool, what does it mean? (This translation is thanks in part to my art degree and art history minor, turns out art babble and google design babble are very similar languages). Well, as far as I could tell the idea is to take a visual language we already are comfortable with, i.e. paper materials in the real world, and utilize those properties to create a web/app based language that is easier for users to intrinsically understand. While the explanation of what Material Design is can be hard to slog through and wrap your head around, the actual implementation of it is quite lovely.



No comments:

Post a Comment