Lately I've been in the mood to work on some coding- and design-related tasks, and the perfect project to combine both was to work on the appearance of my site. Here, I want to go into a little detail about the changes that were made! (Disclaimer: This will be more of a tech-heavy post, so if you're not interested in that type of thing, feel free to ignore this post. I won't be offended. Promise.)
The inspiration for the refresh came from Google's Material design. Material was released with Android 5.0 (Lollipop) and has been updated since that time to refine the details. In general, the design utilizes flat colors and "cards" to show information. If you've used a Lollipop device, you know just how satisfying Material design can be.
While Material has primarily been used on smartphone/tablet apps, it's designed to be used on the web as well. Polymer is the toolset released to bring Material design to the web. It allows for all the same transitions and interactions as the mobile counterpart, and it's used to power some of Google's updated webapps (e.g., Inbox, Google Play Music). Unfortunately, using Polymer requires having access to the underlying code of the website, which I'm currently not able to access. (I use Squarespace for this site, and although they allow you to access the code for your site it requires paying extra, and it's not entirely clear if polymer will play well with the "blocks" they use to add information to pages).
Because I'm unable to use Polymer, I've been carefully playing around with the CSS of my site to mimic the look of material (even though I can't really replicate the feel). For those interested in seeing what the CSS looks like, you can find a separate post that contains the code.
In order to implement cards, I've either colored bottom borders of items listed in a "block," or made the spacer block colored and the same height. By coloring both as the same color of the background, it gives the appearance of a division between white cards which contain the information of my site. I can't add the subtle shadows Material cards normally have, so the effect isn't perfect, but it's there (especially on mobile). (Update: I've managed to find a way to use shadows appropriately, so they are actively being added)
The main challenge has been deciding how to group information onto these cards. Some things are obvious (e.g., in a list of blog posts, each post gets a card). However, some are less clear (e.g., on my social page should the social buttons at the top be alone on their own card?). If you have thoughts about how I've divided the information on the site, please let me know!
As noted under the picture at the top of this post, I pulled the new colors from the Material palettes provided on Google's design website. The Cyan palette was the closest to the color I was using previously (which I had just picked based on how it looked to my eye), so I started there.
Normally Google recommends sticking to the "500's" for the main colors. However, because my website (currently) uses the main color for the entire background (instead of just a large header), the 500 cyan color seemed too dark. So, I opted to move to the 300 color, then use the 500 color for the navigation bar at the top (since Google seems to recommend moving two blocks up and down to get complimentary colors). If you're viewing this in Chrome on Android, the address bar will also use the 500 color. The subtle shadow under the header, only a couple of pixels tall, uses the 600 color so it is just slightly darker than the navigation bar. (Update: That color has been replaced with a more appropriate shadow effect). Links are colored using one of the suggested accent colors, and my social links at the bottom are colored with the 50 color (I believe).
For the buttons, I moved to the orange palette to help make them stand out. Google recommends using a complementary color that stands out to show actionable items (like the Floating Action Buttons [FABs] that are being used in apps), so I followed that advice. I used the A700 color from the accent color mini-palette.
Along with the material design, I made some changes to how several documents are viewed. Previously, I had my CV embedded as a PDF file stored on Squarespace and utilizing the browser's built-in PDF viewer, but that led to a terrible view on mobile. In addition, I had Powerpoint presentations posted using the Slideshow block offered by Squarespace, but the block is intended for pictures and not actual presentations. As a result, the viewing options were limited, even though it scaled well across screen sizes.
Now, both are displayed using embedded Microsoft Office document viewers. I'm a huge fan of Google Drive, so I tried using the embed option built-in to that service, but the rendering wasn't entirely accurate. By hosting the files on OneDrive, you can embed files using Microsoft's viewers, which have done a better job of rendering the files. In addition, these all scale appropriately to the size of the screen and offer more options for viewing (e.g., fullscreen, downloading a copy of the file). From my testing, they're also lightweight enough to not have a noticeable impact on loading times.
I added a few more items to my resources page, including links to two playlists that I add music to regularly. Both playlists contain music that I've found to be great for playing in the background while working (including while making changes to this site). They both contain similar types of music; the only reason there are two playlists is because of a limit on the number of songs that can be in any one list.
With my site, I hope to provide a lot of information across a range of topics that can be easily accessible, all while still providing a good-looking design. One of the biggest challenges with this goal is finding the right balance of information to show; too much and things become cluttered, too little and information can be hard to discover. Search bars, tags, good organization, etc. all help to maintain a good minimalist style while making things easily accessible, but it's a balancing act I'm still trying to work through. As part of this refresh, I made a few tweaks to layouts in order to hopefully clean up the style a bit while still maintaining the same level of information.
If there are things you'd love to see made available on my site, please let me know! Even if that information is already available, it helps me to know that it may not be easy enough to find currently.
Finally, I went through and tried to make more aspects of the site consistent. Spacing of material, font (Roboto), ways of showing information, and so forth. It's still something I'm working to improve, though. My goal is to make everything feel like it belongs together, and to provide a predictable (and enjoyable) experience that will work the way users want.
While I'm mostly done with the refresh for now (though I have a bad habit of continuously making small tweaks), there are a few things I'm hoping to still work on.
One aspect of the site that I'm exploring ways to improve is the landing/home page (the default one that loads when you go to www.ddecator.com). Squarespace makes landing pages limited (e.g., you can't add blocks to supplement the information that is already on there), so I'm working to find a way to make a normal page act like a landing page. I have a working prototype that I like for mobile devices, but it isn't great for desktops yet. Once I've made more progress on it, I'll enable it for public viewing so anyone can provide suggestions!
I'm also hoping to add more visuals in some way. Part of Material is the idea of showing rather than just telling, and I want to embrace that idea. I've already started trying to add a picture to every blog post I write, and include pictures throughout (this blog post is an exception). But I also want to incorporate visuals in other ways, such as "hero images," icons/avatars, and the like. A major challenge with doing so is keeping the same lightweight feel, making sure the site isn't too data heavy for those using mobile data, and making good looking visuals from scratch. As part of my experimenting with a new landing page, I'm trying to incorporate visuals that I've created with GIMP, so as my skills improve with the program I'll hopefully be able to expand the use of such visuals.
For colors, I'm debating between keeping all pages the same color, or giving each page its own color palette. I already have colors picked out for the images on my experimental landing page, so it wouldn't be difficult to do, but I also don't want it to be distracting. Part of the challenge would be making the colors understandable and useful in some way, and in order to do so I want the links in the navigation bar to reflect the colors in some way (so it's clear which color represents which page). At the moment, I believe I'm limited to using links in the navigation bar, though if I can find a way to use images I have an idea of how to incorporate them.
Finally, I'll probably attempt to use Polymer at some point to do things with the design of the website that I've really wanted to do but currently can't. I have great ideas for how to display information, transitions to use, and so forth. Doing so will at least be several months in the future, though, so don't expect any major transitions to occur anytime soon. Even once I get access to the underlying code, I'll be putting together the new layout as a separate template, so you won't see the results until it's ready to be completely switched over.
Let me know your thoughts!
While I've reached a point that I'm extremely happy with, I am very open to thoughts and suggestions about what is good about the refreshed look and what can be improved!