BlueHatDesign – Eugene, Oregon Web Design

The 10th anni­ver­sary of Web­Vi­sions, a nationally-recognized con­fe­rence that explo­res the future of Web design, tech­no­logy, user expe­rience and busi­ness stra­tegy was held in at the Port­land Con­fe­rence Cen­ter this past week. I have to con­gra­tu­late exe­cu­tive direc­tor Brad Smith, the great staff, and an ama­zing crew of volun­teers for put­ting on a fan­tas­tic conference.

The line up of spea­kers was top-notch as always. Topics ran­ged from Luke Williams’ “How to Spark Dis­rup­tive Inno­va­tion” (ope­ning key­note), to Shashi Bellamkonda’s “Per­so­nal Bran­ding”, to nuts and bolts stuff like “Desig­ning Our Way Through Web Forms” with Kim­berly Bles­sing and Chris­topher Schmitt.

I came away from this con­fe­rence smar­ter, more con­nec­ted and more ins­pi­red to keep lear­ning, and keep buil­ding awe­some stuff for the web!

(photo by Shashi Bellam­konda)

Mood boards are a way to get the client acti­vely invol­ved in the pro­cess early-on in a web pro­ject. This allows them to feel that they are being inc­lu­ded and kept in the loop. It even gives them a way to par­ti­ci­pate in the design process.

I am a fairly linear per­son, espe­cially con­si­de­ring that I’m a desig­ner (we tend to lean toward the crea­tive and quirky). It has been my habit to want to jump in on a new design pro­ject, open Pho­toshop and bang out the design tem­plate straight away. I have a pretty good idea up front what will work in HTML/CSS and what wont, so I usually feel con­fi­dent that I can come up with a good, usa­ble design on the first cou­ple of attempts. This approach has wor­ked well for me for the most part, up to this point.

There is that ine­vi­ta­ble moment howe­ver, when I’m finished with the draft of the tem­plate and I’m ready to post it for the client. I inva­riably think to myself, “What if they don’t like it? What if it’s not what they had in mind? Will I have to re-do this whole thing from scratch? Should I defend it? (I am the desig­ner after all.)” At this point, I’m already too far along in the pro­toty­ping pro­cess to afford star­ting over.

I rea­lize now that by kee­ping the client out of the pro­cess bet­ween the ini­tial mee­ting and the reveal of the first comp, I’m really doing both of us a dis­ser­vice. The client poten­tially can feel left out at this point and if the design is a depar­ture from their ini­tial vision, it can shake their con­fi­dence in me as a desig­ner. It also means that I am igno­ring some poten­tially great crea­tive input from the client.

I have always tried, in the early sta­ges of a pro­ject, to get as much input as I can from the client about the look and feel of a pro­ject, asking about other sites that they like or don’t like, tal­king about colors, logos, etc. But I’ve come to rea­lize that most clients don’t have a clear vision of what they want from the begin­ning. It’s all too com­mon to spend hours on a finished Pho­toshop comp only to have the client rea­lize that it’s not what they want (even though they may not know what they want in the beginning).

A mood board is a quickly thrown together collage of pho­tos, colors, typo­graphy ele­ments, scraps torn from maga­zi­nes, etc. that together, give an ove­rall feel for the visual direc­tion of a design.

Mood boards accom­plish seve­ral things all at once:

• They are a use­ful tool for the desig­ner to very quickly put down visual ideas for the design.
• They sepa­rate the ove­rall “mood” of the design from the inter­face ele­ments and con­tent. This effec­ti­vely remo­ves poten­tial dis­trac­tions for the client at this early stage.
• They allow the client to give crea­tive input very early in the pro­cess, the­reby avoi­ding back-tracking after the design comps are viewed.
• Mood boards speed up the visual pro­toty­ping pro­cess because the style has already been established.

I will defi­ni­tely be inc­lu­ding mood boards in my metho­do­logy for all future design projects.

Consi­de­ring the name of my com­pany, this is a no–bea­ner brai­ner. This Mon­day, Novem­ber 30th is the 3rd Annual Blue Bea­nie Day. Accor­ding to the Face­book page,

“Thou­sands of Stan­dar­dis­tas (peo­ple who sup­port web stan­dards) will wear a Blue Bea­nie to show their sup­port for acces­si­ble, seman­tic web content.

It’s easy to show your sup­port for web design done right. Beg, borrow, or buy a Blue Bea­nie and snap a photo of your mug wea­ring the blue. (Or get crea­tive with Pho­toshop). Then on Novem­ber 30, switch your pro­file pic­ture in Face­book, Twit­ter, Flickr, (and any other social net­work) and post your photo to the Blue Bea­nie Day group … watch for more infor­ma­tion coming soon.

Twee­tups and Beanie-ups are being plan­ned all over the globe … watch for more infor­ma­tion coming soon…

see also http://www.flickr.com/groups/bluebeanieday2009/ ”

I always wear a blue hat (bea­nie?) but this one is spe­cial.

The Busi­ness Web­site Star­ter Pack is an early release of a star­ter kit for business-oriented umbraco sites, aiming to kicks­tart deve­lop­ment and give new umbraco devs a good star­ting point for buil­ding their own sites.

As I’ve said many times, mar­ke­ting is not my forte. I’m a web designer/developer, and I simply don’t have time to become an expert in mar­ke­ting, seo (search engine opti­mi­za­tion) and social media. That said, these areas are of great inte­rest to my clients, so the sub­ject comes up daily.

Here’s a great article by Scott Strat­ten at UnMar­ke­ting which sheds some light on how you can use Twit­ter to help engage a local market.

Lee Mes­sen­ger has published a very valua­ble blog­post at Blog­Fod­der called A Com­plete Newbie’s Guide to Umbraco which ser­ves as a collec­tion of exce­llent links and infor­ma­tion spe­ci­fi­cally tar­ge­ted to Umbraco new­bies (of which I am one!) It’s great to see this type of infor­ma­tion being published around Umbraco as it will help build the user base by making it easier for new­bies to get invol­ved in this great CMS. One of the recom­men­da­tions that Lee makes is that you should join Umbraco.tv (19 eur per month) to gain access to over 5 hours of video trai­ning. I plan on chec­king out these videos as I get more invol­ved in Umbraco.development.

It’s not always easy for free­lan­cers to get good qua­lity, cons­truc­tive cri­ti­cism on a new con­cept.  We can always ask friends and family mem­bers, but we’re not likely to get a cri­ti­que that is based on solid design prac­ti­ces and con­cepts. Asking in online com­mu­ni­ties can often lead to caus­tic, unhelp­ful com­ments.  Con­cept Feed­back is an online app that attempts to bridge that gap. Here’s what they say about their concept:

Desig­ned spe­ci­fi­cally for small and medium busi­ness mar­ke­ters, graphic desig­ners, and web deve­lo­pers, Con­cept Feed­back pro­vi­des a sim­ple tool to get qua­lity feed­back on mar­ke­ting con­cepts. Best of all, it’s 100% FREE!

There is a full review at Fuel Your Creativity.

I’ve just had my second look at Umbraco, an ASP.Net con­tent mana­ge­ment sys­tem (CMS). When I first stum­bled on Umbraco about a year ago, I misun­ders­tood the license agree­ment to mean that in order to use the open source ver­sion of the soft­ware, you were requi­red to put “Powe­red by Umbraco” on the home page of the site.  After a clo­ser look, reveals that this is not true. The only Umbraco bran­ding that you’re stuck with is in the con­trol panel. This works just fine for my pur­pose which is to give my clients a fra­me­work within which they can edit their own content.

The main fea­ture of Umbraco that has me exci­ted is the text edi­tor. It uses TinyMCE as do many CMS pac­ka­ges. The dif­fe­rence I’ve found from some of the others (such as Insi­teC­rea­tion) is that Umbraco gives you full con­trol over the edi­tor in terms of what but­tons are dis­pla­yed to the per­son doing the edi­ting. This way, you can com­ple­tely hide the Font and Font Size but­tons which will effec­ti­vely eli­mi­nate the pro­blem of peo­ple inser­ting Font Size inline sty­les or worse, font attri­bu­tes directly into the mar­kup.  As an exam­ple, the edi­tor within Insi­teC­rea­tion will actually insert “<span style=“font-style:italic”>” ins­tead of sim­ple <em> tags.

The other fac­tor which I LOVE is that the desig­ner has full con­trol over the mar­kup that the edi­tor out­puts. This makes it easy to main­tain the stan­dards com­pliance of the mar­kup of the site without the need to coach your client in the nuan­ces of edi­ting stan­dards based html using the editor.

I’ll post more on Umbraco as I get more deeply invol­ved, but my ini­tial res­ponse is extre­mely posi­tive. If you call and talk to me about con­tent mana­ge­ment in the near future, we’ll likely be dis­cus­sing Umbraco.

We’ve all been there. You’re star­ting a brand new pro­ject. You’ve out­li­ned the requi­re­ments and lis­ted the fea­tu­res in various ways. You’re sit­ting and sta­ring at a blank docu­ment in Pho­toshop, or a blank page in your sketch­book, and your mind is also com­ple­tely blank.

Crea­tive bur­nout hap­pens to all of us. As a crea­ture of habit, I tend to get into a rou­tine and stick to it. After seve­ral weeks of sit­ting in the same chair in the same office day after day, I can feel the crea­ti­vity slowly ebb.

The ans­wer is to get out of the office (or whe­re­ver it is you usually work). It doesn’t mat­ter if it’s for a few hours or a few days, but a regu­lar change of envi­ron­ment is essen­tial to kee­ping your crea­tive edge.

Regu­larly get­ting away from your fami­liar rou­tine can pay big divi­dends by refreshing your pers­pec­tive. If you sit in the same chair every day, your eyes tend to rest on com­for­ta­ble, fami­liar objects. As soon as you move out to the back gar­den, or the cof­fee shop, your eyes will have a whole new palette of sti­mu­lus. It’s not only visual; that rose bush in the gar­den, or the low hum of con­ver­sa­tion and music in the cof­fee shop can give your nose and ears a fresh pers­pec­tive as well.

In the case of public spa­ces, you have the added advan­tage of pos­sibly mee­ting and tal­king with new peo­ple. Some­ti­mes, just being near enough to overhear some con­ver­sa­tion can give you new pers­pec­tive on a design problem.

I came into design from a pho­to­graphy back­ground, so one of my favo­rite things to do to spark crea­ti­vity is to take my camera out and seek out pat­terns, tex­tu­res, colors, inter­face ele­ments, or wha­te­ver stri­kes my fancy. Doing this in the real world ins­tead of on the web gives the whole pro­cess a much more orga­nic feel.

I like to plan seve­ral trips with my wife during the year where we go find a small town, stay in a bed and break­fast or hotel (an Inter­net con­nec­tion redu­ces stress for me on these trips). Then, we just spend two or three days either hiking local trails, or wal­king the streets and brow­sing shops in the town. During these trips, I always try to see things as much as pos­si­ble through  the lens of my camera. It narrows my focus and helps me iso­late inte­res­ting design ele­ments. Inva­riably, I return from a wee­kend trip with a fresh pers­pec­tive and a rechar­ged crea­tive battery.

Carsonified’s blog, ThinkVitamin.com recently published a great 2-part series called 5 Advan­ced Pho­toshop Tech­ni­ques for Web Desig­ners by Marko Prl­jić. This post covers some sim­ple but inva­lua­ble tech­ni­ques for crea­ting but­tons, navi­ga­tion menus, inset text and a cou­ple of very nice effects. Defi­ni­tely worth the read for anyone who wants to expand their Pho­toshop skills. Marko just follo­wed it up with Part 2.