Things I've Tagged ‘Web Design’

Page 2 of 7


#Google Analytics, #Web Design

Google Analytics Isn’t Functioning Properly When Using Advanced Segments

Without the ability to analyze accurate statistics, we have no way of knowing how our marketing efforts are performing; while this isn’t as big of a deal on my personal web site, my client site’s are a different matter.

I get it. Google Analytics is free, offers a fairly robust package at the price, and is powered by Google. But Google isn’t necessarily in the business of giving things away–on the contrary, they collect of that traffic data and put it to use for their own purposes. The trade off for me is that I get a fairly stable product, with little to no support, for free.

Unfortunately, in my position of a man with no means, I’m stuck when my formerly reliable tool has issues. While searching about, however, I’ve discovered something called Piwik, an open source tool that runs on your servers and helps you track traffic. So far, it doesn’t seem as robust as Analytics, but I haven’t had a chance to really play with it. It is fairly basic, and if that’s what you need, it works just fine.

Anyway, I’m stuck waiting until May 23rd for Google to get their shit together.


#Gmail, #Web Design

New Gmail Favicon?

New, shiny icon to the left, old to the right.

I’m not sure if I’m the first to notice this or not, or if I’m even right, but it looks like Gmail has a brand new favicon. It looks to me like they’ve added a little depth and polish to the icon, as well as a one pixel drop shadow.

It’s an improvement over the previous one. There isn’t much to say about it, but way to go giant company.

It’s entirely possible that this favicon has been around for a while, and my cache has finally cleared allowing me to see the new one, but it’s new to me. The fact that I have to say that is testament to the speed with which I expect information to spread, so I’m not embarrassed by my possible old news.


Update: 10/25/2010 2:08pm EST – It appears the icon has reverted back? I’m a little confused by this. Old cached favicon making a showing perhaps? But why, if the new one was showing up before, why the change back? Well, proof that it existed is my image to the left.


#Philosophy, #Web Design

Who Am I Designing For?

As a web designer, it’s easy to forget that I’m unlike over 90% of internet users out there. I’m an oddball. Strange. Unusually unusual. I look at and use the web in a way that most people don’t, won’t, and never will. Nor do they care about the details: how it was built, innovation in techniques, typography and design considerations, etc. Those are the things I care about, the things I’m impressed by. The rest of the web’s residents just want to get where they’re going.

When I build something I’m always striving to create a lasting design; something to impress…maybe just myself. The fact is, the difficulty that goes into designing and building a website neither matters to the user who will use the site nor the client directing it be built. Ideas about what works and what doesn’t will be right only when you understand the audience you’re after. I often get stuck designing for an audience I understand–web designers–and this is a problem.

We’re dirty narcissists, the lot of us! Too bad we shouldn’t be. I repent of these sins.

As a community, designers love to experiment and create ground breaking work; I don’t think I’m one of those breaking ground on that sort of scale, but from a personal perspective I’ve evolved immensely over the years. In the end, though, that evolution doesn’t necessarily matter. No one cares what technique you used, they just want to complete a task and move on. It’s better if they don’t notice that technique as it is. Why? Because the real reason a person is at any given website is to view whatever content it contains. Your work just tries to make it easier to browse.

Create experiences that aid in this process and you’ve gone a long way towards guaranteeing people won’t even notice what you’ve done–which seems tough to accept as an individual. We want and crave recognition for our efforts when we’ve tackled a particularly difficult problem, or perhaps I’m just projecting my own desires, but we’ve got understand that what we intuitively understand as novel solutions won’t necessarily be obvious for most people. Again, we’re an odd bunch, us web designers.

Moving forward, my goal is to create work that caters to something other than my perceptions on what makes for great design and to create something that is more appropriate to whatever given context I’m designing for. If you’re a designer, that’s an obvious truth–but sometimes it’s hard to remember.


#Case Study, #Web Design, #Western Michigan University

Western Michigan University: A Case Study

Western Michigan University was established as a teachers college in 1903. Over the course of 54 years the college expanded its offering as an institution of higher learning, and what was once Western Michigan College officially became Western Michigan University in 1957 1. The college is locally and internationally recognized as one of the best public colleges in the state of Michigan, offering a wide array of undergraduate and graduate programs.

Having been born and raised within 40 miles of the University, I am certainly familiar with the impact the University has in our region. It has become one of the primary destinations of students, due to its proximity and quality as an institution; because of its size and importance, access to information concerning a given program, tuition, or college should be readily available to prospective and current students, but it appears that information is prohibitively difficult to find on their current website.

Initial Impressions

You can take a look at a quick run down of this case study in my portfolio.

The organization of information is par for the course when it comes to university websites, but it could be improved. In terms of the user interface, it can be a little difficult to navigate the site easily (that is to say that the front page offers little in the way of jumping to certain actions that would be expected of prospective or current students), however it works quite well and is very simple in some regards; since you don’t want all options available all the time and in all possible combinations on the front page, this isn’t so bad.


The current Western Michigan University website.

The design is just about right for a site that was probably launched sometime around 2001 or so. It doesn’t look bad, just dated, and probably gives the impression of an organization that is not focused on technology–an impression that is neither true nor warranted.

My goal with this self-directed case-study is to see if I can improve the perception of the University on the web as a Top 100 university through the use of more modern design and typography to give the site some visual appeal and a more functional UI.

One Possible Solution

This is merely one possible solution among many. The color choices here may not appeal to many folks, but I am limited by the University’s colors, and chose one route that is unlikely to be selected; instead I hope that it would spur the appropriate people in a direction that would help to improve a site that needs a slight update.


The proposed Western Michigan University website.

Since colleges and universities are notorious for including a banner of various photographs of scenes in and around campus, I wanted to expand on that device and integrate that kind of imagery into a header that would highlight some aspect of the University. The photo and information would then rotate through a progression of different photos and text automatically, but could be navigated by a user if desired.

Below this section I wanted to ensure that certain areas were highlighted and organized in such a way as enable users to find these important sections quickly and easily. I specifically chose a few profiles to design for.

  1. For the prospective student researching institutions to attend; they may wish to know what undergraduate or graduate programs are offer, how much it will cost, and how to apply. Additionally, they may be interested in athletics or other extra-curriculars.
  2. For the prospective student interested in research opportunities at the university
  3. And then for the combined profiles of current students and alumni.

Using these profiles, I organized the homepage in a way that might cater to each one of them.

Perhaps the decisions here won’t work, but it is a good place to get started. WMU, take a look and consider the possibilities.


  1. Profile of Western Michigan University. http://www.wmich.edu/about/profile/. Accessed 8/5/2010.



#Communication, #Web Design

No Comments, No Conversation?

I kind of set out to write a scathing little entry here about the ‘trend’ to shut off or not include comments in a few recent redesigns around the design community. A couple of big name folks have decided to go down this road, and sure enough a few of the smaller players followed soon after, and this sort of follow-the-leader game bothers me–as it always has. It looks like a trend to me.

So, not too long ago I asked myself, “what purpose do blogs serve on the web, if not as a place to engender and encourage conversation?” Isn’t this what the medium has become, and isn’t this it’s purpose? I’m not entirely sure how to answer this question–my own notebook here isn’t a bastion of discussion so much as it is a one way soap box–but there are many who have decided it is no longer important to maintain the debate on their own site. And now that I’ve let this thought stew, I can’t blame them.

If you operate a site that receives substantial traffic volumes it can become more of a chore than it is worth to moderate and maintain comments, and so a few of these folks have turned to encouraging the use of Twitter, Facebook, or a reader’s own blog, to continue the discussion. This is perfect, except that a disconnect can exist between the content, author, and material being discussed.

And I get why people would want to utilize social tools for encouraging discussion. Any one of these formats is better suited to the purpose of getting a community involved around discussing various topics. Frankly, they’re much better than blogs, despite the disconnect I cited a paragraph ago.

I’m referring to Content Management Systems here. Generally, you still need the assistance of a developer to set this up properly.

You see those of you who have not been working on the web in the past fifteen years might not know, but blogs have advanced a great deal over time, adding a wide range of functions and becoming outright CMS’s in some cases, but in researching and thinking about this entry, I have to ask myself if their original use was bastardized to fit a need that wasn’t met at the time?

Blogs are essentially online journals; a place to fill the diminishing role of analog pen and paper, where one could write one’s thoughts in an environment they were more likely to be involved in. Creating a social environment around this seemingly simple use is tricky, particularly when the traffic volume increases exponentially–but it’s all we had until someone took the need and created a product that fit a community participation model better than blog software and commenting models ever could.

In my situation, that is in a low traffic one, this sort of thinking doesn’t have to apply as I rarely see a comment come across my in box. I have very little to moderate, or discuss, which begs the question, who am I even talking to right now? Myself perhaps? But, would my site be better served by eliminating comments altogether? Would it give the appearance of being more widely trafficked if I didn’t reveal that my site is rarely commented on, thus appearing rarely visited? That’s intellectually dishonest thinking, but that doesn’t mean keeping comments is the right move.

I’ll keep comments open for the time being, because I still like the model for my purposes, but what say you fine reader? Does this eliminate anything in your mind, or could you care even less about this now than you did when you didn’t even think about it?


#Portfolio, #Web Design

Reworking My Professional Portfolio

I’ve been working on a format for my portfolio for a long time now–about six months in fact. But coming up with a way to showcase your own work is kind of tough in an own-worst-critic sort of way. At the moment I’m in the process of getting the details and design together, with the former being the most difficult.

In the past I put together a custom portfolio management app; it was crude and poorly programmed, but it got my feet wet in working on that sort of thing in php and mysql, and has launched me onto many experimental ideas. But it became a bear to manage as it was built with one design in mind, and when I moved on to others I had to adapt my site for that format. Not ideal in the least.

Most recently I put together a small manually built portfolio. It showcases a few pieces, and that’s about it. Not very impressive, but minimally invasive.

At this time, I’ve chosen to work with a second WordPress install to run my portfolio. This will allow me to categorize and tag my work as I add it to the portfolio, managing the work in a way that I’ve never really done in the past. Hopefully I get an opportunity to launch it soon, but in the meantime, take a look at my current portfolio.


#Case Study, #Lake Michigan College, #Web Design

Lake Michigan College: A Case Study

Lake Michigan College is a relatively small and old community college located in beautiful Southwest Michigan. Founded in the period following the second world war, it has served to prepare individuals for the eventual transition to a four year institution, technical training, or for the completion of several different degree paths. It has become an integral part of the area’s success in many ways, mainly because of the pool of trained workers it provides local business.

For this reason, it is important to ensure the public can access information about opportunities at the college. In some ways they’ve worked towards this goal, but they can do better.

I’ve been a student at Lake Michigan College in the past and at the time found the website to be very frustrating to use as as a resource; this is perhaps a little less true now than when I attended, however, judging by my explorations of the site, the experience has only improved marginally in that the IA is a bit troublesome and the overall experience is a bit overwhelming visually.

Current Site
LMC Web Site as of 3/24/2010

My First Observations

The current site is a bit of a mystery to me. It appears to be run on the Joomla CMS, which in my mind is perhaps a little strange for a college of this size, though I can understand the appeal of open source (hello WordPress!); but what gets me is the URL structure of the site. You end up with a very long query string on the end, e.g. index.php?id=3342&Itemid=13. This creates a bit of a mess in terms of SEO, though their interests may be focused primarily on the front page. I find it hard to believe that they wouldn’t be interested in such a small but crucial part of their overall SEO strategy. From my small bit of research, it appears that enabling search engine friendly URLs in Joomla is relatively simple, though perhaps their server capabilities prevent it.

The front page focus is pretty evident when you browse the site, as EVERYTHING is located on the front page, gladly not all shoved “above the fold.” This might not be as much of a problem, but the various elements on this page have no evident unified structure or design to speak of. This is a bit chaotic, and can overwhelm the user with choice. It really is unnecessarily busy. In an organization like this, there are probably many competing factors going into the design decisions, though a more organized approach would help to increase ease of use for students.

Lastly, and this is really the part I like best, the drop down menus have markedly improved from the version preceding it, though this menu is not without its faults. The drop down menus on the site are a bit overwhelming in terms of how much choice an individual has, and in some cases choices are duplicated across a few different drop downs. While this structure has served to make it easier in relation to previous versions, the IA could use a great deal of work in order to simplify things for users.

Possible Solutions

First and foremost, I’m really only proposing one possible solution of many. I wanted to capture what makes LMC great for this community, and remind folks that it is an affordable institution, close to home, ready to get you the training you need.

To do that, I wanted to update the logo–but only slightly. Perhaps giving it just a little refinement in terms of type treatment, and in process ensuring any updates I made remained true to the college’s current identity. In a lot of ways that identity has a great deal of traction around here, and it would be a mistake to ignore that.

LMC Logos
Current Logo on the left, my proposed update on the right.

My first decision was to simplify the logo mark as much as possible while retaining it’s character. This was relatively easy to accomplish as I eliminated the border surrounding the mark, ensuring only the most important aspects of it remained. To my eye, this cleaned it up significantly.

My second decision was to refine the type; I’m not entirely sure what the typeface is for “Lake Michigan,” but it appears to be warped out of it’s designed ratios. This isn’t a particularly good practice as it can hinder legibility. In this case, it might not, but to get a good handle on its subtleties I needed to use a typeface I was mildly familiar with. I chose Jenson as an appropriate substitution for the serif and retained the small caps format, albeit a little more exaggerated. I wanted to set “College” apart, as it seems to be of secondary consideration in the overall scheme. I chose a sans-serif face, Futura, that would add a bit of distinction and would be appropriate to carry over into the rest of the web site.

Overall, the quality isn’t there quite yet, but the direction is obvious. A more refined logo mark and type treatment could go a long way towards polishing the college’s image. My ideas here are only a beginning, a possible direction, but I would like to see the institution refine an already well-known local brand.

The New Web Site

As discussed earlier, the current site is a bit of a mess, and my whole approach was designed to refine it and make things simpler for the user. After doing some studying of the current site I came up with a rough structure that I thought would help to address the needs of future and current students a little bit better by paring down some of the menu bloat that was evident before. Also, I wanted to clean up the front page in general, as there were a lot of different elements that served as distraction rather than as useful information. My focus in this redesign is to make it easier for prospective and current students to navigate the site and find what they’re looking for.

Proposed Site Design
The proposed new site design. See full size. See portfolio entry.

There was a lot happening in the current site that helped to focus attention away from primary content. Colors were one of those distractions in my view. There was no real coherence to the color decisions that were made and their actual branding materials, something a casual reader or browser might not be aware of. There is a great deal of red throughout their printed materials; in fact, school colors are red and gray, so color decisions were pretty simple. I decided to limit colors on the site for this rough mockup to red, gray, and black. Hopefully this will help to keep one’s attention on relevant information and aid user’s in deciphering the interface a bit better. And, more importantly, keeping a coherent branded message across all mediums.

Additionally, I wanted to re-purpose the, what I’ll call, pictographic highlight at the top of the site. Currently it’s a an image rotator, with no real purpose in terms of what it provides the user, yet it takes up a rather large portion of the screen. In order to take advantage of an element that could provide great photography, but also be useful, I decided it would be the perfect way to highlight some aspect of the campus that might interest a prospective student.

Conclusion

Overall the mockup is a solution designed to aid in the navigation of the site, create a more obvious information hierarchy, and hopefully address some of the underlying problems with the current site.

This isn’t an end all approach, but one solution of many based on my understanding of the needs of the possible users of this site. The aim was to improve upon, rather than to prove something about, the inadequacies of the current site; hopefully this helped to address them in some small way, and ultimately will get you thinking about the possibilities of a well planned site design.