Category Archives: The Design Process

swag

At An Event Apart – Austin 2013, Samantha Warren shared about her new idea: Style Tiles. Here are my take-aways:

  • Design is art without clients – and in-house designers still have clients
  • Creating 3 fixed-width pixel-perfect Photoshop comps encourages ‘Frankencomps’ – where client will request pieces of each to be put together to make a new comp.
    • There is a better way to go about this, and it is ‘Style Tiles’
  • Mood boards are too vague for clients to understand, although they are good for certain parts of the process
  • Style Tiles
    • Gives client an essence or feel for the website – fonts/colors/etc
    • Allows for designing a system, not pages
    • Separates style from substance (content)
    • Are device width agnostic
    • Will facilitate a conversation around responsive design projects
    • Should come before a more refined mockup of pages
    • Allow for quicker iteration
    • Sets you up for creating a full component library – full of all possible design components on website
  • Design Process:
    • Listen
      • Ask questions, get answers then setup kickoff meeting to get alignment on answers from all people on client end
      • Ask what their 3 user goals are and 3 business goals are
      • Ask ‘Why?” throughout
      • Ask metaphor questions like, “If your brand were a ____, it would be a _________ and why?
      • Ask degree questions like, “on scale of 1-5 how strongly do you feel your website should be______ (illustrative/etc)”.
    • Interpret
      • Identify common themes
      • Get agreement on adjectives
      • Begin pairing adjectives with design principles of line, shape, color, texture, space and form
    • Define Visual Language
    • Iterate
      • Easier to do with style tiles
    • Deliver a System
      • System would include the style tile, component library (how all possible aspects of website will look, like, headings, lists, links, etc), and full comps
  • When someone says that designers JUST make things look pretty, a kitten dies!
  • Design a better process!

 

This is the coolest project I’ve worked on in a while. It’s a poster to advertise the annual Jazz Festival at Mineral Area College, where my Creative Improv counter-part, Michael Goldsmith teaches music and leads the jazz ensemble.

Why did I love this project? I could combine my love for jazz music, art and design and create something that really embodied jazz.

A bit about my design process

I spent hours sketching Delfeayo and coming up with a really loose sketch that could be incorporated into the poster. I was try to re-live this style. After much tweaking, layering and coloring it just didn’t have the right feel. Failure… but that’s OK – because it made me think about other ways to bring the ‘hand-drawn’ feel to the poster. I decided to the make the text and background elements all have a hand-drawn feel and leave the photo pretty much as is.


The above sketches were all drawn with marker on tracing paper, then scanned and layered in Photoshop to create the final, colored illustration.

Inspired by the hand-drawn feel above, I took some of my own watercolor textures and layered them in the background and over the left side of the suit jacket (subtle, eh?). Then I added some hand-drawn typefaces in various angles. I wanted it to have a bit of a haphazard, hand-created, imperfect feel.

^ bottom of the magazine website that got a face-lift recently. Click-through to see it live online

 

At my full-time job, I sometimes help the marketing department create some pretty cool websites. One of them was for the alumni magazine, Still Magazine. I created this website on WordPress and this was at a time that I was just digging into WordPress and learning some more advanced techniques with WP theming.

I worked with another programmer to figure out the ins and outs of parent and child category templates in order to create a custom layout for each magazine issue. The idea was to use WP parent categories to signify each magazine issue and then child categories within those parents that would signify each main section of the issue – things like departments, profiles and features.After much thinking, tinkering and coding, we got it all to work and now each new issue takes minimal work on the IT side of things and the bulk of the work is writing the stories. The payoff? Each past issue of the magazine is fully intact online in a search engine friendly format – building the ATSU brand online one story at a time. Search engines thrive on up-to-date information and this website provides that with the 40+ new stories every few months. For example, check out the past issues – Winter ’10, Summer ’10 or Fall ’10

Another cool feature of the website is a custom jQuery slideshow that displays the top 5 featured stories. This is also very automated – by simply adding a particular ‘tag’ to each of the 5 stories and then uploading a custom slide – all from the same screen that you write the stories.

This is the type of project that I absolutely love.

There was a challenge to create a meaningful online presence for the magazine and I got to pull together all the resources by designing the website, planning how WordPress should function and helping pioneer a unique way to build a magazine website on the WordPress framework. Then I coded my design within WordPress and built the jQuery slideshow and remaining pieces of the websites. Oh yeah.. and then I trained folks to use this new platform to publish their content. Overall this was a great project that had an awesome payoff.

Check out this project in my portfolio >

What do designers do? Make things ‘pretty’ and ‘put a new coat of paint on something’, right?

Wrong.

A designer is someone who communicates visually through various mediums. This could be through print design, web design, and especially wayfinding design (the design of directional signs in our environment).

The end result is hopefully something that is visually appealing or ‘pretty’. Pretty should not be the goal, though. It is simply the natural byproduct of a designer who has taken the target audience into account while crafting a readable and functional piece of design (whether it’s a business card or a full-on website). What most people see as ‘pretty’ are simply visual symbols that resonate with a particular target audience and communicate a particular message in an exemplary way.

Some examples

Let’s take wayfinding. Directional sign on the interstate communicate visually. They tell what city you are approaching, which way to turn and so on. They aren’t simply pretty or pleasing on the eyes. They communicate visually. Interstate signs may also look pretty if the text wasn’t white, but instead were a slightly lighter green from the green background color of the sign. Decisions were made by designers about the readability and functionality of the sign, therefore stark white and dark green was the outcome. Design decisions are made in terms of functionality, readability without much focus on ‘pretty’ – because if it communicates visually, ‘pretty’ will hopefully be the natural byproduct.

The same argument can be made for web design. A website should be functional first and foremost. If I don’t know what a link is or what page I’m on, the web designer has failed already. A website can be ugly and functional – think Google search results. A website can be pretty and not functional – some graphic designer’s flash only websites. The best option is for the website to be both functional and beautiful.

On the flip side

Of course a designer should create things that are ‘pretty’ – but this should not be the end goal. Isn’t that what fine artists are for? (EDIT: I mean that fine artist don’t usually have to reach a target audience and therefore don’t need to worry about communicating the same message to everyone) As I often say, there should be balance between form and function. For argument’s sake, form = pretty and function = successfully reaching the target audience.

Form and function work together to create a successful design – but reaching the target audience is the goal, while ‘pretty’ is the byproduct of reaching that goal.

Now it’s your turn! What do you think of the balance between form and function? For designers, is ‘pretty’ the end goal or not?

It’s been almost 6 years since I originally launched StephenEmlund.com. This October, I redesigned my website for the first time ever. I have been surprised how well my website has held up to all the design trends in the last 6 years. Of course, it’s because I made the website very minimalistic. Although orange was so 2005.

This was 2005

Orange was sooo in!

In 2005, orange was sooo in! I featured printmaking on my site back in the day. Just for fun, I've uploaded the whole website as it was in 2005. Click the screenshot above to view it live!

This was 2008 ↓

Website launched in 2006

in 2008, I tweaked the color from orange to teal and added a sweet autograph! I also implemented the new 'border-radius' that only worked in certain browsers. This website was used for my senior portfolio in Visual Communication.

This is today ↓

Launched October 2010

Launched October 2010. Kept the same teal, but added live feed from blog and a sweet jQuery slider.

Dynamic portfolio page

Dynamic portfolio page - the left navigation dynamically loads all the projects that relate. Click the screenshot above to see the portfolio page.

So, I’m pretty new to still life photography and photography in general – but I’ve found some techniques/processes that seem to work for me – allowing me to create a technically sound image that is sharp and in focus at 100%

I was especially excited with the recent photos of these fake grapes. I basically hung them from a wire in my white/lightbox. I have 4 shop lights at 200 watts each shining on the grapes – as seen in the reflections on each grape in my before image.

Once I got the image on the computer, I added a bit of vignette and then dropped it into Photoshop from some levels work. I raised the levels a bit on a few different layers and touched them up to reduce the harsh reflections.

The image is available at Shutterstock!

I've known Kristina for probably 5 years and it was a pleasure to design her wedding invitations!

The script typeface is called 'Buttermilk' and I purchased it from a great illustrator/type designer named Jessica Hische.

The swirls were customized from an original set of 'swirls' I had. The secondary typeface used for body copy is Baskerville Old Face. It seemed to go well with the elegance of Buttermilk

Leafing through an old magazine, I noticed a small ad about a design course by mail. The headline read, “Art for pleasure and profit!” I have never found a better definition to describe my profession. Of course, at times it is more the pleasure and less the profit, at times the contrary. But if one of the components were missing, design wouldn’t exist.

—Carlo Angelini

Definitely agree. The French phrase ‘l’art pour l’art’ which means ‘art for art’s sake’ does not apply to design. To design for design’s sake is really to not create design at all. Design is created for a specific audience with a specific goal in mind. Without an audience or goal, design is no longer design, but just art. Art doesn’t have to communicate to a specific audience like design does.

Your thoughts?

A few months ago, when Creative Improv was in it’s infancy, the Parallax View project came our way at just the right time. I had wanted to work on this project since high school. I knew Ben & Seth in high school and thought it would be cool to do a website for them back then (before they were Parallax view).  I believe we even talked about me doing the website. I also received an email two years ago from the band asking if I would do some work – Sadly it got lost in my email and I never read it.

This time, everything seemed to work out. With Michael’s and my experience designing and marketing for the Church, this was a perfect project for us. Check out the Parallax View Band website that we launched a few weeks ago! Michael’s initial design ideas, sketches, endless creative direction, keeping me on task, writing skills and client relations is and always will be priceless to Creative Improv’s design process. This and every other project I’ve worked on with him always turns out a zillion times better because of what he brings to the table!

Check out our design process for this project. Interested in Creative Improv?? then become a fan on facebook or check us out on our official website.

dfadfasdf

The first step in this project was to sketch out logo ideas.

We ended up deciding on this logo because it was the most memorable at a very small and very large scale.

We ended up deciding on this logo because it was the most memorable at a very small and large scale.

The website sketches came next, incorporating the logo's colors and style. This first sketch used a left narrow column and the header was a bit more crowded than what we ended up going with.

The website sketches came next, incorporating the logo's colors and style (for these, incorporation of color was in my head 🙂 ). This first sketch used a left narrow column and the header was a bit more crowded than what we ended up going with. These black/white pencil sketches help decide on layout without the distraction of color to give a false sense of completeness.

This sketch was the base for the final website, though still a bit different in the final implementation. We used the divine proportion to decide how wide each column should be. I know, how ironic, since this is a Christian band. :-)

This sketch was the base for the final website, though still a bit different in the final implementation. We used the divine proportion to decide how wide each column should be. I know, how ironic, since this is a Christian band. 🙂

The final website: featuring content from various social media and a brand new blog for the band to keep in touch with their fans. The most dynamic aspect is the MySpace Music Player, the Flickr feed and YouTube feed.

The final website: featuring content from various social media and a brand new blog for the band to keep in touch with their fans. The most dynamic aspect is the MySpace Music Player, the Flickr feed and YouTube feed. Check it out now!

The CD was one of the funnest parts of this project. I've only designed one other CD in my life, unless you count the fake CD for portfolio purposes. The typography, textures, photos and illustrations just came together nicely. It did take some thinking to get the hierarchy just right between the title and logo for the cover.

The CD was one of the funnest parts of this project. I've only designed one other CD in my life (for Truman's Jazz Ensemble, which I performed with as well). The typography, textures, photos and illustrations just came together nicely. It did take some thinking to get the hierarchy just right between the title and logo for the cover.

The Poster was the very last piece to complete. It matched the website header nicely.

The poster was the very last piece to complete. It matched the website header nicely.

I got an email today from someone named Armin Vit. I was hovering over ‘mark as spam’ until I read the subject line.

Brand New Mystery Product

Now, for some reason this caught my attention as not being exactly spam (don’t ask me why). So I opened it.

If I have contacted you it means that we have included your quote (in our mystery product).

I almost forgot that a few weeks ago I contributed to a discussion on Brand New’s website. The discussion simply asked ‘Why do you sketch logos?’ and can be found here.

This is what I said:

I sketch on paper rather than the computer because when I use a computer to generate ideas, even the bad comps look good since they are in a polished, clean state. I get a false-sense of completeness when I jump to the computer too quickly. Sketching your ideas on paper removes any false sense that that particular idea is good simply because it’s kerned nicely.

They have created a ‘mystery product’ which includes a select 16-24 folks’ comments on why they sketch logos. I was chosen out of the more than 200 contributers.

The email also said that they are sending me a compliment ‘mystery product’. My guess is that it’s a small book or a poster of some sort. I’ll post a picture of the mystery product when I receive it!