The da Vinci Days Web Design Process

Let’s pry open the creative brain of ProWorks for just a minute and see what really went into the new da Vinci Days site. The pages you’ll see there certainly weren’t imagined exactly like that from the start; they went through a creative process that covered a few stages of design. Generally the design process we go through for most websites looks like this:

• Set requirements
• Create 2 or more wireframe designs
  • Review
  • Create final wireframe
  • Review
• Create 2 or more complete designs
  • Review
  • Create final design
  • Review
• Build final design into HTML/CSS format
• Integrate design HTML into a content management system (Umbraco, Sitefinity, Wordpress, etc.)

The challenge in designing the da Vinci Days site was to create a framework that looks great year after year, and allows for changing poster artwork in the background.

Wireframe designs are just rough layouts of the elements on a page. We are playing with the puzzle pieces until we get the perfect fit, without even looking at colors or design yet. Here are a few of the wireframes that we started with for the home page:

Back to the top

We went with this last one. It handled all the priorities in the best way. Then I made wireframes for the rest of the pages. Here’s one for an event page:

The next step is to breathe life into the chosen wireframe and explore a few full-color design directions. Usually I’ll design a few for the the home page first, and then design the rest of the pages after the direction is chosen. This first direction never really got that far. I totally missed the mark at the beginning

I quickly changed gears and designed something with the da Vinci Days comminity in mind. I went with a natural hand-crafted look that better reflects the feel of this event and Santiago’s wonderful poster art.

We felt that design hit the mark right on the nose. There were only a few changes to get the final result from there.

The next challenge for me as a designer is building the framework of the actual website so that it looks exactly like my design. The design also needs to hold up to real data getting plugged into it, so I make sure everything’s flexible. In the end we come up with an entire visual system for da Vinci Days that encompasses any type of page Brenda wants to make!

Back to the top

A good web professional should be asking you questions like these as part of their service. But frankly, I would advise you to consider these questions ahead of time for the following reasons:

• Become a more knowledgeable consumer (saving yourself money)
• Make your provider’s job easier (saving yourself money)
• Reduce the risk of your website project failing (saving yourself money)

Is saving yourself money important to you? Well here you go then.

1. What is your web site going to do for you?
Tip: Try to identify specific sales, marketing and customer service challenges or goals.

2. What is your web site going to do for your users?
Tip: Think like a customer, a very impatient and critical customer with many alternatives.

3. What is the value of successfully accomplishing the goals from #1 and #2?
Reality Check: Your web site project should makes fiscal sense.

4. What is required (internally and externally) of your web site to deliver on those goals?
Warning: A common pitfall is to start listing features before defining goals, leading to a bloated feature list.

5. List the top 3 things you want users to do. List the top 3 things users want to do. How do these lists compare?
Reality Check: Its a red flag if these two lists don’t look very similar.

6. How will you identify and measure success on first day your site is live?
Example: Data entry is automated and the manual entry process is eliminated saving 10 hours each month.

7. How will you identify and measure success 1 year after your site is live?
Example: We currently receive an average of 17 new product ideas each month from customers via the web.

8. Why will your customers and users tell their friends about your web site?
Reality Check: Faerie dust and hope are not reliable.

9. Why will your customers and users repeatedly return to your web site?
Tip: Regularly deliver something new and valuable to your customers and users.

10. Does your investment support #4 (requirements) and make sense with #3 (value).
Reality Check: Make sure your aren’t strangling your web site before it even has a chance.

Are these questions helpful to you? Do they make sense? For my fellow web professionals, do you have any suggestions or additions that are valuable to you and your clients?

I created the tutorial in Adobe Illustrator CS3 and it’s over at my design blog alandesigns.com/blog if you’d like to give it a shot. This is my second ever tutorial and it’s becoming a fun hobby for me. Here’s the end result: (screen background and logo design aren’t covered. Maybe in a future tutorial…)

It covers a variety of tools including the Gradient Palette, the Pathfinder Palette, the Align Palette, the Direct Selection Tool, and the Transparency Palette. We really get to know the Gradient Palette in this one.

Let us know how yours turns out!

We have two skins based on the same style:

ProWorks Lozenge White

This is sort of a simple, base skin that would be great to add photos or color to.

It is based on the K2 Lite for Sandbox theme so it should work for WordPress too.

Download: ProWorks_Lozenge_White.zip

ProWorks Lozenge Flowers

This is a variation of the White theme with some added flair.  This may not work in Wordpress because it relies on the ASP.NET form tag to add an extra wrapper for the flowers.  We will work on it and get it working with Wordpress at some point.  It is also based on the K2 Lite for Sandbox theme.

Download: ProWorks_Lozenge_Flowers.zip

Thanks Umbraco Team!

Thanks to Niels Hartvig, Per Ploug Hansen, and Tim Geyssens for such a great Christmas Present!  The blog package is key and was improved immensely over the last month.  Thanks to all the Umbraco developers and community members for making the Umbraco community so great!

Here are our skins in action as part of the new Umbraco Skin Browser.  Cool!

The following wallpapers are included:

From umbTop = Umbraco Desktops, by VooDooDog

From The CogWorks – Umbraco Goodies

From The CogWorks – Umbraco Goodies

From Wallpapers – our.umbraco.org

Download the Umbraco Windows 7 Themepack Here

1. GoMediaZine

Go Media is a team of artists and designers out of Cleveland that provide tutorials, resources, and advice. They are very active in the design field working for clients and have tons of great resources to share. The freebies section here has mostly vector artwork, with plenty of other interesting tid-bits sprinkled in there like scatter brushes and Photoshop actions.

2. Psdtuts+

Psdtuts is a Photoshop tutorial site that is part of the Tuts+ Network. The network also consists of design tutorial and resource sites for Illustrator, Flash, After Effects and much more. Psdtuts is my favorite place to find tutorials, and they have a really high quality collection of freebies to offer. They have a great selection of icons and Photoshop brushes there.

3. Spoon Graphics

Chris Spooner is the man behind the design blog spoongraphics. He is an amazing web designer who is active in offering great resources and insights to fellow web designers. His freebie section consists of unique icons, brushes and textures that have a characteristic hand-drawn feel.

4. BittBox

Bittbox is the creation of Web Enthusiast Jay Hilgert, and he is dedicated to pumpin’ out quality free resources for designers. He has a huge library of web design elements to choose from (34 pages deep!). This is a great place to find buttons and interface elements.

5. Iconfactory

Iconfactory is the place to go for quality icons. They offer great icon packages to buy, but also have a wonderful collection of freebies. Their freebies have the same great quality and come in a wide range of sizes and formats for pc and mac.

6. Smashing Magazine

I’m putting Smashing Magazine down at #6 because if it were #1, as it should be, you’d probably not need to read the rest of this post. Smashing Mag sets the bar for the design industry in articles, resources, tutorials, and inspiration. Certainly their freebie section is awesome and should be in every web designer’s faves.

7. Blue Vertigo

Blue Vertigo is a massive collection of links covering every corner and category of the design world. I come here to look for more free stock photo sites, but there’s so much more I’ll never have time to see. The navigation is *unique (meaning nice try but XXX in my opinion) and there’s a variety of ways to find what you’re after.

1. Brusheezy

Brusheezy is the #1 Google result for “Photoshop brushes” and is for a good reason. It’s a collection of *only* high-quality user-submitted brushes and patterns for free. The site is well organized and displays the brushes in large thumbnail images to get a great sense of what you’re getting beforehand.

2. Browsing deviantART Photoshop Brushes

deviantART is an incredibly diverse platform for artists to display their talents. There is an exhaustive collection of user submitted resources there, and the brushes category is massive. Some of the best brushes I’ve seen reside here, but you might have to flip through some pages to find them (no offense to the novice users!).

3. BrushKing

BrushKing is one of those cool blog-style resource sites that looks great and is easy to navigate. They have a tutorial counterpart as well, for tips on how to use those fancy new brushes you’ve downloaded.

4. MadMediaMonkey

These guys have a brush library that has room to grow, but the brushes they have now are great quality. There are some interesting categories here that you might not find elsewhere like “occupations” and “astronomy”. The user submitted brushes can also be navigated by tags, which makes browsing a snap.

5. Obsidian Dawn

Obsidian Dawn is a Wordpress powered brushes resource run by the talented artist Stephanie. There are plenty of unique brushes here for free.

6. Seishido

Seishido has a range of very interesting free brushes, but is primarily a brushes marketplace. There are brush sets for sale @ about $1 for about 28 brushes, and full packs of brush sets as well (18 or so brush sets) for about $18. So head here if you’d like to really fill out your library with quality brushes in one fell swoop.

Enjoy! Make sure to check the license details for any commercial use

Tonight I’m presenting “jQuery and ASP.NET” at the Corvallis .NET Users Group June Meeting.

I’ve been having lots of fun developing with jQuery with or without .Net.  My first slide:

What is jQuery?

• Lightweight JavaScript library
• Fast (http://cli.gs/urQzG7)
• Cross-browser
• Cross-platform
• Enables separation of behavior markup
• Easy AJAX
• Animation and interation API (events/DOM manipulation)
• UI/plugin framework
• Fun!

I have posted my jQuery and ASP.NET live demo and slides on our server and the Visual Studio project download.

1. Colourlovers

Colourlovers

Colourlovers.com is by far and above my favo(u)rite color tool on the web. It’s actually waaay more than that; It’s a complete color-based social network. You can create palettes using the COPASCO color generator, save it, share it, vote, comment, make patterns, make a profile, add friends…everything. You can easily download the color files to import into Photoshop, Illustrator, and a number of other formats. The COPASCO color generator is the best I’ve used on the web and makes my #1 spot by a long shot.

2. Kuler

Kuler

Kuler is produced by Adobe and is definitely no slouch. They have an intricate and intuitive system of color sliders that let’s you make great color schemes in an instant. Choose triad, complementary, analogous and more color schemes on the fly. You can also flip through user-made themes through Kuler’s very slick user interface.

3. ColorJack

ColorJack

You start out in ColorJack looking at a huge grid of palettes to browse, where you can quickly download and use them. However, the brilliance here is in the three color tools: Color Sphere, Color Galaxy, and Color Studio.

Color Sphere is probably the best color wheel-type chooser I’ve seen. There are tons of options for color schemes and you get to see 6 colors together (most have 4-5).

Color Galaxy is a very unique interface for choosing single colors in a constellation type format.

Color Studio is a straight-forward nuts-and-bolts tool that lets you work with single colors and come up with a palette of any number of colors together.

4. Color Scheme Designer

Colorschemedesigner.com has an intuitive color wheel that lets you choose between the different color schemes also. What’s really cool though, is that you can click “Page Example” and see a whole mock web page based on the color scheme you selected. How cool is that! This tool is awesome for web designers to work out every color of their website, all the way down to the link colors!

5. ColorZilla

ColorZilla is an add-on to Firefox that lets you examine and save the colors on any web page. It’s not a tool like the others on this list, but is extremely valuable nonetheless for picking apart what others have done or matching specific colors you’ve seen on the web.

These two boxes are pretty much identical. However, the bottom one uses layer styles to more efficiently achieve the same result. This little technique (which is a given for the veteran Photoshop user) has saved me tons of time and headaches.

The top box has hand-crafted effects on separate layers. The drop shadow, the outline, the highlight, are all on different layers than the box. Also, the color of the box is “hard coded”, meaning I applied the gradient directly to the layer. I used to work like this, thinking that layer styles were just for making an occasional cool effect here or there. But what if the boss says, “Eww! get rid of that orange I want it blue! And make it smaller!”?

Well you double click the layer and bring up layer styles is what you do. Here you can play around all you like and if you need to change it later, you can. Once you get it lookin’ good, then save the style so you can use it anytime.

Top 5 Reasons To Use Layer Styles:

• 1. You can resize elements and keep all styles intact
• 2. Dramatically reduce the number of layers in your document
• 3. Change colors on the fly
• 4. Experiment a number of different looks / feels very quickly
• 5. Take advantage of a wide library of preset styles on the web by other Photoshop users