Card-like Design

Microsoft may have helped usher in the trend of “flat” elements in UI with Metro, all the way back in the Zune days, and Google’s take with several pieces of the Android 4.0 experiences had more than a passing resemblance. However, more recently, Google’s manifestation of the principles are evolving, taking some cues from Facebook and Pinterest. Particularly impressive is the information density that they’ve been able to achieve, while maintaining whitespace, cleanliness, and organization. Take a look at Google+.

Google Plus

And, so, as part of design feedback’s cyclical nature, I’m seeing hints of a similar evolution in Microsoft’s recently announced products, over the past couple days. First came the MSN Preview, ushering in a completely new design and information organization scheme. It includes fantastic ties into the cloud-connected experiences I already use on my Windows Phone. For example, the stocks I follow, added to the Bing MSN Finance app on my phone, show up on the MSN portal, automatically.

MSN Preview 2014

Second, Office Delve, launched earlier today, is all about using information and relationships discovered via the Office Graph to surface relevant content and information (primarily in the form of documents and SharePoint content, from what I can tell). Think of it as Google Now, but for your work content. Not only that, its design and organization are similar, as well.

Office Delve

I, for one, quite like the card-like designs that are popping up. The content chunks reflow well for both large, multi-format displays (everything from 16:9 notebooks to 4:3 iPads, as examples) and smaller, portrait displays, like those found on smartphones. The cards are self-contained entities that give the user enough information and quick-action hooks to either dive deeper or move on.

Minor Site Refresh

Before I focus on Windows Phone development, I undertook a minor refresh of this site’s design. The refresh gives me the opportunity to highlight some additional content at the bottom of the page, and brightens the whole place up.

In the meantime, I’m still trying to wrap my head around how to apply the Metro style Principles and Personality to the site.

The Next Chapter of Random Process

It’s time for Random Process to move on to the next phase of its existence.

I started Random Process, née Nfiniti Plus One, in 2005 to keep in touch with friends and share my thoughts after moving from childhood home of Prince Edward Island. Since then, I’ve charted my progress through university, showcasing my changing interests and passions. I am about to graduate from my engineering program and enter the working world, and it’s time for this blog to grow up as well. Writing about my day to day thoughts and activities is no longer very appropriate for the environment I’ll be in.

Photography has increasingly become a significant part of my interests and I’m going to repurpose Random Process to show my work. I’ve posted a photo or two in the past, but the design of the site was never conducive to displaying the work in a pleasing manner. What you see here is the design I’ve come up with to put the emphasis on photography.

Hopefully this will also be an incentive for me to get off my butt and process the sea of photos on my hard drives. Enjoy the stay.

An Emphasis on Typography

Just yesterday, I wrote about some redesign efforts that are underway. One huge catching point has been my struggles with typography and fonts for the new design. I never put much thought into web typography in the past, but after perusing some great designs around the internet, I’ve come to realize its importance, especially in a text-heavy design, such as a blog. Web compatibility was a big reason for staying within the safe confines of the common fonts in the past, and I didn’t want to venture into Flash-based text renders to expand the font-palette.

So, when I read about cufón and subsequently typeface.js not three days ago, I realized the means for inserting some new fonts into the design was possible.

Then imagine my surprise when I sat down in my User Interface Design class today and found out the topics for the lecture would be typography, fonts, and design salience. The first few lectures of that course have been a bit dry. They focused more on the analytical (scientific) side of UI design. They drove the design processes and methodologies used for gathering information on the system, with which design decisions can be made. Now with that largely out of the way, we’ve moved onto the emotional design (artistic) portion of the course. This is what I signed up for.

As with any practical topic, attempting to teach design in a classroom can be difficult (similarly, we had a debate on the merits of teaching entrepreneurship in my entrepreneurship class), but I firmly believe that there are academic concepts which can be used in very practical situations. For example, our discussion today on the effect of color on design element salience enabled me to make a better decision (in my opinion) in the upcoming redesign. That’s academia in practice.

Listless

Alright, a quick post before I head off to bed.

There’s been some serious neglect around here. I honestly haven’t had much to write about these past days. University has started back up, but I’ve felt completely listless this semester. Part of it has to do with the fact that it is my final undergraduate semester (boy, it feels weird, not necessarily good to say that), and part of it is that my schedule isn’t conducive to a whole lot of caring. Classes start no earlier than 11:30am each morning and I have Thursdays off. I should be careful not to let go too much. Reading the fourth year design project documentation is so very boring. The lack of enthusiasm and interest has translated to this blog for the past couple weeks. I can’t remember the last time I felt this way.

Fortunately, I felt a burst of inspiration mid-day Saturday, but not in the form of writing. Instead, I spent a chunk of time mocking up a redesign for random process, working late into the night. I’ve come up with something I’m happy with. Now comes the tough part of translating my static Photoshop mock into a real, working website. Here are a couple teasers.

Photography has clearly been a huge part of my life over the past two years. I think it’s about time the website reflects this. I’m going to put more emphasis on showcasing some photos.

I purchased a Zune HD while I was working in the States, and have come to absolutely love the design of the UI. You can expect to see many of its design elements incorporated in the final product, such as purposely truncated text.

Furthermore, web technologies and ‘fads’ have progressed at a rapid pace since my most recent design (about a year ago). I mentioned back then that I wanted to incorporate a bunch of dynamic features and a more static portfolio homepage, that would make the site a bit slicker to navigate. Unfortunately, only the blog portion of the site got redesigned and there’s still no AJAX-y goodness. As much as I’d like otherwise, it’s unlikely I’m going to have much of a portfolio to showcase, and I haven’t come up with a good way to manage the content there, short of a lot of manual editing. And let’s be honest, I’m almost sure to let the content get stale. Yuck. But, I’ve identified some cool effects that I want in the next iteration of random process. Yum.

Okay, I’ll leave it at that. Night.