Web Design:

10 Aug 2009

3

Conducting Collaborative Design Sessions – Part 3: Facilitate

Clients and users need guidance when contributing their design ideas. Part 3 of this series will prepare you for the challenges inherent in facilitating collaborative meetings.

07 Aug 2009

6

Grunge Web Design Tutorials to Learn New Techniques

Grunge is one of the most difficult looks to achieve, as it is a very unpredictable design style. That’s why tutorials for grunge web design are needed — designers can study techniques and best practices when creating this type of web design style to achieve the best look possible.

Here are ten web design tutorials — some for just design, others with coding included — so you as a designer can improve by learning new techniques and best practices.

03 Aug 2009

9

Conducting Collaborative Design Sessions – Part 2: Inform

Getting the most out of your users requires that you take the initiative. In Part 2 of this series, you’ll learn how to begin your design session in a goal-oriented manner.

30 Jul 2009

12

5 Ways to Become a Better Designer, Right Now

1. Create 5 PSD’s, and Ask for a Review

Create some completed mockups in Photoshop, and go onto forums to ask for a review. Many nice forum goers (and unfortunately sometimes snobby as well) will be glad to give you some feedback. Take both the positive and negative feedback, and reflect upon it to create better compositions in the future. Some reviews may even be specific enough to let a designer know what elements of design he/she is lacking in, so the faults may be studied in further detail.

In the title of this first technique, it says to create five PSD templates. Try to create five different PSD’S from five different design styles. For example, one of each of the following could be done:

Modern/Sleek

Modern/Sleek

Grunge

Grunge

Hand-Drawn

Hand Drawn

Light on Dark Text

Light on Dark Text

Typography Only

Typography

One could also try out new techniques and get feedback on those.

By doing different types of styles, a designer can gain more experience, and see where he or she excels. The designer may also notice a weak point that they would gladly like to build upon. Perhaps through review you find a style that you’re better at — build your portfolio around that style. In addition, focus on improving with other styles to accommodate different clients’ needs.

2. Study Design Principles

Many new designers don’t understand the importance of basic design principles. Graphic designers and other forms of designers that actually attend higher education for this learn design principles first. Below is the copy from Digital Web Magazine of the overview of basic design principles.

Balance

Balance is an equilibrium that results from looking at images and judging them against our ideas of physical structure (such as mass, gravity or the sides of a page). It is the arrangement of the objects in a given design as it relates to their visual weight within a composition. Balance usually comes in two forms: symmetrical and asymmetrical.

Symmetrical

Symmetrical balance occurs when the weight of a composition is evenly distributed around a central vertical or horizontal axis. Under normal circumstances it assumes identical forms on both sides of the axis. When symmetry occurs with similar, but not identical, forms it is called approximate symmetry. In addition, it is possible to build a composition equally around a central point resulting in radial symmetry1. Symmetrical balance is also known as formal balance.

Asymmetrical

Asymmetrical balance occurs when the weight of a composition is not evenly distributed around a central axis. It involves the arranging of objects of differing size in a composition such that they balance one another with their respective visual weights. Often there is one dominant form that is offset by many smaller forms. In general, asymmetrical compositions tend to have a greater sense of visual tension. Asymmetrical balance is also known as informal balance.

Horizontal symmetry
Horizontal
symmetry
Approximate symmetry
Approximate
horizontal symmetry
Radial symmetry
Radial
symmetry
Asymmetry
Asymmetry

Rhythm

Rhythm is the repetition or alternation of elements, often with defined intervals between them. Rhythm can create a sense of movement, and can establish pattern and texture. There are many different kinds of rhythm, often defined by the feeling it evokes when looking at it.

  • Regular: A regular rhythm occurs when the intervals between the elements, and often the elements themselves, are similar in size or length.
  • Flowing: A flowing rhythm gives a sense of movement, and is often more organic in nature.
  • Progressive: A progressive rhythm shows a sequence of forms through a progression of steps.
Regular rhythm
Regular
rhythm
Flowing rhythm
Flowing
rhythm
Progressive rhythm
Progressive
rhythm

Proportion

Proportion is the comparison of dimensions or distribution of forms. It is the relationship in scale between one element and another, or between a whole object and one of its parts. Differing proportions within a composition can relate to different kinds of balance or symmetry, and can help establish visual weight and depth. In the below examples, notice how the smaller elements seem to recede into the background while the larger elements come to the front.

Proportion example 1
Proportion example 2

Dominance

Dominance relates to varying degrees of emphasis in design. It determines the visual weight of a composition, establishes space and perspective, and often resolves where the eye goes first when looking at a design. There are three stages of dominance, each relating to the weight of a particular object within a composition.

  • Dominant: The object given the most visual weight, the element of primary emphasis that advances to the foreground in the composition.
  • Sub-dominant: The element of secondary emphasis, the elements in the middle ground of the composition.
  • Subordinate: The object given the least visual weight, the element of tertiary emphasis that recedes to the background of the composition.

In the below example, the trees act as the dominant element, the house and hills as the secondary element, and the mountains as the tertiary element.

Dominance

Unity

The concept of unity describes the relationship between the individual parts and the whole of a composition. It investigates the aspects of a given design that are necessary to tie the composition together, to give it a sense of wholeness, or to break it apart and give it a sense of variety. Unity in design is a concept that stems from some of the Gestalt theories of visual perception and psychology, specifically those dealing with how the human brain organizes visual information into categories, or groups2.

Gestalt theory itself is rather lengthy and complex, dealing in various levels of abstraction and generalization, but some of the basic ideas that come out of this kind of thinking are more universal.

Closure

Closure is the idea that the brain tends to fill in missing information when it perceives an object is missing some of its pieces. Objects can be deconstructed into groups of smaller parts, and when some of these parts are missing the brain tends to add information about an object to achieve closure. In the below examples, we compulsively fill in the missing information to create shape.

Closure

Continuance

Continuance is the idea that once you begin looking in one direction, you will continue to do so until something more significant catches your attention. Perspective, or the use of dominant directional lines, tends to successfully direct the viewers eye in a given direction. In addition, the eye direction of any subjects in the design itself can cause a similar effect. In the below example, the eye immediately goes down the direction of the road ending up in the upper right corner of the frame of reference. There is no other dominant object to catch and redirect the attention.

Closure

Similarity, Proximity and Alignment

Items of similar size, shape and color tend to be grouped together by the brain, and a semantic relationship between the items is formed. In addition, items in close proximity to or aligned with one another tend to be grouped in a similar way. In the below example, notice how much easier it is to group and define the shape of the objects in the upper left than the lower right.

Similarity, proximity, alignment

Head on over to the Principles of Design to read more. Even if you’ve been a designer for years, reread through these and perhaps even more advanced design principles (like Divine Proportion) to become a better designer.

3. Do a Design Tutorial

Sometimes just running through a tutorial on the web can open your eyes to many new techniques, best practices, and even put the design principles above in action to better see how they can work. Also, focus on actual graphic design tutorials specifically to become better at design.

Things you may want to consider learning about are:

  • Logo Design
  • Illustrator Vector Art
  • Graphic Design Photoshop Tutorials
  • Image Manipulation

Graphic Design

There are plenty of websites that focus more on graphic design rather than web design tutorials. Branch out and stop learning how to create different types of web designs. Focus on the design aspect so you can later implement it into a web design.

4. Collect Resources

Go browse the net now and find your favorite blogs, resource sites, and inspirational sites. Subscribe to all of their feeds. I found that before I did this, I only had a few feeds, and not a lot of inspiration. Get familiar with the community by staying up to date. Right now, I have 15+ feeds in my Google reader right now, meaning I have 42 (15×3) possible sources of inspiration or knowledge-gaining just on my Google page.

By doing this, you can find inspiration, a great new tutorial, or expand your horizons beyond just what you’re looking for. It may help you discover something in the design world you weren’t even aware of. Without a collection of resources like this, you are limited to only building upon what you already know.

Resources

Also (with the right finances) collect design books, help sheets, and other forms of printed materials. Inspiration beyond the computer screen is invaluable as many designers know, and sometimes we can think and learn with a clearer head from a book rather than a computer screen. Also, many design-related books, magazines, and other materials are much more in-depth than the average blog post or article on the web.

5. Find Your Worst Habits

What are your worst habits as far as graphic design goes? Is it not branching out into new tangents? Is it not using enough whitespace and cluttering up your designs? Is it a lack in creativity?

Once you identify your bad designer habits, you can focus on fixing them. If you determine you have a problem with creativity, research methods on how to become creative in your own sense. If it’s a more specific issue — like the cluttering of a design and lack of whitespace issue above — research whitespace and techniques on becoming better at identifying a great use of it.

You may find that focusing very specifically on your problems can help you better overcome them rather than trying to learn new design techniques from all over the place.

27 Jul 2009

2

Conducting Collaborative Design Sessions – Part 1: Prepare

What better way to create a user-friendly website than to let users help design it? In Part 1 of this series, we’ll show you how to prepare for a successful collaborative design session.

23 Jul 2009

10

50 Pink Web Designs – Because Everyone Knows Pink is the New Black

Pink can come in many hues and emotions, so its easy to see why so many designers choose it as a main color scheme. Here are 50 designs that feature the color pink, for inspiration and fun.

18 Jul 2009

11

How To Be Creative

How does one actually become creative? How do we think of our own unique ideas, and try not to steal? Most of us steal ideas from all over the place, whether we realize it or not.

Here is a simple how-to on being creative — derived from what I’ve learned on the journey to success.

Why We Copy

To define creativity, let’s find the opposite of what true creativity is. What is the opposite of creativity? Copying and repeating other material. To get to the source of all our problems, we need to discover why we copy. Only then can we stop, and start creating original works.

Reason Number One: It’s Easy Money

We copy material from all over the web because it’s easy. It’s our escape. As long as we get the job and get paid, we’re satisfied in the end. We get a pat on the back from our employers, our clients, or whoever pays us in the end and we’re very happy. We made their job a success. What’s our motivation to be original anymore?

Money

Reason Number Two: Copying is Standards-Compliant

Copying others ideas, layouts, and techniques have become so standard, that we often use standards to justify it. Does using the same color scheme, layout, and style make a web design more user-friendly, just because that’s what people are used to?

We tend to think if people are used to it, they can navigate through it better. What we often forget, though, is that someone came up with that idea originally, and even with that new idea, it still became a success.

Standards-Compliant

Reason Number Three: We Copy Success to Get Success!

Also, copying means success — to a point. If anyone has been following Webitect for awhile now, you know that it’s a much bigger blog from it’s meager beginnings. How did it get that way? I get a lot of emails requesting my techniques, lessons-learned, and other forms of consultation. Well here’s the answer: I copied.

I didn’t copy great articles from other websites, the blog designs Webitect has been through, and I didn’t manipulate my way through any copyright agreements. I wrote my original material, researched, studied, and helped bring Webitect to the blog it is today. Even though I’ll admit I copied quite a bit, I worked hard to get to where I am today with this blog.

So what did I copy? The techniques for success, for post writing, for traffic gaining — you name it, I did it. I learned awesome social media tricks and entrepreneurial ideas from IncomeDiary.com. I learned great design techniques from WebDesignerWall. I learned how to engage an audience through the experiences of Darren over at Problogger. I even learned a great deal of my blog writing skills from Vitaly over at SmashingMagazine.

Sure enough, doing what they do has brought success to myself and my blog. The problem is though, for everything I do, I didn’t come up with any of it. It’s all been done before, and many people reach the stage I’m at now. Now that I’m here though, now what?

Success

Why Copying Isn’t Worth the Fame and Fortune

After learning all of this stuff from the experts, either directly or indirectly, I found myself with a popular blog. With over 500 subscribers, under the 100,000 Alexa ranking, and thousands of pageviews a day, I found myself even making some advertising money off of Webitect.

I’m 20 years old, and my blog has only been alive for 9 months, but I’ve already found myself in a position that would have made me happy at 30 as a career goal. I’m excited to be in such a position, but lately I’ve been finding myself lacking in motivation. After struggling for over a month, “Just get through it, Kayla. Just write the posts, just find and manage the new writers, just do it…”, I’ve finally come to realize the source of my lack of motivation: This is not me at all.

I’m fortunate of all the techniques and ideas that have come along to help me develop as blogger, designer, developer, and freelancer. However, I went too far with it. I tried to be exactly like every other design blog on the Internet. However, that’s not me. I love owning a design blog, but I don’t love everything other design blogs have to offer. I tried copying the stuff I just wasn’t interested in too.

I realize I’m going of on a tangent by talking about the blogging lifestyle when most of Webitect’s readers are indeed web designers, developers, and other freelancers. However, lessons can still be learned for people in these fields, because we all specialize in copying within our own fields. Hopefully realizing this can help us pause, and rethink our habits. Let’s all stop copying others.

Here are five steps to help.

Step One: Stop Thinking About Design

I’m going to try to gear the rest of this post towards designers to hopefully benefit the majority of my audience, but I’d love to hear alternate strategies to these steps for other professions as well.

The first step to being creative is to stop thinking about design. Ok yes, it sounds crazy — but it just might work. Whenever I write a post on how to find design inspiration, one of my steps is always to get away and let go of things. Stress is a major creativity killer. With stress, we often find ourselves saying, “Let’s just get this done and over with.” That leads to none other than copying. Copying is a way to get things done fast and the easy way.

So just go rest! Stop stressing about money, clients, designs, and other to-dos. Also, stop trying to find and define design in everything. That is often times a designer’s nature, but it can quickly cause design overload. Give yourself some time to just enjoy life the way it was before you had a career, before you designed for money, and before you had to deal with all the stresses currently in your life.

By getting out of our routine, we can start thinking for ourselves again. When I was stressed and always eager to get things done, I would go throughout my daily tasks — even the ones that didn’t apply to my job — always looking for design inspiration. Sounds like a great technique, but all it did was keep me in the same thought cycle at all times.

When I saw some old furniture at my mom’s, I thought of the ever-so popular vintage design. When I saw a vase of flower, I just thought of how I could turn that into design. But oh wait…I’ve already done a million designs inspired by flowers and nature, not to mention all the blog posts!

Also, to be completely honest, even when I design nature-inspired things, my techniques stem from Nick La. He’s a great deal of inspiration for me, but it’s become so tightly knit that even my own hand-drawn designs copy his techniques to the point where they are almost identical. I then have to stop and remind myself that he is the original — not me.

Be Original

So to start being a creative designer, one must stop thinking about design all together. This can keep our stress level much lower, and most importantly, our mind open for new and truly original ideas.

Step Two: Remind Yourself of What You Love

This blog was a lot more personal when it started out. It was not a diary by any means, but it wasn’t at the professional level it is now. I let myself out more, just as I am doing in this specific post, but within all my posts. I was able to write better then, and write longer posts. Writing was much more successful with my own voice.

Also in the beginning, my design strategy was much different. When I designed I tried to think of things I loved — just like a little girl drawing all of her favorite things.

Webitect’s early days inspired me to write this post, and reminded me of my original design style. What was it? None other than a composite of my favorite things. The most original designers I see always seem to have some sort of niche in design. Whether it be underwater, a certain animal, or a certain era. Everything we love as individuals is completely original, and only a truly original designer can bring themselves into their main source of inspiration.

So let me see… I love Giraffes, old TV shows (I Love Lucy is my favorite), the color purple, video games, seahorses, Andy Warhol, the taste of a cold Diet Mountain Dew, Chrysanthemums, Italian food, and when I was little, I collected precious rocks and even seashells from the beach.

Listing off your favorite stuff is something a little kid might do, but doing it just now reminded me of a lot of memories and favorites I could draw inspiration from. Better yet, nobody has that same set of favorites but me. Artwork that stems from this would not only be fun to work with, but also completely creative.

Favorite Things

So as an exercise, list off what you love. Even share it in the comments! What’s your favorite animal, TV show, color, or food? Your favorites in life are perfect for defining your own design style.

Step 3: Remember the Basics of Design

If you went to school for web design, remember what you learned. Even if you didn’t, think of what they would teach you. Did you learn how to create vintage web design? Did you learn how to create impressive WordPress themes that sell? Did you even learn how to “Draw an Under the Sea Scene in Illustrator”? No.

So what did we all learn in design school? Whether it was for web design, graphic design, web development, or even your art class back in high school — we all learned the same stuff. We learned how to use the pen tool in Illustrator, how to do photo manipulations in Photoshop, how to find colors that match, understand why whitespace and contrast matter, and how to use positive and negative space. What we learned in school are design principles and how to function standard software.

That’s a very smart approach, too. “Teach the kids how to make whatever they desire to create look good.” Yet, right out of school we started reading tutorials, how-tos, and other people’s design processes. We trained ourselves to use the design principles we studied to be applied to already made techniques.

School

Now, I’ve posted tutorials on Webitect, and probably will continue to post them in the future. So am I telling you not to read through tutorials? Of course not.

Learn from tutorials, and study techniques. However, don’t copy! With advances in software, amazing things can be accomplished. We may need tutorials to learn how to work with a new feature in future versions of Photoshop. We also may need tutorials to discover features we didn’t know Photoshop had to offer. (Or any design programs for that matter.) Tutorials can help us discover. What we don’t want to do is copy tutorials directly.

Step Four: Shut Off the Computer and Get the Ol’ Pen & Paper

Not yet though — I’d appreciate it if you at least finished reading the article and left a nice comment below! However, when you are done reading this article, shut down the computer and grab the traditional pencil and paper. We’re going to bring back old school design.

Think of that list of favorite things above — the things that make you who you are. If something inspires you, start drawing it. Draw whatever is in your head. Think about anything and everything — except for the following:

  • “Will this design make me money? Is it able to sell?”
  • “How am I going to code this into a web design?”
  • “Where will the logo, navigation, and content go if this is a web design?”
  • “How does this compare in talent to [insert favorite graphic designer here]?”
  • “This is crap. I’m starting over.”

Just draw! Is it that hard? As a designer, you can finally stop stressing to get the original results you want, and you can just do what you loved to do as a kid — create!

Bonus Tip: If you really want to have some fun, get some crayons when you’re finished with the drawing and go crazy.

Drawing

Step Five: Inspire Yourself

Take that drawing you did and turn it into a web design. Now you can start thinking about ways to make it possible. If it is impossible to fit the design accordingly into web design with any of your prior web techniques, then that’s perfect! As a designer, you can finally start thinking of ways to bend the layout around your design. Bend the navigation, the content, the logo — customize everything!

You can finally start using your own design to inspire a web design. Remember the general design principles you learned back in school, and apply them to the web. Remember usability, navigation, and organization. Remember contrast, balance, and alignment. Don’t remember your favorite graphic designer or the tutorial you read earlier today. You can now bend your own design to match basic design principles.

Wrapping Up

The overall lesson to be learned is to become yourself again. This is the only way to find your own unique style, and the only way to bring it out into your own designs.

As time went on with Webitect, I ended up researching and writing about sections in web design that I wasn’t at all interested in, at least not yet. All that came from that were horribly short and badly-written blog posts. Also, it left me with stress, and made what used to be a hobby, into a full-time job. It’s great that I’ve found such success at such a young age, but I’m not sure if I’m ready for all of it just yet. Remember, time is always on your side.

Remember to always have fun with design. If something is becoming stressful down the line of your career as a designer, stop and reflect. Ask yourself the following questions:

  • Does it line up with your career goals?
  • What is the source of the stress? Disorganization? Too many tasks at once?
  • What part of this current project are you interested in? What have you grown apart from?

We all grow and develop as people and as designers, so our interests are changing constantly. To stray from confining yourself from one aspect of your career for too long, remember the stuff you’ll always be interested in: your roots.

13 Jul 2009

7

How to Find Motivation During the Design Process

When working with clients, it can be hard to keep focus during a long project — or just when things aren’t going your way. Here are some top strategies to finding the motivation you had at the beginning of the project once again.

Creativity is something that has a mind of its own, which is why being a designer can absolutely suck sometimes. Being forced to work can be a huge creativity killer, and we can forget why we got into the profession in the first place. Let’s look over just a few of the methods for regaining motivation and inspiration.

Page 4 of 7« First...23456...Last »