I don’t feel the need to be an “artist” but sometimes I want a certain frame around a picture and it’s very difficult for me to translate an idea into a concept and the concept into art. If I’m designing for me, I’m pretty forgiving and understanding. But if I’m designing for others, it gets complicated.

Having said that, even great artists have this problem. Your artistic aesthetic may be diverse, but even then everyone has a point of view. It’s difficult when a client has a different point of view and you try to fit that in. I know there are things within my skill set that the client will love, but sometimes it’s so hard to figure those things out. It’s hard to work with someone else’s point of view, especially if they can’t really explain it.

With the art company, I don’t really have to worry about that, because they can do the art themselves and I just have to explain the functional requirements for the art. But with some other clients, it can be tough. They will say the most bizarre things to describe what they like, and I have to try to figure out what they mean. Sometimes they don’t even know what they mean.

But the most amazing thing has happened. I’ve been adjusting the colors as I get used to them, and I’ve made real progress. The thing that’s interesting to me is it takes about 15 minutes of looking at the colors to know what to adjust next. In fact, I’ll go back to things I hadn’t liked before because I can finally see why it’s better. But it’s necessary to spend the time just looking because you get used to the colors in that time, and you can start to see if a color is too bright or too saturated.

It’s really interesting. It’s like the first colors I choose are the colors I want “in theory” but it takes me a while to see that the color I need is different. It’s basically the same color, it’s just the color I meant to have but couldn’t see in the first place. I’m usually only adjusting the saturation and brightness values.

More and more lately I’ve been realizing the importance of these adjustments. I wonder if I will ever be able to get faster at this or if I will have to spend the time staring for every new theme.

Quick Facts

Featured Story

The Font War: Ikea Fans Fume over Switch to Verdana

What

Ikea switches to… Verdana?

Excerpt

All this outrage over a font? For some designers, it’s an issue of propriety — Verdana, which was invented by Microsoft, was intended to be used on a screen, not on paper. “It has open, wide letterforms with lots of space between characters to aid legibility at small sizes on screen,” explains Simon l’Anson, creative director at Made by Many, a London-based digital-consulting company. “It doesn’t exhibit any elegance or visual rhythm when set at large sizes. It’s like taking the family sedan off-road. It will sort of work, but ultimately gets bogged down.”

Carolyn Fraser, a letterpress printer in Melbourne, Australia, adopts a different metaphor to explain the problem. “Verdana was designed for the limitations of the Web — it’s dumbed down and overused. It’s a bit like using Lego to build a skyscraper, when steel is clearly a superior choice.”

Comment

I have to wonder what they were thinking here. Microsoft has never promoted or recommended Verdana for print. Ikea’s cost justification is bizarre, I can’t believe Ikea was spending much on fonts. I’m sure the design company fees for making this change would have paid for fonts for the next million years.

Changing fonts is a normal thing to do for a company, and I really do dislike Futura, their old font. But Verdana? With all the beautiful fonts out there you choose one of the few fonts that wasn’t designed with the primary concern of looking good?

I don’t care enough about Ikea for this to be personal for me. But the fact that a big design company made this choice, it makes it feel like stupid is some sort of a disease and it’s spreading fast.

Then something just wasn’t right, it needed to be darker. So I made an even darker shade, worked with it, made more adjustments to my image and it was so much better.

Then I looked, and it still wasn’t right. What’s interesting is that the color itself had been correct all along, but this shade of the color “glowed” too much. It still wasn’t dark enough. So I made it darker again.

There’s an interesting feeling when a color moves toward the correct color. Each change is like a sigh of relief. But this color was more the right color and it felt good. And the process is like going to the eye doctor, “Which colors is better, this one or this one? Now this one or this one?”

I didn’t quite realize this business of working with color was going to be such an intuitive process. I almost always speak to myself in lighting terms not in color terms when working with color. I wonder if in the future I’ll get more sensitive and be able to tell some of these things and choose correct colors right from the start?

As usual, when I started setting about to fix that, and having worked on a bunch of new themes since then, things went in a totally new direction. I think the new theme will not only be better, but you will be able to say, now that is a well thought out and complete theme.

A have to say, though, that creating a good color palette in some ways is the most difficult part of a theme. I realize now that I need to have some base concept to be my inspiration. This can be a building or a place or a picture, and can guide the theme and provide colors as well.

Without that base inspiration, I run into creative dead ends where things just stop making sense.

Now that I’m starting to understand my own scheduling needs, things are running more and more smoothly and I just love it. There’s a lot less stress, but tons more productivity, and tons more happiness. I can honestly say now that having a job held me back, I am someone who needs to have my own company to progress at the rate I want. I’ve know this from the first job I had, but with no experience I didn’t feel comfortable going out on my own. But with the experience, it’s pretty darn comfortable and a lot of fun. I know my customers can’t appreciate everything I do, just like my manager’s couldn’t. But customers appreciate things more anyway. I am actually making their business run smoother and work better and they definitely can see that. Ironically, in spite of that being the goal, one doesn’t often do that as an employee.

I just finished a new theme for Doxie News and I’m really happy with it. I think it’s my best theme yet and I couldn’t want any more from it. As you can see it shares a lot of design concepts with Designoplasty but is distinctly its own. I love the shading in the the theme. As I learn to get better at manipulating color and texture, it’s really adding depth to my designs.

This was a goal of mine almost from the start. You can get somewhat nice themes using well selected solid colors but they’re always going to look fake. In the real world, all colors have shading. For instance, if I have a booklet with a solid white cover, it is actually going to appear as a gradient from gray to really bright white depending on where the light sources are. On the web, though, when you say white, it means literally white.

This gives a naturally fake look to everything. And we, as users, have come to understand that, and relate to it. But then when you add the shading in, people kind of have an, “oh yeah” moment.

I’ve done a lot of experimentation with applying various gradients to achieve this look, and nowhere has it turned at better than Doxie News. It really make me happy.

Arial vs. Helvetica

IE and Windows are always second class citizens with me because they render so poorly. I think it’s important to make sure the people with the best browsers get the best experience, not the lowest common denominator. That’s why I design on Safari. I make sure everything works and looks right on other current browsers, of course, but those browsers bring their drawbacks that I can’t help.

One example is Helvetica vs. Arial and fonts in general. Here are a couple of screen captures from a Mac and Windows.

The above screenshot is Safari 4 running on a Mac. Notice how wonderful that classic Helvetica “1″ looks next to the comment. The name and time look great and still retain the characteristics of their font even though they are smaller. The text just looks normal, very similar to how it would look on a printed page.

This is IE8 on Windows. What the heck is up with the Arial “1″? Wow. That is one ugly “1″. Arial was meant to avoid licensing costs while still essentially being Helvetica. Why did they choose to make this very important character so horribly different? The fonts on Windows are rendered in a very chunky fashion. Look at the “z” in Eliza. The body text also looks choppy.

Microsoft is very stuck on this idea of making fonts align to pixels. But Apple does a great job of making fonts look like they are supposed to look. Again it goes back to the idea of trying to approximate the real world. I know that the fonts on a Mac start off looking fuzzy to people. I came to a Mac while working at Microsoft, so I definitely noticed at first. But after a while you really appreciate the readability and don’t even think of them as fuzzy, just correct.

I’m really happy with the theme. It looks great on great browsers, and it looks as good as it can on the rest. I really do love the way those Helvetica comment numbers look. The concept of large bold numbers surrounded by white space is such a Helvetica thing. It’s reminiscent of Sesame Street, don’t you think? It’s fun to have that touch.

That’s essentially what happened here. I had a lot of new technical ideas and new design ideas that went into this theme. I wanted something super dramatic, which I think I got. What shaped the whole theme was I wanted the Designoplasty logo to actually show the real page background, revealing something nice. In many ways this one design decision dictated many of the other decisions that were made.

I really like the colors that came out of this. I still feel like choosing colors is very random. I basically find one color I like and then try to generate other colors from that. This brown was originally black, but I was having some gradient aliasing issues which I thought would be mitigated by making it brown. They weren’t. I ended up fixing those another way, but kept the brown. Then the red seemed to go with the brown, although I went through a lot of iterations on that. Then the link colors were another big work item. I think of all things link colors are the hardest. For some colors, text in the color has a totally different appearance than lines or boxes in that same color. That’s why the hover lines for the red text are a totally different color. Because if I had used the same color it would have looked very weird.

I’m just now getting the hang of the photoshop pen tool. I just finished a WordPress theme where I used it extensively. It’s a very interesting tool because to use it correctly, you don’t just have to understand the different functions, you have to know all the keyboard shortcuts. You also have to understand how to set about on a plan for your shape. You don’t just start drawing, you have to think about where the control points should be. I would imagine experts can do it pretty quickly, though.

I don’t see a ton of pen tool usage in web design.Where I do see it is in artwork (such as this image), not it web page design, where it can be used very effectively. Then pen tool can help you create that organic design that just feels better and less square.

The pen tool is hard, but if you want to be a good web designer you will not only learn to use it, you will learn to use it well. I highly recommend this tutuorial. I start it over and over when I need a refresher. You don’t have to go all the way through it.

I’m finding that my inspiration comes in waves, and that there isn’t much time in between the waves. My skills are growing at the same time, which intensifies the inspiration. This is good, I suppose, but I’m kind of exhausted.

I’ve been working on a theme for days and this theme is more complete and more intricately designed than any before it. A bunch of little odds and ends I chose not to theme much before are getting the full treatment in this theme.

When you start getting to know WordPress intimately you realize there are a lot of things to theme. There are a lot of ways to customize things and make things special. Posts, comments, previous, next, search, archives, pages, date, time, author, and on and on. Each of these things needs to be thought about to create a theme. And even if you’re working fast, when you need to spend time on all these things, it takes a while.

On top of that, you have to develop ways to think of things. For instance, do you see a post as a header, content, and footer? Or do you see it as just content with metadata? Or do you see it as first header, second header, content, footer, and end? As you get into it, you start to form a belief system.

This belief system makes its way into my template php files and they get copied down into my “root” theme to be the reference for the current “state of the art”. As soon as I’m done with one theme, it’s on to the next to give it the updates learned on the last theme and learn some more.

A client said to me the other day about having a blog or website, “It never ends, does it?” I replied, “Nope it doesn’t. You’re always changing, and always improving. Ever time you do something, you realize how you’d like to do it better.”

]]> http://designoplasty.com/2009/04/07/inspiration-waves-for-wordpress-themes/feed/ 0 http://designoplasty.com/2009/03/30/print-design/?utm_source=rss&utm_medium=rss&utm_campaign=print-design http://designoplasty.com/2009/03/30/print-design/#comments Tue, 31 Mar 2009 02:55:57 +0000 Matt http://designoplasty.com/?p=392

I was recently half shocked when a client requested I design a flyer for them. I do print design, but only for my web design clients that need something. I actually really like it, but it’s been a while, and I had to regroup my thoughts on what was important for this kind of design.

Luckily the message was simple and elegant, so while it was actually an 8½ × 11 flyer, I decided to design it as I would an invitation to some extent. Rectangular subsections can subdivide the page into invitation shaped sections so the you lose the 8½ × 11 feel. Sort of like the pieces of an invitation are laying on top of the page.

I used a refined font, Bodoni with small caps and varied the sizes according to the importance of the information like one would on a wedding invitation. For the one url, I used American Typewriter which is like a proportional version of Courier. I added a couple of appropriate ornaments and a simple elegant water mark behind the company name at the top of the page.

I very much enjoy it when there’s limited information so the design has to speak to the quality of the information. I am pretty happy with what I came up with in a limited amount of time.

Big professional or business sites, like Amazon or Digg, are designed well enough. They’re not incredibly creative, but they work because they are focused on their purpose.

Beginner sites are either blogspot or wordpress with a downloaded theme, or just plain old websites that don’t look too good.

Advanced sites are where somebody knows what they’re doing. They are often well put together, but often lack real impressive design. Often these sites while technically decent, have their design basically copied from a bunch of other similar trendy sites. It’s still “good” but not original.

Finally, there are designer sites. These are almost always a designer’s own website and they have gone out of their way to make it very nice looking. This category also includes websites for a specific product, that are very pretty, but have limited information. Often innovative, but also often not very functional, these sites are more like business cards.

Designoplasty is somewhere between the last two.

But what I want to create, and am starting to get ideas for, is sites that really are the best of all worlds. Where there is strong design but also high functionality. There’s still so much room for web design to grow.

Web designers often don’t move into the highest level of design. Everyone’s looking just to make enough money, and it shows. They aren’t that interested in doing research to bring web design up to a new level. It will be interesting to see if I can do that.

Don Norman talks about the three ways good design makes you happy. Presentations like this are always very helpful when you need perspective. Very applicable to web design.

So I just updated one of my “older” blogs to make the search results and archive pages (date, tag, and category pages) much more user friendly, and an amazing thing happened. My page views went way up. You have to remember people might come to your blog because of one thing, but hopefully once they get there they find other things they might like even better. And hopefully that process is easy enough for them that it doesn’t scare them off.

I had horrible bounce rates before, and it seems like people didn’t spent a lot of time on the site, or even on the page they came to look at. Now it seems like people are spending time on every page they view. So I highly recommend, get those search results and archive pages presentable.

In that case it can be a challenge to communicate to users that if they will simply go to the main post page, they can see beautifully large video or photos. Well, I’m still figuring that out. Most of the big news sites just don’t do anything unless the content is specifically photos or video, then they tend to actually do more than I would like. I’m not a fan of mini-video or thumbnail slideshows.

What I have solved is the technical challenge of eliminating the video for certain post formats and replacing that with a text message. Obviously, I used CSS, but I also had to set up “rules” on the content to make it work and customize the theme. Until video is as standardized as img and the :before and :after selectors are supported fully on all browsers it has to be that way.

I’d like something a bit more elegant and friendly than a text message, but it also needs to be obvious. There’s no point it including an icon if nobody knows what it means. We’ll see where this goes.