After short amount of time coming up with a new name, a long time looking for domain names, a relatively short time making the design, and a really long time trying to make it into a Blogger theme, its finally made it. Its incredible how the "easy" parts take the longest time while the more difficult parts just seem to work themselves out.
When I was working on the design I ended up getting myself into a bit of a snafu which lead to a somewhat interesting journey that result of which is the design you are looking at. I liked the name Regular Expression because like the pun, its pretty self-explanatory, and was able to snatch up a nice short domain name to host it on. Once I had the domain name it was time to get going on the design. I had some ideas floating around in my head, in particular I wanted a large text logo with regular expressions in the background. I recalled seeing a tutorial that had background text and a logo which was made up of the background text (available here). After a bunch of tweaking and changing I ended up with this:
Unfortunately I was unable to get reasonably smooth looking text, so it ended up looking more like I had drawn the logo on a fabric softener sheet, and thrown it in the wash. I decided to abandon trying to write the logo out of the background text and just wrote it out normally and that looked much cleaner, and easier to read. I then went ahead and added a little navigation bar, in this case it is more of a link bar, but it looked nice and I was happy with the little bit transparency.
Since its just a blog all you really need is a header and color theme and your all done right? Sure, its just a matter of adjusting the template to fit the color scheme and you should be on your way. This is where things got a bit tricky. First, when trying to modify the template I couldn't get the links to work. It was incredibly bizarre since they worked in the simple HTML site I made and as far as I could tell Bloggers template engine wasn't doing anything funny. I just played around with the HTML using Bloggers template preview feature to try to nail down the problem. (insert a few hours frustration and relearning of the loveliness that is floats). Long story short, Bloggers template preview has a bit of an issue. It would render the links correctly, but they simply weren't clickable. It wasnt until I actually submitted a template (and made my blog ugly for a few minutes) that I figured out that it was preview that was the issue. How frustrating.I finally got the template looking alright so next it was time to figure out colors. What I very quickly figured out is that the black-grey-red combination I had was going to be difficult to work with. The accent color (red) was particularly tricky since its very difficult to find a shade of red that is readable for any decent sized line of text, say a title. While I could have used it in small spots like an underline or the numbers in the sidebar, it was gonna make finding other colors for text, titles, and links quite a bit more difficult. After looking around for a while to see if I could find a few ideas on what would work, I figured I would switch things up and try a lighter design.
I had pretty quickly arrived at something which I thought looked pretty nice, still kept the theme, and was able to use red in a readable way. I was pretty surprised how quickly it came together and how nice it looked, and then I remembered why. It was a design I definitely had already seen before. Apparently my subconscious remembers websites incredibly well, even down to changing the red links to black with an underline on hover actions. That's no fun. So back to the drawingboard I go.I was playing around with templates and ended up with my light header on top, and old (dark) blog design on the bottom, and said hmmm. I liked the blue that I was previously using so I went ahead and changed the red in the logo to a nice cool blue, switched up the link colors and was on my way. The only problem left was the header, it was dark while the main background was white. I tried changing it back to the white one, but it wasnt working. Instead I kept the black, and just eased the transition between the two a little more. The first way was to just add a little fade below the nav bar, pretty simple. The second way is a little bit tricker and I actually stumbled upon it by accident, but I liked it. I'll give you a hint, while the nav bar is somewhat transparent it darkens the background as opposed to lightens it.
After all of the messing around I finally ended up with the page you are looking at.
Whats the moral of the story? Start with a diverse color pallete (kuler is a nice tool for that, thanks Mike) and then let the design come from that. Its a lot easier to not use a color in a pallete than it is to add an additional one. It will also likley stear you away from having a very plain black and white website, but dont go overboard.
1 comments:
Looks pretty good. Only the timestamp and labels under your post are a little hard to read.
Post a Comment