There’s always a danger of setting resolutions, or goals, that are slightly unrealistic and far fetched. Today I’ll be taking a look at various goals and projects you may want to consider as a web designer – ranging from starting up a personal side project, to spending a little more time out of the office!

On Being Realistic

The biggest reason why goals for the New Year fall flat on their face is simple – you have too many, and they’re too ambitious. The most important thing is to choose changes that you’re excited to get behind, and are achievable within the year. If you like to dream big, break down those thoughts into something more manageable.

A thoroughly useful resource for planning your goals and resolutions is 6 Changes, which offers lots of excellent advice and pointers.

1. Start a Side Project

As designers and developers, the biggest source of income available is usually from just that – designing and developing for clients (or the company you work for). This is fine, but there are a number of reasons for starting up a personal “pet” project:

• The chance to work on something you’re passionate about
• The opportunity to broaden your sources of income
• The chance to create something that makes your life easier

When most of the hours in the day are spent meeting the demands and desires of other people, it’s easy to get disheartened. Spending a few hours in the evening working on something purely for yourself is very liberating!

Why not start by looking for a problem or annoyance you face every day, and start working on a solution. Are you dissatisfied with your current method of invoicing clients? Do you wish you could track website visitors more clearly? Is passing a design back and forth to a client more stressful than it should be?

Let your imagination run wild, and make 2010 a year for spending more time working for yourself, rather than other people.

2. Read One Book a Month

It’s easy to flick through a handful of blogs each day for inspiration, but this really isn’t the best way to find challenging and engaging material to really broaden your horizons as a designer. I set myself a challenge of reading one book each month in 2009, and found it to be incredibly enlightening.

Just spending time away from a computer screen, absorbing information through a different medium, is a welcome change. If you still crave the urge to digitize the process in some way, I’d recommend tracking your literature intake through Readernaut – a wonderful web application for staying on top of what you’re reading, and the books you’ve read in the past.

If you’re unsure where to start, here are a few of the books I read (and thoroughly enjoyed) last year:

• How To Be a Graphic Designer Without Losing Your Soul
• The Creative Habit
• A Whole New Mind
• Crush It

3. Change Your Scenery

One of the challenges I’m setting myself for 2010 is to spend one day per week away from my home office. Taking a change of scenery, and working from a different location, always seems to inspire me out of a boring routine.

Also, don’t feel constrained to locations that have an internet connection. You’d be surprised how much more productive you’ll be when cut off completely from the online world for a few hours. It won’t fall apart without you!

4. Design One Project for a Different Medium

Are you a web designer by trade? Consider working on at least one print project in 2010. You’ll be amazed at how much you learn when spending time in a different field, and how many new techniques are completely relevant to the area in which you usually work.

If you’re a developer, you could get the right side of your brain working by embarking on a creative project. It might just bring a different element of thought to your approach to coding, and give you a better understanding of the challenges faced by designers.

You don’t need to feel limited to only “design” fields either – anything creative can be valuable. Put a short film together, experiment with photography, or even work on the interior design of a room in your house!

Job rotation and swapping between roles is a common concept in many firms, and you shouldn’t ignore it as a freelancer. It can prevent you becoming stuck in a rut and, from a client’s perspective, make you a far more valuable person to work with.

5. Take Time to “Think Strategic”

I’m not a fan of the word “strategy”, but there’s certainly a solid argument for taking time out to assess the big picture of your work and career. It easy to spend each week working, enjoying the weekend, and quickly falling into a familiar cycle as the year goes by. This is certainly easy, but won’t leave you well prepared in the long run.

I have been experimenting with spending one afternoon each week away from the computer with a notebook and pen. You can think about new projects, take stock of your finances, or consider the aspects that you really enjoy or hate about your job. It puts your day-to-day activities in context, and ensures that you aren’t just working for the sake of it.

Good Luck!

I can’t wait to get started with 2010. I have absolutely no idea what it has in store, but I’m happy with the list of goals, changes and challenges I’ve set myself for the New Year.

It’s going to be a thrilling ride, and I hope that you get a chance during the next week to have a little downtime and take stock of what you’re hoping next year will bring.

See you in 2010!

Photos thanks to David Robert Wright and cobalt123.

I hope that you have a wonderful rest over Christmas, take the time to recharge your batteries, and start the New Year full of fresh, creative inspiration.

Thanks for reading Design Shack, and Happy Christmas from myself and Josh!

The “Contact Us” form too often gets thrown in as a quick afterthought rather than an element that sets the tone for the communication. Today we’ll take a look at several easy techniques you can use to take your contact forms from boring to brilliant.

Along the way we’ll see several examples of great contact forms along with resources on how to recreate the effect on your own site.

1: Design It

You’d think this goes without saying, but I looked at tons of “contact us” pages and forms to prepare for this post and 90% or more of them used the default browser UI forms (white, square corners, boring). This isn’t necessarily a bad thing, but if you’re looking for a way to spice up your contact page the form fields themselves are a great place to start. Try changing the color of the fields to match your site better, rounding off the corners, or adding strokes like the examples above. A little bit of styling goes a long way towards giving your forms a custom-built look.

Helpful Resource:
If you need help, check out this post of 40 CSS Web Form Style Tutorials For Web Developers.

2: Give It Focus

Visit the site above and start filling out the contact form. As you do so, the site dims so that the contact form is the sole focus of your attention. This is a beautiful way to ensure users don’t start to contact you only to get distracted by other content. It’s also a great way to make your visitors say “ooooh.”

Helpful Resource:
Stop by Build Internet to learn how to dim content with jQuery.

3: Make It Goofy

If you really want to encourage users to contact you, make the environment around the contact form friendly and inviting. This makes your company seem more approachable and will subconsciously make your visitors expect a friendly response (be sure to deliver one!). The examples above use bright colors and silly illustrations to accomplish this task but feel free to get creative with typography, icons or anything else you can think of to reduce the tension someone might feel from approaching you with a question or comment.

Helpful Resource:
Here’s a few super cheap, goofy characters from Graphic River to get you started.

4: Give It a Map

If your site is for a “brick and mortar” store or any kind of physical location, integrating a map into your contact page is an absolute must so that potential customers can actually find you. This can be as simple as a stylized illustrated map or as fully featured as an interactive Google Map. The examples above take the interactive approach (in my opinion, the better way to go), the second of which even integrates custom driving directions, displayed prominently at the top of the map.

Helpful Resource:
If you need help, check out this Free Google Map Generator for Your Homepage.

5: Make It Smart

To see what I mean by “smart,” visit the two examples above. The first checks the content users type into the field to make sure it’s correct (ie. form validation). For instance, if you type “joe” into the email address field, the form tells you to enter a valid email address. The second example simply implements form highlighting creatively. By making the user’s current field stand out in some big way, you help them keep their focus and position in the form. It’s a small usability touch that can really help out anyone that might have trouble seeing which field they are in.

Helpful Resources:
No idea how to make you forms smart? Here are a few form validation resources for you to choose from:

• Really Easy Form Validation
• Tutorial: Form Validation with JavaScript
• Free Form Validation Script (Apple Developer Connection)

6: Walk Them Through It

If there is specific information you require from the user, such as budget requirements or area of interest, don’t count on the user including it, even if you make it explicit that the information must be there. Instead, use checkboxes, radio buttons and dropdowns as a way to ensure they don’t leave it out. These tools not only help users remember everything to include, but generally make the contact process a lot easier by eliminating a lot of the writing work.

Helpful Resources:
Check out this complete list of UI elements broken down by browser and operating system.

7: Animate It

Both of the sites above use an animated drop down menu for their contact form. Placing this menu right on the homepage makes it really easy for visitors to get ahold of you without scrounging for contact information. The dropdown aspect lets it accomplish this task without adding clutter to your homepage. Notice that the Blue Acorn menu actually pushes the site content down while Fred Maya’s slides over existing content. Both ways work just fine, but I prefer the Blue Acorn method as it doesn’t obstruct anything and is easier to read without the transparency.

Helpful Resources:
To achieve a similar effect on your site, check out Noupe’s tutorial on creating Sexy Drop Down Menu w/ jQuery & CSS.

8: Theme It

My standard answer for all things creative: just come up with a clever theme! Making an interface reflect something that people are already familiar with can not only provide great design ideas, but can increase your usability as well (it can also decrease your usability if you aren’t careful). The example above uses an iPod touch as the interface for the contact form. Try to think of something unique for yours! Possibilities include anything from a post-it note to a business card.

9: Make It Conversational

The example above was one of the most unique ideas that I came across. Sort of like contact form Mad Libs, the user is given a few sentences and asked to fill in the blanks. This insures you get the information that you want but is presented to the user is a much friendlier format than plain old fields with labels. Sure it’s arguably less usable because it involves more reading on the part of the user, but it gets a gold star in fun!

10: Make It Oversized

One simple way to get a user’s attention with anything you design is to make it a lot bigger than they would expect. After using a bunch of normal-sized contact forms, the one on the site above seemed downright huge. The surprise was a pleasant one though as I loved the oversized feel of the forms and text. I’m not exactly sure why, but for some reason big feels friendly!

Conclusion

You should now be bursting with fresh ideas for how to make your own contact form a point of pride. Go forth and create amazing contact pages and tell us about them in the comments below. Also be sure to let us know which of the above examples was your favorite along with your own great ideas for how to improve them.

We’ll also take a look at the tools and workspace Alen uses to get the job done, along with a few pointers for places to find inspiration online.

Can you please tell us a bit more about yourself and how you got started in the design field?

I am web designer and web developer from Rijeka, Croatia a town situated on the beautiful North Adriatic coast. I first started out as a DTP specialist in a local print shop and then I slowly moved on to the web. At first I was employed as a web designer in a local web company. At some point I decided that it’s best for me to go solo because of greater job opportunities outside my local environment. At the moment I am freelancing so if your readers need a hand with their websites they can reach me at http://grakalic.com. :)

Besides work I am a father, husband and an amateur triathlete. I enjoy long distance endurance sports. I finished 3 Ironman races in past year or so. Ironman triathlon slowly became my life style!

What do you think has contributed most to the success of CSS Globe?

Community. Without the people posting updates and people reading the news the site wouldn’t exist. Sure, I publish an article here and there but without that regular flow of fresh links CSS Globe wouldn’t be what it is now.

What do you enjoy most about running an online community?

I enjoy reading the posts people submit. I find submissions to be very informative and interesting. Reading submitted articles is part of my morning ritual.

You recently launched a framework?

Yes, I launched Easy front-end framework (http://easyframework.com). The goal of this framework is to reduce the time needed for coding the basic template but it also provides a solid base for site development. It started as a personal project but then grew into something more.

Where do you go to find inspiration?

I stumble upon various things that inspire me, mostly by accident. Usually it’s the details that I find more inspiring than overall designs.
With years of working on many design projects you slowly build a repository of design patterns that become your personal style. When you are feeling uninspired you just reach out for some of the patterns and use them.

What does your workspace look like?

Up to this year I used various desktop machines, my latest was a white iMac. In April this year I bought a MacBook Pro. My intention was to get a LED display to go with it few weeks later. Then I took a trip to USA and Canada where I had no choice but to work on my laptop all the time and more so I had to work on many different places including various offices, coffee shops and even outdoors. I liked that so much, it gave me a sense of freelance freedom that I decided not to buy a display.

So now I have a portable web design studio and I try to get out of my home office as much as I can to do work. I find that so inspiring especially when I work on designs.

What software do you use on a day-to-day basis?

I use standard Dreamweaver/Photoshop combination. That’s about it as far as my work goes. I also use a couple of Firefox plugin for debugging and testing purposes, like Firebug and Web Developer Toolbar. I can’t imagine my dev process without them now.

What major changes do you see happening over the next five years in the web design field?

I really can’t say much about that. I don’t have a vision and sometimes when I think about near and far future of our business I get a little bit anxious. I guess the mobile devices will take most part of the market and designers will have to learn to adapt to it. Each site will have to be multi-device compatible.

Thanks to Alen for taking the time to share his insight and experience with us today. If you have any ideas for other designers you’d like to see interviewed, please feel free to share in the comments!

View Post

View Post

View Post

So read my thoughts about each of the sites below and get ready to awaken your inner art critic. See you in the comments!

Behind The Websites

Why I like it: Original Site Concept

Behind the Websites is a completely unique website gallery. Each post features a zany illustration meant to convey “what people think about some websites.” The site owner, Ricardo Gimenes is an incredibly gifted artist with a great sense of humor.

Bitter Coffee

Why I like it: Creative Use of Color

Bitter Coffee is another site with impressive custom illustrations. Notice how the designer has used color very selectively to draw your attention to specific points of interest. This is most noticeable in the rollover effects of the images down the right side of the page which feature grayscale images that come to life with color when you hover over them. Very well done!

Rival Schools

Why I like it: Animated Homepage

This site keeps the user interested with constant motion. As soon as you load up the page, objects start falling into place. A nice, automated slideshow of featured work follows the initial animation. Notice how the featured work actually blends into the site background rather than violating it.

Daniel Nobre

Why I like it: Simple Homepage

Not necessarily the most unique photographer site, but still very well done. The homepage isn’t cluttered with unnecessary information or effects, just a large alternating photo. The photographer is confident in his work and lets it speak for itself. Your photography will look more impressive when it’s as large as you can get it and displayed on a solid background, making it the sole focal point of the page.

Eric Dies

Why I like it: Oversized Artwork

This site features huge green boxes of content that really stand out on the page. There’s a ton of subtle detail at work as well that really polishes off the site. Every link on the page has a nice rollover effect, there’s a cloud animation playing behind the main logo, and the selected state of the navigation bar is a light that casts a shadow on the link text below it. Overall, a great piece of design!

Dezine Zync

Why I like it: Scrolling Content, Static Background

This site features a beautiful bokeh background that really grabs your attention. Having the content scroll over a stationary background isn’t groundbreaking but it offers a bit of an unexpected surprise to the user experience that adds to the unique feeling of the site. Always think about what you can do to offer your visitors a unique experience.

Dreams

Why I like it: The Little Stuff

Aside from the overall aesthetic, there were a couple of subtle details I really liked about this site. This first is that the main image violates the header area. Nine out of ten designers would’ve made the photo fit the colored space. The simple trick of having the photo extend into the white makes this site so much less two dimensional. Another feature that got my attention was the navigation rollovers. Run your mouse along the navigation and you’ll get a shape-shifting bouncy blob that zips back and forth creating a really nice, unexpected effect.

HD Bundle

Why I like it: Creative Use of a Stock Theme

A quick look at the code of this site revealed that it’s based on the amazingly popular Twicet Theme. Take a look at the original theme vs. the actual site. The website author didn’t just slap his own text and images into the prefab template, he used the template as a starting point for his own unique site. This creativity overcomes the principal downside of buying a website template: unoriginality. Finding a template that you can use as a strong base but still add plenty of customization to can save you loads on time on the development end of creating a WordPress powered site.

KataPulse

Why I like it: Graphics Reinforce the Business

Aside from simply being attractive, this site’s graphics say everything they need to say. The dark, cool tones are tinged with highlights in such a way that you can almost hear lounge music just by looking at it. The highlights also serve as reinforcement for the “pulse” in the site’s name. The lesson hear is to fully consider the purpose and idea behind a site before you create the graphics for it. Sketch out a couple of ideas for visually representing the concept you want to convey and ask some people which idea they think conveys the concept best.

Kinetic Technology Group

Why I like it: More Animation

Another example of impressive custom illustration. Load up this Mac-tastic site and you’ll see a ton of motion and custom illustrations that all help communicate the friendly nature of the business. Another creative feature of the site is the “iPhone Tips” that pop up near the bottom of the page. The site owners are selling IT services but use these tips as a way to offer visitors something for free just for stopping by. Successfully integrating something that could be considered to have value into your content is a great way to get your visitors to spend a little bit more time on your site, which could theoretically land you a purchase.

Komodo Media

Why I like it: Jungle Theme

If you’ve read my past articles you’ll know I’m a sucker for a good theme. Komodo Media uses jungle illustrations to tie their content together in an attractive way. Though not always the most professional way to go, a creative theme can add a lot of visual interest to a page. It gives viewers something visually familiar that they can relate to and makes them a lot more prone to think your site is unique.

KP Studios

Why I like it: Unique Organization

The homepage of this site has a ton of disconnected content, but it’s formatted in a visually attractive way (a real challenge!). The staggered boxes format clearly defines each piece of content, leaves plenty of room for both pictures and text, and just looks neat. Also, check out the 3D animated tag cloud on the left that serves as a very cool way to isolate specific types of content.

Masato Pearls

Why I like it: Great Photography & Product Focus

At first glance, this site looks like a photography portfolio and shoot, it practically is. The beautiful photos are seamlessly integrated with the user interface in a way that makes an arguably boring product look absolutely beautiful. The lesson here is that if you’re selling a physical product, don’t let your brother Joe take pictures of it with his flash and trash camera to upload onto the site. Spend the money to hire a real photographer to make your product look as good as it possibly can then display those photos in a bold manner that conveys your confidence in the product.

Logo Realty

Why I like it: Custom Illustrations

This site features some amazing illustrations and while I can’t say for certain that they are custom and not stock, it sure appears that way to the average visitor. Unique artwork acts as a thumbprint that makes a site wholly your own. If you’re a web designer and a good artist, remember that custom illustrations can go a long way towards impressing a client. Always look for ways to show off your full range of creative talent as a way to increase your marketability.

Your Turn!

That’s my two cents on a few creative WordPress sites. Think that was easy? Here’s a bunch more WP sites that I found to be particularly creative for you to provide feedback on. Let us know your thoughts on each. Share what you love, hate or find incredibly unique about any or all of the following.

Paper Jet Wednesday

Justin Cline

Dapur Pixel

Seventy7

Forte

Odd Web Things

Haris Vision

Wow Toys

View Post

View Post

View Post

View Post

View Post

View Post

View Post