WebAIM Design


Design “5” with a few variations of a new sidebar style and list format.


Not a lot of changes. The main ones are the sidebar formatting (a couple different options are shown in this draft) we discussed, content formatting, and changing the menu bar a little bit more as well as adding WAVE branding to the search box. The second version is all squared corners. I felt a lack of love for the rounded so I made ’em square so we could compare (like that rhyme?). The third is a style with the menu bar stretching the full width of the content area.

Here’s a version with Arial as the main font and a random screenshot inserted. I do this only because using a font similar to the current site’s style would mean less tweaking of current content to fit the new template. The second is some more noticeable tweaks. The design was starting to look a little blah, almost like I was trying to apply everyone’s feedback to the same design ;) It’s just a little infusion of happiness.


Wider with a few variations of the background. The last two are just the orange color desaturated a bit and then a bit more. I also added a whiter background style as well as a brick version. We may not like the background at all, but at least we have some options to look at. The last one also has the border around the nav bar removed which was one suggestion we talked about so we can see the difference there.

Here’s a few more with a gradient like Jon suggested, with a couple random patterns (damask and argyle) with the gradient as well.


It started as a “tweak” of the New.WebAIM.org design and the next thing I knew i had something with similar elements (most of which I just took a screenshot of and placed in various positions) but completely different. Goof grief.

Anyhow, before I went any further on this, I thought I’d post some screenshots to get feedback on. Click on any image to view the full size version.

Draft 1 w/ Original WebAIM Logo, Jared’s Logo and Gregg’s Logo Idea

Draft 1b – Gregg’s Logo Concept / (Darkened Red Area, Tweaked Logo Idea) / A few more minor tweaks.

Here is a design that is keeping closer to the original. I’ve tried to give the most important elements specific places so they don’t simply blend into the sidebar along with less important content. I’ve got a couple versions that a pretty similar, just a different way of placing the search bar.

This is a very rough idea of what i was thinking here, but I had the idea so I took 15 minutes to at least mockup some form of it to see if it is a style anyone likes.

I started with a blank slate on this one to see where it would take me. Pretty early on, but a fairly different layout than the others with a serifed typeface (Georgia).

Original plus with a different background & container style / another with more content in place / alternative background

Hi, I'm Gregg.

I design, build, and grow SaaS tools for marketers.


By day I oversee marketing and strategy for resort CRM / ecommerce provider, Inntopia. After the kids go to bed my laptop is my workshop as I build my own suite of marketing tools called PeakFeed....
Read my story→