Website Refresh, pt. 2
Alright, time for another technical post! When I have some free time, it's common for me to get sucked into a project that's relaxing, and this is a clear example of that. Even after my last post a few days ago, a lot more changes have been made to the site! Here, I want to give some more updates on what has changed, and some ideas about where I want to go from here.
One of the most noticeable changes in terms of the UX of the site, though also one of the more subtle changes, is the inclusion of shadows! Due to Squarespace's use of blocks, I previously thought there wasn't a way to use shadows properly. Thankfully, after much playing around with the CSS of the site (the only code I currently can manipulate), I was able to get it to work!
The effect is thanks to box-shadow in CSS. In order to mimic the shadows used in Material design, I borrowed values from a post on another site. Most of the cards use the shadows for depth 1, while some others use the shadows for depth 2 (or an in-between I approximated, which can be found in my updated CSS post).
By using shadows, it becomes more clear how things on the page relate to one another in three-dimensional space. This not only adds a layer of depth that is pleasant for the overall experience of using this site, but it allows for better combinations of material, which leads to...
Thanks to the shadows, it is possible to have the background of blocks near each other in a way that shows hierarchical connection. To illustrate what I mean, you can look at my resources page. Before, I struggled with finding a good way to show a lot of objects that were grouped together (like buttons, or links to recommended resources). Because of the way the blocks work, I previously had two options: 1) have them all together, but have shadows that overlap, or 2) have space between them, but no good way to visually have them grouped.
Thanks to figuring out a trick with .sqs-row that I could use to identify "blocks" behind a group of similar blocks (e.g., buttons), I was able to add a light gray backdrop to make them visually grouped together. In addition, this backdrop could then be up against a white text block without necessarily having competing shadows. Thanks to the z-indexes, the shadows give the illusion of a header with a tray underneath it containing materials, all on top of the background!
In addition to these better layouts, I also did some work to make things more consistent and minimalist. For example, the search block now only has the bottom border, which is colored to fit the theme of the site (as you can see above). Similar changes were made to my Contact Me/Feedback form (found by clicking the button at the bottom of most pages).
Finally several things were done to help make things more visually exciting. First, icons were added to the header of the site. These were created by me, and have already gone through a second iteration (which I'm much happier with). The icons use some of the colors specified on Google's design page I've linked to before. Along with adding more visuals to the site, they have the added benefit of increasing the hit box on tablets for switching between pages. (The links are still untouched for phones, though I may find a way to add even smaller icons and to space out the links a bit more). Subtle shadows were added to these icons as well to help them fit in, add depth, and help to naturally illustrate that they can be clicked/tapped. And, when you're on a certain page of the site, the header now shows a light blue underline for the section you're in, similar to the "tabs" introduced in "Holo."
On my resources page, most links have been replaced. I temporarily had them as buttons instead, but the buttons have been replaced as well with image blocks. These allow for more interesting visuals, akin to the cards used in Google Play Music, and they're even more touch-friendly than the buttons.
Finally, there's a new graphic on the landing page! I decided to make a brain for some practice with GIMP. The original version wasn't great (lesson learned: use a really high ppi initially, and scale down later), but my friend Andy (@andyvangessel) made a higher-resolution one for me that is currently on the main page. (Thanks Andy!). I might add some more visuals here and there, but I also want to keep the landing page somewhat minimalistic.
For next steps, I'm not 100% sure at this point. All of the things that were really bugging me have been fixed, so from here it will most likely be small tweaking to help make the UX smoother (though I said that before and then made some more major changes). For example, I might work on the spacing of content to make it more consistent and in-line with Material. (I'm aware that the spacing is somewhat different on different pages; still deciding what I like most).
For those interested, my current CSS is available in an updated, separate syntax post. I need to go through and clean some of it up eventually, but it all seems to work well and there shouldn't be too much to cut down. Though if you notice anything that doesn't seem to be right, please let me know!
Finally, I just wanted to make a quick life update. My Graduate Assistantship hours are now finished at DePaul. I'm actively exploring options for part-time work, but I'm also available as a sort of freelancer! If you are looking for someone to help with research, syntax writing, some site development, etc., feel free to let me know! Just use the Contact Me button at the bottom of the page, and I'll follow-up with you shortly after that.
In addition, I'm hoping to take some of this time to begin working on more blog posts and make progress with some manuscripts, so watch for updates from me about both!
Opinions on the newest site changes? Want to see blog posts on certain topics? Let me know in the comments!