Tag Archive: process

  1. Truth in design — make it yourself

    Jan 03, 2014 2 Comments

    I’ve been bothered lately by the abundance of UI packs, starter templates, icon fonts, tutorials and everything of the like. Maybe I’m getting cranky and opinionated in my old age—but I feel that relying on these things is lazy, irresponsible and contrary to how I was taught in art school. I think we should take the time to explore and experiment with designs—but more importantly consider the brand, company or person you are trying to represent with the design. That should inform the aesthetic more than personal taste, trending styles or access to tutorials.

    To be clear, I have nothing against the existence of the above mentioned tools; just the irresponsible use of them. If you aren’t a designer or lack the appropriate skills, and you are looking for a way to get a  proof of concept or build a working prototype, then by all means go grab Twitter Bootstrap, download a flat UI kit or whatever. If you are a designer, or developer, however; I implore you to take the time to really think about what your working on and don’t just use something someone else built to get it done.

    I also have great respect for those who take the time to built these great tools and intend to help others; it’s just that we are beginning to lose that so-called element of “craftsmanship” when we use someone else’s designs. In the quest for efficiency and profitability I feel we’ve sacrificed a fundamental element of design.

    Design is the purpose, plan or intention behind an action or object.

    By slapping a framework on your product you are forgoing one of, if not the most, key parts of developing any idea. Design is the visual language of your product; do you really want it to sound the same as every other product using the same framework?

    Learning Through Doing

    So much is learned in the process of figuring things out. If you download a UI kit with all the buttons and text styled for you you’re missing out on learning why those things work. Trying and failing and trying again until you find that perfect font size for legibility and anti-aliasing setting for crisp text teaches you a lot; not just about the software but also about the importance of all these small decisions and how they begin to add up to a form gestalt.

    By starting from scratch you will learn over time how to best pad type within a button based on it’s context, or how to space images and other elements from each other in a layout to clearly communicate relationships and hierarchies. I compare this to paint by numbers. Anyone with the ability to read, hold a brush and dip it in paint can follow the directions to paint a seemingly nice painting. For the beginner it’s a fantastic feeling to accomplish something you previously thought only talented professionals could pull off. It’s also a great way to build the foundation skills and confidence needed before you dicard the training wheels and take more risks. If you’re trying to be a professional I feel strongly that you should make it yourself.

    I recently read this article which shares a common theme, and I agree with the sentiment: http://scottkellum.com/2013/12/11/ui-kit-is-dead.html

    Update

    Frank Chimero’s recent post “Homesteading 2014” also shares a similar sentiment; where he alludes to detaching from the digital noise of all these web services we eagerly adopt and instead building your own “web home” from scratch; a place you are proud to live in.

  2. Website Redesign

    Dec 17, 2013 Leave a Comment

    This is the third iteration of my website—the previous designed and built in 2008 while at NSCAD. I thought I’d go through a comparison and give a rationale for some the the choices I made during this re-design; exposing part of my process.

    Version Two

    As I said, I designed version two near the ned of my time at NSCAD, starting in the Fall of my final year. I’d built and worked on plenty of sites by then, but with a CMS only twice before—one Joomla atrocity and one using TextPattern, so this became another TextPattern site.

    I used Museo Slab and Sans from Typekit and tried to design something that felt like it portrayed my personality. In hindsight, aside from the type choices, I’m still happy with the site. The grid allowed for well balanced pages and I don’t feel that the version looks too dated six years later.

    Below are a couple sample pages from version two, a blog page and a portfolio page. You can’t really compare the portfolio page to anything in this current version, but it give a sense of the grid and hierarchy of content.

    Version Two - Blog Layout

    v2-portfolio

    Version Three

    So, for the redesign there were a few important things I wanted to accomplish.

    1. Highlight new skills and knowledge
    2. Write more
    3. Focus on typography

    I decided to postpone the portfolio section in the interest of getting it done; which sort of fails on point one above. The reason is, I don’t need to feature work right now because I’m not looking for new work. Of course, I want to design a nice portfolio and I will; but it’s not that high of a priority at the moment.

    I sketched ideas / wire frames for a variety of homepage layouts, but in the end I decided to take cues from those designers I respect most, such as Trent Walton, Jason Santa Maria and Elliot Jay Stocks. Something the three of these guys have in common is a focus on their blogs / articles first—their work comes second. I don’t have delusions of being of their calibre, but I like their similar approaches to personal sites design—beautifully styled but still somewhat understated; meaning they aren’t too sales focused.

    I decided my approach to the blog would be primarily as an educational tool for myself. Similar to my Stoicism blog, this will become a place to formulate ideas and opinions and record things learned throughout my career. Any business side effects will be welcomed, but that isn’t the purpose.

    Structure

    The homepage differs from the blog in a few ways. On the homepage the most recent article is displayed in full followed by the next four recent posts and an introduction in the right hand column. The blog lists all posts with an image (if provided) and an excerpt.

    Other content pages—About Chris, Contact and Portfolio—are very simple layouts displaying type at a readable line length. I tried to stay focused on the minimum requirements; there is no need to excessive graphics or fake charts proclaiming unverifiable levels of skill.

    Grid

    The grid is a simple six column grid. Currently there isn’t need for anything more complex due to the nature and simplicity of the content. As the content evolves—especially with the introduction of a proper portfolio—the grid may also evolve to accommodate more complex data and interactions; but that is to be determined.

    Typography

    I pondered and experimented with type for some time; having difficulty in figuring out what typeface speaks in my voice.

    In some ways I think it’s a fool’s errand to find for the perfect typeface; at least on the web. There are elements out of your control; such as the web font service, that may not have the specific typeface you want. I feel you shouldn’t be so attached to a design decision that it cripples you. There will be acceptable alternatives to a typeface within the web font libraries of any of these services. With that in mind I chose Slate from fonts.com for a few reasons:

    • Slate is a beautiful typeface designed for both screen and print.
    • It’s a large family with enough variety in weights I could accomplish a clear hierarchy with a a single family.
    • It appears professional but not conservative.
    • It’s designed by Canada’s own Rod MacDonald, who also taught me while at NSCAD.

    Colours

    I took inspiration mostly from my wardrobe. I have lots of dark greys and blues, but also a variety of brighter colours in shirts. I chose a slate blue for the primary, a deep and rich purple as a secondary and green for a tertiary colour.

    I like to work with three colours because they allow me to assign functions to the colours—better codifying the interface. Slate is presentational, for static content. Purple is interactive, used for text links—mostly is article titles. Green is also interactive, but reserved for buttons where an action is executed such as “search” or “sign up.”

    There are theories around the split of the colours, such as 60/30/10, which are a good guide, but kind of hard to maintain accurately in a site with changing content. I feel the important thing here is to define a style guide for yourself and stick with it.

    Conclusion

    So that’s the rationale behind this design. Lately, I’ve become more interested in the idea that design evolves over time. Now that I have WordPress in place and my base theme I can make adjustments as I see fit. I expect that I will eventually start adding some textures and or lighting effects to help make the style a tad more interesting; it currently looks a bit too trendy for my liking, being quite “flat” but, as I touched on in another article, I think this is a natural and honest style for a website, especially one focused solely on content.

    I welcome all and any feedback; I miss the days of art school where we had to pun our work up and listen respectfully to the critique of peers.