Category Archives: Redesign

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

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

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.

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).

Read the official announcement.


close-up of the iconnect header area.

What projects have you been working on lately? Comment & Share!

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.

sgalogo

Logo for the Student Government Association at ATSU – This is to be used on their brand new website that I posted a few weeks ago. Will be in WordPress – should be come out nicely!
iconnect_ad
iconnect – a website that connects the ATSU community through various social networking all in one place. I can’t wait for this to launch – The URL has been blurred out since it’s not live yet. This is a magazine ad that will be in Still Magazine soon.

finaidvideo

Financial Aid videos for ATSU – the most extensive use of web videos at ATSU to date – I think… Again I can’t share the URL since it’s only for a select set of users. The previous and next buttons use jQuery to ‘slide’ to the next video. An example is here.

weekdesign

So I decided not to include the other 10 million design projects I worked on this week – so I collaged them into a small space.  This week included an iconnect magazine ad, blackcat billboard ideas, newspaper ad for meadow heights, SGA logo, iconnect subpage design, creative improv subpages, financial aid video slideshow, blackcat illustrator recreation and a bunch of programming.

I’m.

Exhausted.

I’m currently working on designing a billboard for fredericktown school district – it’s a project meadow heights church is doing for the school. First I had to re-illustrate the low resolution blackcat that I was provided with. There’s gotta be a high-res version floating around somewhere – now I have my own – and it only took 12 hours to recreate.

blackcatlogo_small
Vector Blackcat – gotta love the pen tool and wacom tablet

 

003_small
One idea for the billboard

 

002_small
Variation of the last idea

 

001_small
Totally different idea – it already feels dated to me – almost like a late 80’s, early 90’s school t-shirt or something.

Anyone have some ideas for background textures/elements and or other ideas that could help these designs? I’m open to anything!

NEMO Triathlon Website Redesign
This week I worked on a few different websites, but they can’t be shown yet, since they aren’t public on ATSU’s website yet. This one was a homepage design for the triathlon that the Rec Center at A.T. Still sponsors

Get excited!

from left - Home Storage Solutions magazine cover, 'Stack Your Storage' magazine spread, Table of Contents

from left – Home Storage Solutions magazine cover, ‘Stack Your Storage’ magazine spread, Table of Contents

A few days ago I received a package in the mail. The package was from Dave Stone at Workbench Magazine. It contained the magazine that I spent all summer conceptualizing, branding, designing and redesigning. I had so much anticipation during the past 4 months about what it would be like to finally get the printed copy of the magazine. If you are a designer, you know the feeling of getting to see your design work finished and printed.

From the beginning of the summer, I sometimes doubted my ability to take on such a large project. After all, it was 100 pages and I was charged with the task of designing and redesigning every article in it. Beyond that I got to come up with an overall brand and style that could be used throughout.

I got to work with the amazing Doug Appleby. He’s an assistant art director at Workbench and a pretty awesome photographer as well. He challenged me to never settle for less. This usually meant designing 15-20 versions of a single magazine spread. I must have learned something, because by the last week of work, when we were putting together the table of contents, it only took about 5 versions – with a few tweaks.

If you want to see a preview of the magazine, check out http://www.woodsmithstore.com/w0901a.html

Check out this blog post – “An Amazing Summer So Far“. It was when I first started my internship at August Home Publishing.

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)