[nolan@nprescott.com] $>  cat blog archive feed

Trends in Web Design

2016-03-23

I struggle to keep up with trends in web design. It all goes back to solid fundamentals but I like to try to stay abreast of what is currently fashionable. This is an exploration of partially automating that assessment.

Basically, I'm Lazy

I got to thinking about how to keep up with design trends with a minimum of effort. In particular I struggle with color, I can recognize things that I like, but if I just sit down with a blank slate I struggle to create something visually interesting. Due to this, lots of my work is done in greyscale. I've been thinking about how I could keep a pulse on what is trendy now without having to dedicate too much time to the process.

A Likely Candidate

I recently found Awwwards.com, which claims to be "The awards for design, creativity and innovation on the Internet". Promising start. Problem being, I don't love their site. It's full of rankings, links, descriptions and a host of other things I don't care about. What drew me to the site was how they've essentially editorialized a bunch of sites that I'm probably never going to stumble across on my own. They also provide screenshots of those sites. This last bit is key here.

How

The "awards" page fits 12 "winners" to a page and they've helpfully paginated their URLs as such:

http://www.awwwards.com/awards-of-the-day/?page=2

Since what I really want is just a 20,000 foot view of trends, I'd like to just compress all of my clicking and scrolling into as few actions as necessary. The images on each page are located in a non-browseable directory based on year/month

http://www.awwwards.com/awards/submissions/2015/05/5563551e61b26.jpeg

My first goal here is to get all of those thumbnail images in one place. I think cURL seems like a good choice for iterating through those pages. It looks as though 25 pages gets about a year or year and half of trends, which seems sufficient.

curl http://www.awwwards.com/nominees/?page=[2-25] >> output.html

Which will land you with a big honking page of HTML (about 25k lines). Let's filter out all of those image links, I'm fairly confident I won't run into anything problematic with the following regex. It's just creating a capture group on strings matching /awards/submissions and ending in jpeg and passing that off to build the full URL.

sed -n 's/^.*\(\/awards\/submissions.*jpeg\).*$/\1/p' output.html \
| sed 's/^/http:\/\/www.awwwards.com/' > image-links.txt
http://www.awwwards.com/awards/submissions/2016/03/56f159f666acf.jpeg
http://www.awwwards.com/awards/submissions/2016/03/56f1a25d1ea79.jpeg
http://www.awwwards.com/awards/submissions/2016/03/56f1fc1b6fcdd.jpeg
http://www.awwwards.com/awards/submissions/2016/03/56e2a4d6d8a0c.jpeg
http://www.awwwards.com/awards/submissions/2016/03/56e2107ed369e.jpeg
...

There are, in total over 200 images in those 25 pages. It is simple enough to download them all, I like wget for this kind of thing:

wget --no-parent -P images -i image-links.txt

So now I have 243 images, about 35MB total. I think what I'll try is a kind of contact sheet. Imagemagick is supposed to be capable of doing something similar with the montage command.

  montage -geometry 700x500+5+5 \
          -background none \
          -quality 60 \
          -tile 4x
          images/*.jpeg images/output.jpeg

The geometry here is simply maintaining the original image sizes, the +5+5 specifies the padding between images. The -tile command is fixing the output at 4 images wide. I am turning down the quality because the result would be obscene otherwise, I'm keeping the same resolution here but that might make more sense to turn down with the drop in quality. The resulting image is just over 8MB and comes in at about 2800x31000 pixels.

Results

montage image of design websites

The above sample is limited to just 40 images for the sake of bandwidth, the resulting image is still quite large (1.2MB 2800x5100).

As a one-off it's easy to browse for a palette that appeals to me and to get a sense of current trends in web design. It appears hamburger menus, hero images, and transparent navbars are here to stay, pity. I've been browsing for similar sites and happily found several that follow a similar pattern. What this ultimately means is this process should be repeatable in at least a few contexts.

Follow Up

I'm thinking of how to generalize this kind of thing to identify the dominant colors/palettes in use; something like what Charles Leifer did here. My impression so far seems to be I need to derive each images color values into a different colorspace than the traditional RGB. Current reading is: Color Detection, DeltaE 101, and this HN thread.

[nolan@nprescott.com] $> █