Technovangelism

After nearly a year and several more revisions, I finally implemented a design I actually like (for now). I’m happy with pretty much everything. I like the colors, the general layout, and the font, while basic, is nice. I am not a “typeface guy,” so if you have a recommendation on what I should use, I’ll listen.

One piece I’m particularly happy with is the section under the “No Unread Threads” heading. It has always bothered me that when a user with no unread threads visits the site, or once a user is finished reading his threads, the site loses a lot of its immediate value. Without a list of things to do, the user typically leaves the site. He’ll be back soon, but why not try to keep him there a little longer. Giving just a few options in that blank state will hopefully spark a little more activity.

All the previous designs were made with unread threads displayed, so here is another shot with a few of them for a more direct comparison.

I still find red to be a difficult color to work with. Finding the right shades of red, tan, and gray that all blend well is a challenge. As I said earlier, this will do for now. There are more important matters to take care of before needlessly changing the theme again.

Finally, design number five. Spring Break got in the way of me finishing on time, but all is well again. I have come to the realization that the only other colors that can be used with dark red are varying shades of gray. Sometimes you can sneak some green in for a little more contrast, but your options are limited. Lots of elements were inspired by Basecamp project pages.

Overall

I finally added all of the elements I have been promising to add. I dropped the sidebar and added its content to the footer. It allows for more focus on the main content pieces, but might reduce the focus on the Links and Awards section a little too much. I want people to see these, so keeping a sidebar around is necessary.

Header

I like the use of the main color in the header background. If I ever want to change the primary theme color, it would be simple to swap it out with something else.

Main Content Area

When displaying a unread thread, I like to indicate the number of unread posts and how long ago the last post was made. Normally, it takes too many letters if I want to spell out all of that information, but with the red dot design, I can indicate how many unread posts are in each thread. The bigger the dot, the more unread posts.

With reduced space for the calendar, I chose to not make all days the same width. Days with events are larger so more of the name can be seen. The “Add New Event” button is there to make it somewhat consistent with the list of threads having a link in each of the day boxes would take up a lot of room.

Sidebar

No sidebar! I finally tried removing it. Not sold on the idea. Sidebars provide important functionality, trying to pack two pieces of content into the main area forces them both to be too narrow.

Footer

Large footers are more appropriate for blog and CMS style websites. They have lots of loosely-connected pages that need links. Threads in a forum need to be listed somewhere, but there are far too many to cram into a footer. Even a small site like mine produces hundreds of threads per month, and most of them lose relevance within a few days. The final design is unlikely to have a large footer like this.

Here is design number four. I would call this a programmer’s design. Extremely simple. No real color scheme. While creating this design, I was disappointed with the lack of color, but now that it is completed, I do not mind it so much. I’m not sure I would be able to sell software that was this plain, but it might be nice for a personal site. Inspiration was provided by Mixx.

Overall

Not enough time to spend on this design. It is a bit amazing though what you can accomplish when you are restricted in time. The lack of time forced me to make do with as little as possible.

Header

First attempt at putting the navigation links above the main title of the page. Doing so does not provide as much alignment in the page, but it was worth a shot.

Main Content Area

Again, very lack luster. The total number of combinations for the content area is a bit more limited than I was expecting at first. It seems no matter how hard I try, I cannot break out of the style I have used on all of the first four designs.

Sidebar

Just like the main content, nothing new here. Although this time, the sidebar does not feel so plain when the rest of the page matches.

Footer

No footer this time. Is a footer always necessary in a design?

Day three! Today was much more a color scheme change than anything else. The colors and layout inspired by the Compositio WordPress Theme. I went a little overboard with the blue, but am very happy with the balance of each hue.

Overall

This design is back to my old standard of a single-column, fixed sidebar down the right side with the main content area filling the rest. Nothing too advanced. This will be the last design that follows this pattern. If I want to continue improving my skills, I need to branch out of my comfort zone.

Header

I have reduced the number of links even more this round. They aren’t replaced anywhere else so this design may not match the final implementation, but I could work them in somewhere. I did not want to make the navigation links like tabs, even they look close to them, because my site is not very conducive to tabs. If this design was used for another project, I might like them as tabs.

Main Content Area

I have noticed the wrap-around flag/tab on several sites and tried incorporating them into my design. The extra depth it adds to a design is remarkable. I went back to the standard thread design as well. Improving over that is difficult, but there is still plenty of time to try.

Sidebar

The sidebar is a little bit too skinny in this design. There is no reason why it cannot be wider. I did not want to spend the time on it when there is more work to be done. I managed to dress up the sidebar like I have been planning to. It is nothing special, but enough that I would not call it boring.

Footer

I am really liking the “Who’s Online” section in the footer. It is typically an empty space in a design so it provides plenty of room for the list. In the last two rounds, at least one will have a more advanced footer. All that room is begging for some content.

Design number two is out 5 minutes before the deadline. Much more detail in this design than the last with probably two hours spent more than the last time. I am happier with this design than the last, but there is still lots of improvement to be made. Inspiration came from the Imprezz theme found at Smashing Magazine.

Overall

I tried involving some contrasting colors. I am having difficulty finding good places for those colors. I am going to concentrate on this a lot more in future designs. Perhaps starting with a different color scheme will make it easier to apply the contrasting colors.

I am not typically a fan of three-column layouts, especially for a forum application, but I went with one anyway. I like it, but I had a hard time filling all the columns, and if I did not fill them as much as I did, the page would look rather empty.

Header

Very simple this time. I managed to reduce the number of links in the header compared to the original design by adding a search box to the red sidebar. I have also considered adding a chat area to the bottom of the home page that would get users using it more, and remove one more link from the header. Probably would not happen, but it is a remote possibility.

Main Content Area

Filling the content area was the most challenging part of this design. I normally design the look of each individual thread to be long and narrow, and with this design, I was forced to shorten them up. This allowed me to add some extra information that is not normally seen with the threads. Seeing a count for the number of unread posts can give a user a rough idea of how much time he will spend reading all his or her unread posts.

By placing a mini calendar in the sidebar, I can add a plain list of events to the main content area. I normally would not do this, but as long as a user can have a glimpse of the upcoming events, I am willing to take a chance.

Sidebar

Quite a bit more detail in the overall sidebar this round. The Awards and Links sections are both rather bland once again; I am struggling to make them different. The search box in the sidebar was placed there so users are more aware of its existence and to remove a link from the header. The mini calendar is growing on me. Getting the color right on it is extremely difficult. I tried several different schemes and finally settled on this. I unfortunately could not determine a satisfactory way of displaying the number of events on each day. If this were implemented, I would plan to use a large balloon tooltip on each day that would contain the title and a short description of each event for that day. I moved the “Who’s Online” section into the sidebar because there is plenty of room for it. Without it, the red sidebar looked empty and like it was missing something.

Footer

Can you even call it a footer?

Here is design number one. I managed to only spend a couple hours on this design. Hopefully there is enough detail that you could image seeing this for real. The overall design is lacking in polish (mostly in the sidebar). On the next design, I will be spending another hour or two adding more polish to all areas of the design. I wanted to produce this first one very quickly without putting too much thought into it. With my design skills, I need to focus on the quantity of my designs before I can start focusing on the quality.

Overall

An incredibly simple design. I tend to prefer layouts with a fixed sidebar width and the rest of the page flows. Not all of my designs will be like this as I might discover that I don’t actually like it all that much. The whole page could be laid out in html and css in no time. The only images required would be for the shadow beneath the red “flag” and the shadow on the right side of the main content area. The functionality is on par with the current site, but as I mentioned in the introductory post, this is not necessary. The color scheme is a bit bland. Grays and white looks good, but there needs to be some additional contrast. In the next rounds, I will try incorporating more complement and triad color schemes. Note: If you have ever used Adobe Kuler for picking color schemes, try out Color Scheme Designer 3.

Header

The header and initial design was inspired by the Drupalcon 2009 site. I really like the color contrast between the dark red and the gray background. A little bit of shadow beneath the red “flag” provides just a little depth without being too garish. The header is probably taller than it needs to be, but it is not so large that the user is going to have to scroll needlessly.

I dislike the number of links in the header. The current site has eight links in the header for a logged-in user. Trying to work with that many links puts a lot of constraints on what can be done. Constraints can be a good thing, but because I am doing this for fun and do not have anything at stake, I might cut down on the links in future designs.

Main Content Area

I prefer sites with white backgrounds behind the content pieces. It is easier to read and not so harsh on the user’s eyes. The light red/peach color is not my favorite, but it is very difficult to find a shade of red that is light enough to not overload the user, and dark enough to not be a mismatching pink.

Unread threads are the main focus and need to be front and center. The threads should stand out as much as possible. They are the number one reason why users visit this site, so not giving them any attention would diminish their role. The white and gray do a good job contrasting with the light red/peach, but there could be more.

Having a calendar on the site that mimics a typical wall calendar is very powerful. A list of upcoming events can not show as much information about the upcoming weeks as quickly as a calendar view can. I will probably be trying to change this up in future designs, but it will be hard to beat.

Sidebar

Ignoring the container portions of the sidebar, I like it a lot. The shadow helps reduce its focus, as it is not nearly as important to the user as the main content area is. Again, the simplicity of the design shows through and works. No rounded corners, gradients, or anything special keep it looking very clean and appropriate.

The container portions would need a lot of work if this design were implemented. They are so plain. And not the good kind of plain. They are the boring kind. Too much color might draw attention away from the main content, but something subdued would add a nice touch for when you were intentionally looking at it.

Footer

Simplicity takes the lead on this one again. Great big footers like that found on the DrupalCon site are neat, but I do not have anything to put in them. The one thing I did include in the footer is the list of those users current logged into the system. It is a very nice, out of the way place to put that list.

I have always wanted to be a graphic designer. For as long as I have been writing software, I have wanted my software not just to function well, but to be really ridiculously good looking at the same time. I have had a few chances to practice my design skills on several projects, but it is never enough. So in an effort to improve my graphic design skills, I will be attempting to do a design for a home page (more on this later) once a day for the next five days starting tomorrow.

My plan is to mock up the page in Photoshop in fairly high detail. I want it to be a close reproduction of what the final page will look like. Each day when I post the new mockup, I will post my thoughts on the design, as well as inspirations for it and anything else that contributed to that specific design. I will be doing my best each day to completely forget what I did the day before as I want each design to be unique and above all else, pretty.

The page I will be mocking up is the logged-in home page for a forum site I built in Rails over a year ago. I have grown tired of the design and would like to see what else I can come up with. Some important features of the current home page that I need to include in every design are the the list of unread threads and a calendar/upcoming events widget. Other less, but I would still like them on there, important features are a list of awards for members of the site, a list of links for sub-navigation, and a list of the users who are currently logged in.

Those are my only functional requirements. The main colors of the site are maroon and gold, so I will be incorporating those where possible, but I am not bound to them. All other design choices are up in the air, and I will do my best to cover several different layouts and styles.