design development


It’s been a heck of a while since I posted. Looking back upon the recent posts, the sad fact is I can count all the posts, written in the past year, on two hands (e.g. 10). Work and real life have become increasingly demanding and time has simply flown by.

I had some free time this weekend; I decided to spend it on this largely neglected space, first deciding to spruce it up, with some visual tweaks to better delineate pieces of content. I am also pretty partial to both minimalist and Material Design trends, so you might see of that here.

The combination of php and css theme files usually mean I fire up Notepad++ and go to town. But, just before I did that, this afternoon, I recalled we recently launched Visual Studio Code, a light-weight, multi-platform editor, with some handy features you’d normally find in an IDE. The full-blown Visual Studio hasn’t risen to the top of my simple web-editing tools list, but Code looked better targeted. A 50MB download and short install later, I was up and running.

For the few hours’ work, I found four handy features that helped me get things done more quickly and with fewer errors that normal:

  1. File management – I opened up the WordPress theme folder, doubled clicked one of the files and was away. I could view the entire context of the theme files and quickly jump from one to another. Autosave made viewing design changes in a browser just that little bit quicker.
  2. Editor layout – Snapping two, even three files side-by-side was very useful, for editing a post template (or two), while simultaneously looking at the CSS stylesheet. I later found out you can accordian-minimize windows and switch between them, to fit even more, side-by-side.
  3. Search – The modified theme this site is based on includes multiple content type templates. I initially cringed at the thought of adding a new styling class to the content div, included in each of these templates (and more likely elsewhere). However, I discovered the global search function, which suddenly made it trivial to update every file that needed touching. On other occasions, searching for classes in the stylesheet is made simple with file search; result locations are denoted in the scroll bar, so you can quickly jump around between instances, as well.
  4. IntelliSense – IntelliSense has helped make countless developers more productive, and by providing it in Code, there are far fewer context switches to peeks at references. It even has highlighting to tell you when one of your styles is rendered ineffectual by some other property you defined.

All in all, I had a bit of fun, cleaned up the theme, and discovered a new favourite WordPress theme editor.

design microsoft

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.