Category Archives: Website Design

For too long (4.5 years), this website survived without much attention to it. It was in desperate need of a redesign in order to better present the information about the annual triathlon.

This website presented unique challenges for me.

Challenge #1:

This website is for an annual event and although there is a lot of information, it doesn’t really make sense to split it up across many separate webpages. It’s one event, so why not make it one page? This means the flow of information down the page needs more attention as does the way people access all that information (navigation).

Challenge #2:

The other challenge is that the logo requires more space and size. (btw, the logo was designed by the great Jamie Carroll) Since it’s a tall logo, it screams “make me huge”. It couldn’t just be treated like any other logo where it could survive smaller and at the top left of the website design. This logo needs to be the center of attention. So… I made it large and centered it. That was the easy part. The hard part was dealing all the space to the left and right of the logo.

Challenge #3:

Another challenge is that the call to action needs to be baked into the design of the site. The call to action being ‘register online’. I chose to place this button right below the logo. The logo draws the most attention so why not place the call to action right next to the attention grabbing element?

Check out the redesign below and click through to see the live website.

triathlon website

mobile devices

Recently, I’ve been boning up on the principles of mobile first and responsive web design. I’ve read Ethan Marcotte’s book, Responsive Web Design and also almost through with Luke Wroblewski’s book Mobile First. So far, I’ve built two websites using responsive techniques and let me tell you, all the reading in the world doesn’t prepare you for actually building something (and writing your very first media query). Reading about ‘best practices’ is one thing, but doing the (sometimes boring) work that involves formatting content and photos helps you discover your own best practices.

One of those ‘discovered’ best practices is this…

When there are many photos on a webpage that support the content, but aren’t absolutely necessary – it’s OK to choose not to display them on smaller screens. For example, on a recent project, I was finding that some photos were specifically referenced in the content and were vital to understand the content, but others were stock photos that were just niceties, but not necessities. For those non-vital images, I removed them on smaller screens to allow for a more concise reading experience.

Simple idea that sounds like a no-brainer, but it was a minor break-through for me.

^ 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 >

I’ve talked about this in the past on this blog. I was reminded of this debate from a past professor who re-blogged a post by Frank Chimero.

So, should designers be coders? The answer is, “Yes, to an extent.”

I say ‘to an extent’, because we can’t expect a web designer to be able to do everything a programmer can. These are two different career paths. We can and should expect there to be an overlap between these separate fields. This overlap mainly lies in knowing HTML and CSS. (now you know what the question marks are for in the graphic). So designers should understand code and be able to write HTML and CSS.

Adobe’s recent release of Muse has surely stoked this debate even more. Muse promises to rid the need for a programmer/coder (you know, the way that Microsoft Publisher rids the need for a designer). The problem with this is that Muse promotes a lack of coding knowledge and as a result web designers are still uneducated about coding and their websites are worse off because of it. Websites are not digital versions of print design. They are living documents in 4D – changing based on user interactions, responsive design, dynamic elements etc. For more on why Muse is not the answer to web development, read Elliot Jay Stocks’ assessment.

The point here is that web designers should understand and be able to write HTML/CSS. As a comparison, take this example I mentioned in the aforementioned blog post,

…an architect should understand how a house is built. Otherwise, the architect has become a meaningless decorator of a medium he doesn’t understand.

Frank Chimero says it like this,

Design decisions are not only affected by the characteristics of the content being designed, but also the qualities of the format. The best way to understand the characteristics of the web is to speak its language.

What are your thoughts on this? Should web designers know how to code? How extensively?

Want to know where to start learning how to code? Check this out: Don’t Fear the Internet

 

I couldn’t help but notice a few striking similarities between current GOP candidate websites and Obama’s 2008 campaign website and the current White House website.

Glowing Blue Background

It seems that the new political design trend is going to be glowing backgrounds. Most of the candidate’s sites use a glowing blue background of some sort (see newt.org and michellebachmann.com)

Home Icon & Typography

The designers for Ron Paul’s website must have been inspired by whitehouse.gov because the navigation typography is almost identical. The flag icon on whitehouse.gov links to the homepage, while the home icon on Paul’s site links to the homepage. While not similar in design, the unique idea of using a homepage icon in that particular position is pretty similar given the other similarities.

However, I give props to Ron Paul’s web guys for actually making the navigation real text and not images, like the White House site. To be fair, whitehouse.gov has their full sitemap in real text in the footer.

Right Column Shadows

This one is minor, but I had to mention it because of how similar other elements are between whitehouse.gov and Ron Paul’s website. The right column on both sites are the same exact width as well. Inspired much?

The hokey, ‘look inspired and into the distance’ Photo.

Also known as the 40-year-old virgin portrait look. This is only funny because I really want to imagine the photographer holding up a picture of the Obama 2008 website and directing Bachmann to pose similarly. I feel like she forgot where the camera was one other time too… I kid, I kid!

Is there anything wrong with this?

Of course not. There is no copyright infringement here. Is it funny when you notice it? Yes. Mostly because of how different these candidates are from President Obama in every other way.

Here’s to great design that draws some of it’s inspiration from Obama 2008!

Looking for someone to design your website (or logo)?

I’m your man! Check out my portfolio and get in touch with me. Let’s make your next project awesome!

Since the 2008 presidential election, I have become aware of design in politics and how the quality and effectiveness of the design effects particular candidates.

As designers, we have a lot of responsibility to design for the greater good and not put forth an image (both meanings of the word) that is misleading, untrue or inciting of any negative action. On the opposite end of the spectrum, we have a responsibility to not oversell something or someone, if we want a clear conscience.

Below I’ve outlined a few examples of design that has a played a role in our perception of a the candidate.

A few examples, off the top of my head:

Yes we can… make you think I’m God-incarnate

Overtly and overly optimistic political campaign website for Barack Obama. Did we all really think he was going to be ‘God-incarnate’ and a perfect president (note the glowing blue sky/cloud feel)?

The problem with this website design, as I’m starting to see, is that if I were to design a website for ‘God’ – it would probably look pretty close to this. Same colors. Similar logo. Similar quote in the header (at least the ‘I’m asking you to believe’). This is a problem, because he’s not God, but was pretty much marketed as such.

As I wrote about on this blog in the past – this was a great website design, logo and branding. The best that national politics had ever seen. But my question is: Was it over-selling Obama? Just a bit.

Did we think he would be anything more than a politician with skin on? If we bought into the design/marketing – maybe.

There’s an Alaska-shaped lake in the US, don’tchaknow?

To all you middle school kids who have taken geography, you know this map is NOT accurate. It is outrageously false. I know that Palin’s goal was to express that she was the governor of a state that is very large in comparison to the continental United States. Do you want to highlight something in your career that you only put half your effort toward (Palin resigned before finishing her first term)? Why create something that is false, misleading and very untrue? Clever, maybe – but I don’t see it winning any design awards. This logo opens up the floodgates for more people to question the intelligence of Sarah Palin. Why open that door?

LBJ mushroom cloud commercial

Misleading. Fear-Mongering.

It’s not a direct ‘design’ piece but is marketing and political in nature. The commercial worked and drew on the emotions of the American people. Drawing out the fear of a nuclear war and pointing a finger at Barry Goldwater was the goal of this commercial. It worked, and as Milton Glaser is quoted in this article saying, “And even though you knew it was bullshit, your heart swelled anyway.”

You betcha they’re surveying symbols!

Most recently, this graphic has been the center of debate. I don’t subscribe to the idea that Palin is responsible for the recent Arizona shooting. However, her advertisements and words and those of other talking heads need to be scrutinized when violence against politicians arises. Taking responsibility for your words and actions is a necessity. That means acknowledging when something you say or do is in bad taste, as this graphic was. We learned this as a child – why is it that politicians forget this fundamental rule of responsibility? (Another example is when Sharon Angle’s was quoted about using  ‘second amendment remedies’. That is an incitement of violence and nothing less.)

One explanation of this graphic was that it was simply using ‘surveying symbols’.  Maybe that was the intention, but how many American’s are surveyors and would get this reference? It’s more likely that it would be interpreted as a gun sight. You can’t tell me that the Palin folks didn’t know this is how it would be inferred? After all, it’s the perfect graphical symbol to appeal to hunters and gun rights activists around the country. If it should have been a surveying symbol, shame on the designer for not correctly ‘visually communicating’ a surveying symbol. My guess is that the designer was directed to use a gun cross hair – and they did that effectively. Palin and others needs to be more careful about the graphics they present and the words they use.

Wrapping up

We have all seen political ads, designs and words that over-reach their boundary. The question becomes – how do we know how over-reaching it is? How do we know how much violence something or someone may incite with their words or ads? The answer is: We don’t. This is why politicians and the designers that work for them need to be held to a very high standard. They need to realize how much sway they have with their ‘supporters’ – especially their fringe supporters.

What political ads, designs and words have you heard or seen recently that were inciting violence or simply overselling something?

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.

[UPDATE: I’ve written a recent blog post about this – check it out here]

This debate recently came up in the web design blogosphere in the last week or so. It all started with a tweet heard ’round the world by Elliot Jay Stocks.

Honestly, I’m shocked that in 2010 I’m still coming across ‘web designers’ who can’t code their own designs. No excuse. – elliotjaystocks

There have been numerous responses to this, ranging from, “designers should ONLY design and programmers should ONLY code” to “designers should ALWAYS code their designs.

I tend to lean toward the idea that designers should know how to code their designs. This is the same as saying an architect should understand how a house is built. Otherwise, the designer or architect has become a meaningless decorator of a medium he doesn’t understand. (On the flip side, coders should understand the basics of design as well.)

Now, this is not to say that designers need to always code their design. I love the idea of hiring a programmer to code a website for me, especially if there are some dynamic things I want to do. If a web designer is going to be successful he needs to understand the medium. It doesn’t matter whether it’s a shallow or deep understanding: whether you can fully write XHTML and CSS or have a basic knowledge of the it’s structure.

The result of a web designer not knowing how to code their own website ends up being a website done in all flash, where flash is simply used for ‘transitions’ and ‘flashiness’. Another result might be a website ‘sliced’ with ImageReady or similar program which results in haphazard tables and inline styles or even worse, tables. Yet another result may be full blocks of text on a website are displayed as images, because, “‘gosh darn it, I want to use a really cool font and am afraid the user may not see the same font.”

Path of Principles homepage, featuring a slideshow with images generated from Flickr, color-coded buttons and news/social media links

Path of Principles subpage featuring a visual timeline slider and popup captions to define certain keywords

Check out the live ‘Path of Principles’ website

We (Creative Improv) recently launched a website for the national Sigma Tau Gamma Fraternity. It aims to provide a home for their lifelong membership training program. This project focused on their program, prospective audiences and social media links. We gave specific attention to outlining key information via visual sliders as well as an ease of use and navigation.

Speaking of Creative Improv, have you become a fan on facebook or followed us on Twitter?

Have you subscribed to this blog’s RSS?