This version also marks an important moment: WordPress theme servers indicate over ten thousand users have downloaded my theme. I’m immensely proud of this number as it marks the WordPress community’s trust in me, as well as a testament to my skill. I never, in my wildest imaginations, ever imagined Stunning Silence would be this popular.

Changelog in 1.2.7

• WordPress 3.0 menu functionality has been added to the navigation bar at the top. In addition to adding the Menu widget to your sidebar, you now have the ability to customize the navigation bar at the top to show or hide pages, categories, or just links to other places. Note that sub-menus are not supported as of this version. You can also just leave it alone and it will continue to work just as before.
• Footer updates have been made for aesthetic improvements. The link to my website has been reduced in size as well as redesigned to be more pleasing. As usual, I would appreciate it if you left them along, but as per the GPL and WordPress requirements, this is not required to use the Stunning Silence theme.
• The search page bug has been fixed. Previously when loading a search query all of the posts and sidebar would be aligned to the right side of the page. This was a bug and has been fixed in this version. 1.2.7 also adds in a heading at the top that lets the user know what their query was.

Musings at how far I have come

I still remember version one of my website – a simple creation but the beginning of great things. I have been designing since second grade when I first began in print design. I have come very far now.

Ten thousand downloads is no very large amount in the WordPress world but to me it is very special. I thank each and every one of you for downloading. Stunning Silence is the predecessor to Silent Noise but I will keep both around.

Recently when I signed on to the Yoggrt advertising network I became aware of just how far I have come, and I really thank everyone for everything. I would be nothing without the support of others, including my parents, my family, my friends, and more recently, my business partners.

Thank you, again. All my respect to you.

There was one thing I didn’t like, however: the staircases. Rather, not the staircases themselves, but the signs posted inside of them. For all the marvel and grandeur of design everything else was, the signs that indicated what floor a person was on were created remarkably without thought. It completely killed the experience.

The signs looked something like this:

BUILDING 19
STAIR D
LEVEL 3 OF 5
EXIT DOWN TO 1
NO ROOF ACCESS

When I saw a sign like this, my first thought was that I was on the nineteenth floor. It occurred to me that it would be a long way down, and that I should have taken the elevator. Then I pondered how I had managed to climb up all that way.

Obviously, by now you realize what I had mistaken: I had thought the building number was the floor number. But you try running down steps and glancing quickly at a sign as jampacked as this one, and you’ll see what I mean.

This sign fails in terms of usability.

The thing about usability is that it a) occurs everywhere, not just in things like website or graphic design, and that it is b) often the opposite of design. Where design is an art that tries to show itself off to the user, usability must remain in the shadows, hidden.

Ever had a pet peeve about something that you used? Maybe your coffee cup’s handle is oddly shaped so that holding it for a while hurts. Maybe the chair you’re sitting in refuses to sit still and just has to wobble. Maybe that electrical outlet you used was oddly oriented so it hurt your hand when you plugged something into it.

If you’re like me, when you use these things that are badly designed, you groan and make a comment about how poorly thought out the thing was. You rarely notice a cup that conforms perfectly to your hand, or a chair that lets you lean back just the right amount. That electrical outlet that was tilted so you could reach it perfectly didn’t seem much to you.

You might say it was nifty, but that would be the furthest extent you would go. Don’t worry – I’m not chiding you. It’s what everyone does. You don’t notice good usability design, only bad design.

That stairwell sign we talked about a while back could have been redesigned, maybe to look something like this:

LEVEL 3

That’s right – there’s only one thing left: the floor number. You might notice I left out the total number of floors, where to exit, whether roof access is present, and which building and stairwell the user is in. But that’s the thing: they don’t care!

Does average Joe need to go onto the roof? Probably not. Does Joe know which floor to exit on? Probably, since it’s standard convention to locate exits on the first floor. Does Joe know which stairwell and building he’s in? Nope, but why does he need to? All he’s trying to do is get to whereever he’s going.

For those opportunities where unaverage Bob does have to know whether he can get to the roof, however, the designer can put a row of icons or small text at the bottom. That way, if he or she really needs to know which staircase they’re in – in an emergency, for example – they can just check. But for our average Joe – why does he care?

Interestingly, on the university campus I visited, not one building I entered, nor any floor I was on, indicated they actually had roof access. I can’t confirm that there aren’t any, but I did visit a plethora of floors and buildings. I laughed at how the basement stairwell signs explained there was no roof access.

I don’t mean to be bashing on the university, however. If you’ve visited it, you might know which one I’m talking about. The college was a wonderful place and, with the exception of those pesky stairwell signs, was beautifully designed. But one of these days, I’m going to think I’m on the nineteenth floor again.

Note: It can be argued that humans can read the entire sign in a short amount of time, as I did for each time I saw one of them. However, the time it takes to process the sign and determine the floor number could be easily eliminated if the signs were designed smarter.

(Look for this to come out soon. Trust me – it’s going to be awesome.)

Innovation at its best is discussion. Discussion on how to make it better, discussion on how to improve it, discussions in general tend to be a good thing. It means that people are talking, and most of the time, when people talk, problems get solved.

As a by-stander, it’s very hard to argue about the argument, because it’s going to be better in the long run – the web is going to be better. How we come about achieving that “better”, however, is a different story. Both involve standardizing something, whether it’s Flash or Canvas – HTML5 just happens to be built into the browser.

As a web designer, I lean towards Canvas in that it isn’t conformed to a vendor. I don’t like how Apple conducts its closed platforms, like it’s the supreme ruler of apps. On the other hand, it is their device, and it does maintain quality assurance. Apple’s watching eye does go a little too far sometimes.

The result of Apple’s watchful eye is that people actively search for alternatives. Apple denies Flash, and as a result, even more people begin supporting Canvas. Because other than arguing at how mean Apple is, the truth is that the end user doesn’t care. Unless it’s about something they regularly use that they suddenly have no access to (eg. Google Voice), they don’t care.

As web developers, we do care though. It matters in the end for us, whether technology is easy for us to use or not. It affects users too. We’re all a part of this. I don’t care how it ends up – it’s innovation. Eventually everything will work itself out.

A message: I’ve been taking a hiatus from blogging and other activities as I try to get some stuff sorted out. I’ll be back on track in a few weeks. Sorry about that.

Colors are such a crucial part of any design piece, and what I’ve often found is that the selection of such colors play a very important part. Therefore, it makes sense to have a very good color picker.

Harnessing the power of Steven Witten’s Farbtastic (the actual color picker you see) and then some of my own code, I’ve created culrr, which lets you see the color you’ve chosen on a very large scale.

What I’ve noticed is that very rarely do color pickers display the color you choose in a very large fashion, and I regularly scour the Internet searching for a suitable color picker. In the past, I used to use the demo on the Fartbastic page. Then I found Chir.ag’s Name That Color and used that for the color picker, not for the actual color-honing abilities (which are excellent, by the way).

In the future, I will also add on support for RGB values. I’ll probably also implement some other features, depending on public support. I built culrr for myself to use, and I wanted to release it as an act of kindness.

On a side note: Please don’t use Culrr for your super-important color-picking use. I find it’s good enough for web design, etc. It may not be good enough for whatever it is you are using. I can’t be held liable for anything. Don’t sue me.

CULRR!

Affyn’s been released! Previously Affinity, this theme has gone a name change after an unfortunate naming collision. Affyn is a free WordPress theme with a clean yet grunge design, a modular form of widget layout that allows for mason-like layout in the footer, and other great features that make it a great WordPress theme.

What’s with the wait?

I’d like to apologize for the eight month wait game I have been keeping everyone in. I promise that it was not a publicity stunt nor a cheap way to get more visitors, but rather an inconvenient mix of time constraints and other tasks. I’ve been lately working on writing as well as starting some other large-scale and small-scale projects.

I made this problem even worse. I had originally checked for naming conflicts in November 2009. RocketTheme released a theme called Affinity in January of 2010. They are commercial and larger and it has forced me to undergo a name change so I won’t have to fight for the namespace.

I asked my followers on Twitter what the new name should be. I’d like to remind everyone that I value every comment and tweet that is addressed to me (@bradr) and employ TweetDeck to catch them all. I appreciate everything.

Where can I get Affyn?

You can get more information on my WordPress page.

Download it here: Affyn download from BW servers.

• Changed default setting of Custom Font (Cufon) to off.
  More people than I expected use an alternate language that the font file didn’t support, and a lot of people report having problems with this in Internet Explorer. I’ve changed the default to off.
• Moved RSS logo to right, removed on hover effect.
  I’ve moved the RSS logo more to the right so it doesn’t interfere as much with the name of your blog. I’ve also disabled the on hover effect because I don’t like how it looks.
• Changed default Twitter logo, now options available.
  I’ve changed the default Twitter logo to one by Komodo Media. The older one is also available for selection through the Theme Options interface.
• Removed default fluer-de-lis.
  I never really liked how the thing looked. I’ve removed it for now.

Available for download on the official WordPress servers or through my WordPress page.

Working late the night before Thanksgiving, I wanted to release Affinity on Thanksgiving Day. It featured grunge touches without losing its elegance, focusing all the attention on your content. But it’s not here.

Affinity is not complete yet. I really wanted to release it on Thanksgiving Day, and as such, many features are missing. I decided to wait until I finished those features before I released Affinity to the public.

Features to be implemented:

• Widgets. Widgets will be implemented to appear at the footer in three columns, each can fit one widget (of course, you can put more, but that would look funny).
• Options page. An options page to edit text, information, etc.

Right now, the lack of widgets is a biggie. The rest is almost complete. When I get more time, I will finish that up. Just a quick heads-up: Affinity is almost here. Don’t give up hope.

Update: Affinity’s been released (it’s now called Affyn). Check the newer entries on this blog.

How did you learn web design? For years, I’ve been asked this question. After being featured on Lifehacker, I’ve received an influx of these questions.

I have developed an unspoken method of learning that has helped me learn six programming languages and hundreds of applications like InDesign or Photoshop.

With these tips, you should be able to learn anything. Most are programming-focused, but you should find that they work with many things in life. In addition, you’ll be able to gain knowledge quickly and with results.

Without further ado, I present my methods.

Find (or create) a project to work on.

To learn PHP and MySQL I created a online website that complimented a school magazine I was working on in third grade. Though it was stupid not to use a CMS, I gained valuable coding advice. To learn CSS, I upgraded that website to run off divs instead of tables.

Later on, I told my friend I was going to make a website for him, and I started to learn jQuery and JavaScript. The point of the story? Learning always works best when you have an application. If you don’t have a portfolio yet, make one! If you want to learn, find a friend and imagine you are creating it for them.

If it’s learning a program, bring it up and start staring. Try basic controls. If this doesn’t work (for example, I was completely lost when it came to InDesign’s interface) then Google is your friend. Simply Google whatever it is and you should find it very soon.

Find a friend (or a community) to support you.

Sometimes lone coders don’t realize how much the help of a friend can be. When you’re someone like me who is arguably at an age where most people don’t… code, then every friend that loves to code can be amazing to you, for example, my friend Kevin who has supported me, or my other friends who’ve never laughed at me for loving programming.

If you’re lacking on the social side, create something for the community, like a WordPress theme. Submit it to directories. People will most always begin to email you with praise or questions, and you will begin to feel loved. I did, when over fifty people emailed me with praise or questions about Stunning Silence.

When making something for a community, it is best to exploit a community full of people and love. For example, without knowing it, by making a WordPress theme I was creating something for a thriving community.

Things like CSS templates, while useful, will probably not generate such a response. When making your creation, remember to submit it to directories so you will get recognized. It’s a win-win situation: you get appreciation and they get an amazing theme.

Contribute to forums.

When you’re lacking knowledge and need to find out something fast, submit a question to forums. You will be able to generate quick answers to your questions when you post them.

Remember to pick a forum that is thriving. In the past, I have used several forums. Since my questions are mostly focused on the programming / computing areas, I have found Stack Overflow (programming) and Super User (computing) most helpful.

When you post a question, you may be helping others. But don’t just post questions for others to answer. Remember to contribute to these forums as well by answering questions. For places like Stack Overflow, whenever a person asks a question, reply with code bits.

By helping others, you will be learning too. Each question can be considered as a mini project. With this in mind, although you are not building your portfolio, you’re building your knowledge. In addition, when you make a mistake, others will be quick to point them out. You will learn much.

Apply pressure to yourself.

If all else fails, give yourself a time limit. If you’re a freelancer, treat your learning as a time-tracked project. Since you should have found (or made) a project, simply count this project as work.

Track time on your learning. Make sure you’re not wasting too much time on something. However, this being said, there is a difference between wasting time on something and understanding something thoroughly.

Write down what you’ve learned in a Google Docs document or a notebook. It doesn’t matter where it is as long as you write it down. It will help you learn and it becomes a helpful resource in the future.

If you’re feeling especially ambitious, blog about it. By blogging, you’ll let other people know you’re learning. Provide helpful tutorials to those who like tutorials. While we’re on the topic, please make suer you are not following tutorials when learning. Tutorials defeat the purpose of creativity. Make your own.

And last but not least, collect examples of good work. If you’re a graphic designer, collect examples of good art in an Evernote notebook or an actual notebook. When I see a cool logo, I will usually take a screen capture of it and save it in my Evernote notebook.

When you have time, look through your collections. They provide great inspiration. In addition, instead of staying on the computer, take a walk outside. It will relieve your head when learning. When you come back, you should find that nature has soothed your mind.

–

Please bookmark this resource if you liked it. I thrive on your compliments and comments. If you have anything to add, let me know.

Photo credits: pagedooley, chitrasudar, 1Happysnapper.

1. Sizing (width, height)
2. Positioning (position, z-index, float)
3. Padding and Margins (padding, margin)
4. Typography (font, line-height, text-decoration)
5. Color, Background, Opacity (color, background, opacity)
6. Borders (border)
7. Content Specific Settings (list-style)
8. Usability Hacks* (text-indent)
9. Miscellaneous

Bookmark this page for easy reference. Let me know how it works out for you!