Category Archives: Website Design

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!

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.

PublishtheGecko.com
New PublishtheGecko.com Website!

gecko logo

original gecko math website
Original Gecko Mathematics website

Image98

totally NOT disconnected from society... I love flying now.

I realized that this flight had wi-fi available… and so I decided to check it out. I got an email from Goldie about some updates to a website we needed to do. So… from the plane, some where 34,000 above southern Missouri, I udpated the website. WOW.

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.

10 Great WordPress Plugins

1. NextGEN Gallery
NextGEN is a great plugin that provides a simple and easy administration back end to handle multiple photos, galleries and albums. It allows for multiple slideshow transitions since it’s based on the JW Image Rotator

2. Akismet
This provides great spam comment protection and comes already installed on every WordPress install. The trick is to activate it and to grab an API Key. Instruction for that are here. If you think you won’t get spam comments, you’re kidding yourself. One website I administer has had 6,000+ spam comments in the last four months (all caught by Akismet).

3. Twitpress
If you use Twitter and would like to have WordPress automatically tweet the title and URL to your blog posts as you publish them, then this plugin is for you.

4. Twitter for WordPress
This plugin gives you a way to display your latest tweets on your blog, and you can style it any way you want. To see an example of this, look at the left column of this blog. I chose to display my latest tweet only, but I could set it to display 5, 10, 20, or even 1,000 of my latest tweets.

5. WP-PageNavi
Looking for a great way to paginate your blog posts? Tired of that default ‘next’ and ‘previous’ posts at the bottom of your blog? This plugin paginates your posts similar to how a search engine paginates search results. You can see this in action on the bottom of this blog.

6. Contact Form 7
This plugin has saved me hours of work. It allows me to generate contact forms quickly. It even allows for file upload if you would like. You can configure CAPTCHA as well.

7. Role Manager
If you are creating a website for a client and want to give them editing rights, you can use this plugin to define exactly what they can do when they login. This provides a way to better define the default roles WordPress comes with.

8. PS Disable Auto Formatting
Am I the only one who gets frustrated when I try to add <br /> or <p> in the  HTML of a page or post and it gets removed when publishing the page? This plugin allows the use of <br /> and <p>. I just wish it also allowed for adding in your own DIV tags. Currently it will remove or jumble the nesting of your DIV’s. The work around to this is to write the code for a tables instead.

9. Add to Any: Share/Bookmark/Email Button
If you want to encourage readers to share your posts or pages, then use this plugin. An example of this can be found on a website I recently did » iconnect.atsu.edu

10. Gigpress
If you are creating a band website and want to easily allow for the client to add new tour dates and events to their tour page, then use this plugin. An example can be seen on Railroad Earth’s website (check out their music as well)

YouTube-copy

I’ve been crazy busy at ATSU designing new websites and doing daily web updates for everyone and their brother. I discovered that schools get special privileges as far as branding their channel. This got me excited to design this channel. It only took about three hours and it was so easy to implement.

There are a  few new websites that will be going live soon and I can’t wait to share them with you. One is for Still Magazine, ATSU’s Alumni Magazine produced by Marketing and also for the Student Government Association (SGA). I even got to design a logo for SGA. I gave you a sneak peak at the SGA logo a few months ago.

In other news, I’m currently applying to istockphoto.com in order to start selling photography and illustrations – wish me luck!

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.com
There 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

A few months ago I took on the project to create an e-news portal for all things ATSU. Sort of an up-to-date stream of news that contained everything related to ATSU. The project required a logo, website, sweet notepads (w/iconnect logo) and a magazine ad for the alumni magazine, Still Magazine. The logo was originally Lee’s design, I just tweaked it a bit. Lee’s a marketing associate here at ATSU. The notepad was laid out in conjuction with Gail, a graphic designer at ATSU. The website is built in wordpress so it can be quickly updated. The site also uses a jQuery powered slideshow on the homepage.

iconnect_logo

iconnect_notepad
Complete with Truman Alumni Association pen 🙂

iconnect_ad
iconnect ad in Still Magazine

iconnect_web
iconnect.atsu.edu

I was recently browsing a few of my past Visual Communication professor’s websites. I found my work highlighted in their ‘student work’ section. Check them out here.

http://bethsteffel.com/html/studentweb5.html (live site here)
http://bethsteffel.com/html/studentweb6.html (live site here)
Beth now teaches in San Bernardino, CA at California State University

I also found my ‘yes we can’ Obama video on Gary’s website.

http://www.garyrozanc.com/index.php?id=403 (see the whole series here and here)
Gary just started at Truman last Fall and is probably best Viscom professor I’ve ever had.

It’s humbling to see your professors highlighting your work on their website. Always a nice surprise when I randomly come across it.

MEADOW HEIGHTS CHURCH ‘REMEMBER’ MESSAGE SERIES

Another message series! I’ll have another one to post in two weeks. This one was a borrowed set of graphics from LifeChurch.tv. What is borrowed is the glass image and ‘remember’ logo. The rest is a unique design that fits the Meadow Heights ‘style’. It’s funny that Meadow Heights ‘style’ is identical to my design style. I just counted how many message series graphic sets I’ve designed for Meadow Heights….. drum roll please….. 28!

 

ICONNECT – YOUR ONLINE CONNECTION TO ALL THINGS ATSU

Still being developed, but I just had to share this. This is website numero deuce that I’ve developed for ATSU. It follows the same style that atsu.edu does and still has it’s own identity. The most important aspect is the ATSU blue banner that is consistant across all ATSU websites. The footer is a unique aspect that will be used on all new websites I develop. It’s an alternative to the global navigation at the top of the website.

 

SGA – STUDENT GOVERNMENT ASSOCIATION

This is a sneak peak at an even less developed website. the goal here is to globalize the two SGA’s – one for Arizona campus and one for the Missouri campus.