^ 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.
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?
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!
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.
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 ↓
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. Kept the same teal, but added live feed from blog and a sweet jQuery slider.
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.”
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.
iconnect is an e-newsletter for A.T. Still University that I designed in partnership with the Communication & Marketing Department. The goal was to create a place to get all your University news in one place. New stories and photos are added almost daily and it has become popular among the ATSU community.
This was one of the first project I worked on when I started as web developer and I found out a week ago that it had won the bronze award for Excellence in Alumni Web Sites, Electronic Newsletter at the CASE District VI Institutional Awards Ceremony. With this excitement, I looked for ways to make the website better, because everything can get better, right?
The redesign included adding color (green), centering the website in the browser (instead of pushed left, like atsu.edu is), giving the ATSU logo some breathing room and finally removing the strange gradient of dark to mid blue in the header. The slideshow of content on the homepage was also revamped and made more intuitive (I hope).
Michael and I at CreativeImprov.com just recently completed a project for PublishtheGecko.com and GeckoMath.com. This project was inspired by Jamie Varon and her popular website TwitterShouldHireMe.com Jamie gained publicity from CNN, Fortune Magazine and many others for her straightforward approach to finding a job. I first found out about her by Dr. Grow, an education professor at Truman State and our client for this project. I’m now friends with Jamie on Facebook and Twitter and she thought it was cool that she inspired this project. She now runs her own design business, Shatterboxx Media and is living in Italy (LUCKY!).
Three years ago I was introduced to Gecko Math (which is a Korean math curriculum that is being translated into English). At that time, I illustrated the gecko and designed the logo and original website. I worked with a great programmer, Ryan Herriman to complete geckomath.com.
Recently, Creative Improv was approached to extend their brand and directly market gecKo mathematics to publishers. The end result was PublishtheGecko.com, seen below.