StephenEmlund.com Blog » Usability

Still Magazine online gets a minor face-lift

Stephen Emlund — Wed, 30 Nov 2011 03:19:59 +0000

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

Should designers be coders? (v2.0)

Stephen Emlund — Wed, 31 Aug 2011 03:32:04 +0000

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

Designers don’t make things look ‘pretty’

Stephen Emlund — Fri, 04 Feb 2011 19:15:27 +0000

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?

Samsung Acclaim – my new phone

Stephen Emlund — Sat, 10 Jul 2010 17:36:52 +0000

It’s no iPhone, but it’s still pretty awesome. Of course, my last phone was a flip phone with absolutely no internet access.

This is the first phone US Cellular is selling that has Google’s new Android OS. Being from Google, it integrates really well with any of your google accounts – gmail, youtube, voice, talk, etc.

The sheer awesomeness of the various apps is keeping me pretty intrigued! A few of my favorite apps -

The obvious – facebook, twidroid (twitter), email, youtube
Voice Search – simply say a search term and it searches google for what you said.
Your Navigator Deluxe – get directions, maps, traffic updates. You can say the city you are traveling to and it gets directions
CityID – find out where that unknown caller is calling from.
Air Horn – plays various loud air horns – perfect for when your coworker comes in to your office and farts (as happens to me daily)
Google Goggles – take a picture of anything and it searches google for it.
Google Sky Map – aim phone at the sky to identify, search and find various planets, constellations and stars!
Pandora - stream music as you can on pandora.com
WordPress – post to your blog
gStrings – tune any musical instrument
Solo lite – find guitar chords, and play an interactive guitar from your phone
Barcode Scanner – aim at any barcode and google search that item – whether it is to learn more about it or to compare prices online
Of course the phone also takes photos and video with a 3.2 MP camera. I can even post pictures/videos straight to this blog or facebook/twitter/etc

And now for a few photos:

Left: one of three home screens. Right: full list of all apps, available from the bottom slider arrow (seen on the left photo)

Has a full QUERTY keyboard along with a 3.2 inch screen

Left: Solo lite app that allows you to find guitar chords and play them on the interactive guitar

A very cool new WordPress plugin.

Stephen Emlund — Fri, 30 Apr 2010 19:42:08 +0000

Jeffrey Zeldman (@zeldman), self-proclaimed web standards guru just tweeted about a WordPress plugin for adding a Facebook ‘like’ button to your individual blog posts. So, of course I clicked through and checked it out! I instantly installed it on my blog here and tested it out. I absolutely love it.

It seems that most people shy away from commenting on blogs (or more recently even writing on your wall)… but they jump at the chance to simply express that they ‘like’ something you’ve posted (on facebook) I guess it’s the equivalent of nodding in agreement instead of speaking your full opinion of something. Bringing this feature to WordPress iss a no-brainer. When someone clicks ‘like’ on my blog posts, a simple note will be posted to your news feed saying ‘John Doe likes such and such’. Where, “Such and such” is the title of my blog post. How stinkin’ cool is that?

OK, now try it.(note that if you are viewing my blog homepage, you have click the blog post title to see the ‘like’ button under the content.)

Creative Improv launches new website

Stephen Emlund — Thu, 11 Feb 2010 03:26:22 +0000

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?

Think Google. Think iPod.

Stephen Emlund — Mon, 08 Feb 2010 18:30:07 +0000

Just because something looks good doesn’t mean its useful. And just because something is useful does not make it beautiful.

— Joshua Brewer

Think Google – amazingly simple and useful, but not beautifully designed.

There is a difference between usability and beautiful design. It can be ugly and usable or it can be beautiful and unusable.

Every once in a while you find something that is both usable and beautiful. For this: Think iPod.

What makes a website great?

Stephen Emlund — Mon, 15 Jun 2009 17:34:24 +0000

I recently read this on CSS-Tricks:

There are websites that we visit because we have to, but we wouldn’t get an account with.
There are websites that we have accounts with that we would never participate in.
There are websites we participate in that we don’t enjoy.
There are websites that we enjoy but don’t participate in.
There are websites we enjoy and participate in but don’t share everything with.
There are websites that we share everything with, but don’t trust.
There are websites that we trust and share everything with; these are the sites we love.

For me – these are the website that fit in these categories:

There are websites that we visit because we have to, but we wouldn’t get an account with.
USPS.comThere are websites that we have accounts with that we would never participate in.

University Portals
MySpace.com

There are websites we participate in that we don’t enjoy.
USBank.com

There are websites that we enjoy but don’t participate in.
CNN.com
Most design blogs

There are websites we enjoy and participate in but don’t share everything with.
Facebook.com
Youtube.com

There are websites that we share everything with, but don’t trust.
To an extent, Twitter.com (just a bit of untrust, simply because it’s online)

There are websites that we trust and share everything with; these are the sites we love.
Mint.com
GMail.com
Google Sites
Google Docs
Google Reader
Twitter.com

Politics & Effectively Using the Web (part five)

Stephen Emlund — Thu, 30 Oct 2008 03:13:49 +0000

In part five, I take a look how Obama is getting out the vote and viral advertising.

I’ve decided to change this post slightly from what I described earlier. I’d like to focus purely on Obama and his various websites and viral advertising.

YesWeCanSong.com
The first time I had ever heard of the term ‘viral advertising’ was when will.i.am from Black Eyed Peas came out with the Yes We Can music video. We discussed it extensively in my Advertising course. One thing is true, when advertising is done independant of the candidate it is very good. That’s why ‘Swift Boat Veterans’ were effective in attacking Kerry because it wasn’t Dubya saying these things, it was an independant source. It also works for ads supporting a candidate, such as the Yes We Can video. This video highlights Obama’s great oratory skills and the particular cadence that is very effective with his speaking. I also took Public Speaking last semester and learned that your speaking ability has a lot to do with the silence/pacing you use. Obama definitely has this nailed. I guess you could compare it to how smooth-talking Clinton was. I heard a comedian say recently “You know, Clinton could say ‘I am not here’” and you would think “he’s right, he’s not here.”

YesWeCarve.com
Another viral website that was started from four guys not even part of the Obama campaign. The website was designed so well that I actually believed it WAS by the Obama campaign. This website takes advantage of the beautiful design and branding of the Obama campaign and allows visitors to carve Barack-o-lanterns with various campaign imagery on it and submit photos of the lanterns to their blog. Now imagine for a moment someone started “Maverick-o-Lantern.com” What stencils could they provide? A picture of mccain’s face? That wouldn’t work, all those wrinkles would cause your pumpkin to fall apart if you carved that… But I digress. I carved a Barack-O-Lantern and posted it to their website. Mine is found here.

The remaining items are all paid for by the Obama campaign.

FightTheSmears.com
This website was started a few months back when the primary season ended and Obama knew McCain would be on the attack. It basically takes rumors or attacks by McCain or other sources and gives the facts about each ‘smear’. This is effective in that ‘setting the record straight’ isn’t being done on the main campaign website, because if it was, it would seem that Obama is all about dispelling fear and not about the real issues. In this case he can do both at the same time, but keep his main website as place to learn about Obama’s stances on issues. On FighttheSmears.com, one can sign up for email updates on various smears.

Under The Radar
This website is a subdomain (radar.barackobama.com), but treated as it’s own website, with a very different design from the main campaign website. This site goes a step further than Fight the Smears does. This website lets users submit various attacks that are being launched at very local levels (direct mail, etc). The website gives you an interactive map and allows you see where various attacks are being done. This and the previous website does very good job of showing the numerous attempts to suppress support, and can only look bad for McCain.

VoteForChange.com
I registered to vote in Kirksville via this website. It gives visitors a step by step process to fill out info and then it generates a PDF with your info filled in and then you can print, sign and turn it in. I almost forgot to turn it in, but the deadline day, October 8th, I received a robo-call from Michelle Obama reminding me to turn in my form.

Cell Phones and the iPhone
Obama announced his VP pick through text-messaging – although it was leaked hours before sending the message, most people first found out about it from a text message, because it was announced at midnight the night before. Obama even has an iPhone App. I don’t have an iPhone, but would assume that this App is very effective. Any iPhone owners have thoughts on the App?

Video Game Ads
I had no idea that you could advertise in video games, but Obama has done so. Obama has placed billboard ads in nine XBox360 games in ten swing states. Even one more way that he is targeting the 18-30 year old crowd. I won’t be suprised to see my potato chips having political ads in the next presidential election. Picture this: ‘”Vote Palin 2012″ on your chips. Her slogan on the chips can be “Chew on this: I’m just a regular hockey mom”

In part six, I will look at the use of the web in the final days of the election and the results of the election.

Politics & Effectively Using the Web (part four)

Stephen Emlund — Fri, 24 Oct 2008 04:31:11 +0000

In part four, I take a look at the recent website redesign by John McCain and compare it to his previously all black website.

Beautiful Design
I believe I’ve said this on my blog before. This presidential campaign has largely been about change. Most significantly, a change from really horrible design in political campaigns to truly beautiful design and focused branding, most on the part of Obama’s campaign, but most recently with McCain as well.

Finally, candidates are seeing the value of a great brand and beautiful design. By ‘great brand’ I’m talking about the cohesive theme and logo. For Obama it has been ‘Change’ and ‘Hope’. For McCain it has been ‘maverick’ (or is it ‘a couple of mavericks’?) and ‘Country First’. What I think is even more effective is a theme that gets placed on a campaign by the public. In this case it was in the form of Internet viral advertising, especially the ‘Yes We Can’ music video. I can’t think of a viral advertising ‘brand’ that has been placed on the McCain campaign. There have also been some negative viral advertising affecting Obama such as Internet rumors that, ‘He’s a Muslim.’ As Campbell Brown on CNN pointed out a few days ago “So what if he is a Muslim? Since when was that a disqualifer for president?”

Website (re)Design
The website design for both candidates can make or break them in terms of young vote. Young people are all about hip and cool. That’s what first draws them to a candidate in some cases, then they look at the issues. This isn’t the case with all young voters but for some it is. So how does a young voter remain on a website that is black, gray and a little blue with pictures of people their grandparents age? The answer is: ‘they don’t.’ So as I first visited McCain and Obama’s website you can guess which one I was drawn to more, especially as a designer. A young voter’s life is always ‘changing’ and they usually have much ‘hope’ for their future. And what is it that Obama has focused his campaign on? Hope and Change. What do people want after Bush’s presidency? Hope and Change. What do I want a little more of in my pocket? Change. (haha, get it?)

Before McCain’s website redesign at the end of the summer, it wasn’t successfully keeping young voters there and giving them something to grab hold of. His website color scheme was a depressing black and blue and there were about thirteen pictures of him on his biography page (mostly black and white). That is thirteen reminders of how old he is. The constant replaying of McCain’s POW video on his website didn’t connect with young voters since it is from a war so far removed from our generation. Also, McCain’s stance on the Iraq war is not striking a chord with young people as a whole. For example, the statement about being in Iraq for one hundred years. Overall, I concluded last spring that McCain was not reaching young voters and needed to utilize his website in better ways.

Finally a Redesign for the Maverick
What do you get when you have just one maverick? A black and gray website. Add a younger, less-experienced maverick to the team to make ‘a couple of mavericks’ and what do you get? A website very similar to the competition. I say this because McCain’s website changed for the better about 2 months before adding Sarah Palin to his mavericky campaign. Check out my screenshots of the McCain website next to the Obama website. If I were to just glance at these, I would guess they were from the same campaign. Almost identical blue, glowing white shadows/lights, addition of ‘people group’ mentioned in a previous post. Why would anyone want to go from the deathly black and gray to hopeful blue and glowing lights? It might be that they noticed Obama’s website was well designed, structured and communicated their theme of change and hope. I guess communicating the theme of ‘country first’ is visually depicted identical to that of ‘change’ and ‘hope’.

That, or the McCain campaign generously borrowed design ideas from a better looking website. How blatant can you be? I believe my side-by-side image says it all.

In part five I take a look how Obama and McCain are getting out the vote and recent online buzz (Keating Economics, Fight the Smears, Yes We Carve, etc)