Web Design Tips for Beginners – Everything I Wish I Knew When I Started

About The Author

Rob Bowen is a staff writer for Web Hosting Geeks, a longtime freelance designer, and burgeoning videographer and filmmaker whose creative voice and works can … More about Robert ↬

Email Newsletter

Weekly tips on front-end & UX.
Trusted by 200,000+ folks.

We recently turned to our beloved followers on Twitter—as we like to do from time to time—to help us demonstrate one of the greatest things about the online design community: its willingness and eagerness to pay knowledge forward. We asked our friends in the community to share their favorite design tip with us, and they responded en masse. There were so many fantastic responses that we felt it would have been a wasted opportunity if we didn’t compile them for our readers and discuss them with the community at large.

There was such a variety of fine responses that distilling them into a single comprehensive post was difficult, but we managed to do just that (for the most part). So, take a look at some of the best advice the design community has to offer to all those who file within its ranks.

Further Reading on SmashingMag:

Getting Started

The best place to start is the beginning, especially because getting off on the wrong foot with a new design project is easy if you over-eagerly dive in and let excitement outmuscle an organized and steady approach. Falling into this trap is easy when you’re new. Getting started the right way often proves vital to the success of a design project. There are many things to consider as you begin.

switch

Just Do It

Remember, above all, to actually begin. So often we get hung up on the preliminary steps and considerations and linger there, seemingly on “Pause.” Whether because we don’t know where or how to begin or are overwhelmed by the number of steps involved in the beginning, we wait. We try to cover everything before stepping forward, to test the waters. But the community agrees: just go for it!

  • Whatever it is, do it now.
  • Stop reading #smtips, and go create something that delivers a message.
  • Stop procrastinating and start already!
  • The scariest moment always comes just before you start.
  • Be afraid, do it anyway, fail, repeat.
  • Stop messing around; just start.
  • Don’t over-think it.

Begin With Pencil and Paper

Another popular bit of advice, shared multiple times in the answers we received, is not so much about whether to begin but how to begin. For many in the design community, the only way to start a project is to unplug from the computer and go analog.

Pen and paper is a popular approach in the early stages of a project, and it provides a refreshing, focused perspective right off the bat. If the computer apps come out too early, you might become confused about where to begin or even be overwhelmed by the sheer amount of possibilities. Suddenly, instead of focusing on the imagery you want to use to sell the idea, you are negotiating techniques and tweaks, and imagery gets relegated to a secondary role.

  • Start with pen and paper, not a mouse and keyboard.
  • The best ideas are born on paper.
  • Always start with a pencil and a blank piece of paper. That’s the best way to get the best designs.
  • My best design tip: forget your Mac, PC and apps, and start on paper with a nice sharp pencil.
  • Use a pencil and paper to create a concept before you use a computer.
  • Always start designs on paper. There’s power in sketching.
  • Sketching out your ideas at the beginning of a project can really help form a good design.
  • Always start with paper.
  • Do sketches on paper, not in design software, so that you don’t limit your ideas to your current technological capabilities.
  • When designing for the Web, go old school; plan and prototype your user interface and functionality on paper first.
  • Turn off your computer and go back to basics; you can’t beat initial sketches done with good old-fashioned pen and paper.
  • Design tip: start with pen and paper, and only turn to the software when you know exactly what you’re going to do.
  • When I design, I like to draw ideas out on a big piece of paper and write out the functionality of what I’m trying to build.

Deadlines

As you begin your project, pay special attention to deadlines. Many in the industry admit that, for whatever reason, they pay little or no attention to deadlines that have been established—usually by the client and based on specific needs. Unfortunately, this reflects poorly on the field as a whole, not just on the individuals who choose to ignore deadlines. So, honoring an agreement has importance beyond the project itself.

Of course, we designers shouldn’t unnecessarily stress out by letting deadlines linger in the forefront of our minds, but neither should we ignore requested timeframes. Deadlines should hover in the back of our minds, not actively interfering, merely acting as a subtle reminder that we have a schedule to stick to. A deadline is a motivator for some and merely represents the end point for others. Some designers would keep going and redesign indefinitely if they didn’t have a deadline to meet.

  • Great design takes time; set realistic deadlines (then multiply by two).
  • Aim to have not quite enough time to finish your design work.
  • Listen to your clients so that you truly know what they need and when they need it.

K.I.S.S.

The most common response we received from our Twitter followers by far was the age-old piece of advice to “keep it simple, stupid.” KISS is suggested in so many industries, and in the design field it rings truer than ever. Design is a dynamic and communicative field in which countless elements come together to convey the intended message. Yet the more you add to a design, the more cluttered it becomes and the more likely the message will be muddled. So, strive to create the simplest presentation possible that communicates effectively.

fliegen

  • Keep it simple, stupid.
  • Simple is always better. Make it visible, not visual.
  • A designer’s job is to communicate in the simplest way possible.
  • The rule of threes is a favorite of mine for uncluttered designs: use three fonts (max), three images and three colors.
  • My favorite design tip is to follow the KISS principle: keep it simple, stupid!
  • Clean, clear and concise is more useful than flashy and cluttered! Clear the clutter, and make it awesome.
  • Keep your designs simple so that people focus on content.
  • Simple and clean!
  • For a good design, I suggest using a maximum of two fonts and few colors to keep it simple and avoid confusion.
  • Don’t overcomplicate a design. Occam’s razor says that the simplest explanation is most likely the correct one.
  • Making the simple complicated is commonplace. Making the complicated simple—awesomely simple—that’s creativity. That’s design.
  • If it’s not serving a purpose, take it away. In the end, extra graphics serve only as a distraction.

White Space

Another popular response we received—and it falls under the K.I.S.S. umbrella—was about white space. White space is important indeed and seems to elude so many designers who feel the need to fill every available inch with something. Much is to be said, though, for using white space and not committing the design sin of unnecessary clutter. White space gives page elements—and by extension those viewing the page—room to breathe. Cluttered designs feel uncomfortable, so add white space to relieve that tension.

  • Empty space can be just as (or more) effective than images. Make good use of empty space.
  • “Good design is as little design as possible.” (Dieter Rams)
  • Less is more.
  • The best design tip I ever heard was “reduce, reduce, reduce.” When you have nothing else to take away, that’s when you know you’re done.
  • Use white space and deep harmonious colors.
  • Don’t be afraid of white space.
  • Don’t forget the white space, and follow directions.
  • White space is just as much a design element as actual content.
  • Try not to clutter up your page with too many images, backgrounds and colorful fonts. Keep it simple.
  • White space is not lost space.
  • Don’t think you have to fill all the available space; cramming in every form of media, full of useless facts, won’t do you any favors.
  • White space is your friend, not your enemy.

Color

Another area to consider is color. There are numerous color considerations with every design, not the least of which has to do with the intended message. Color plays a powerful part in communication, and several of the tips that came in emphasized its importance. Understanding at least something about color theory and how to apply color to a website is vital for designers. Many believe that too many colors will unnecessarily complicate and thus detract from the effectiveness of a design.

  • Use less color, please.
  • Here’s an instant color scheme for a non-designer to use: start with a basic color, then choose darker and lighter variants, and adjust saturation but not hue.
  • Don’t be afraid of color.
  • When choosing colors for a client, do it near a window; the sun is the same for everyone, but indoor lights aren’t.
  • Simplicity is paramount in a color palette; work within shades for more variations. 2011 is the year of less is more.
  • When choosing a color scheme, make adjoining elements contrast, not match (e.g. white walls and black curtains).

The Learning Curve

Another issue that came up time and again was the learning curve that comes with the territory. Basically, we designers should never stop learning. In order to remain relevant in this ever-advancing field, we must constantly seek out knowledge and find ways to improve our skills and techniques. With the amount of material the community generates to help us sustain that knowledge base, we have little reason to fall behind.

lamp

  • Never stop the learning.
  • Learning is like the horizon: it has no limits (a Chinese proverb). This applies to design, I feel.
  • Never stop learning.
  • Nurture your passion for learning.
  • Strive to learn something new, and push your boundaries with every new project.

Focus on the User

Bear the user in mind at all times. This came up a lot. Usability is the be all and end all of project requirements. Form and flare are fantastic, but if they compromise the usability of the design in any way, they should be reconsidered. Most websites are interactive in some way, so functionality and the user must take precedence over aesthetics, or else the project will fail (to some degree, at least).

You also have to focus on the user so that you know what to design in the first place. Without knowing who you’re designing for, building a usable website will be a challenge. As you design, keep a feel for that intuitive interactivity, so that any user would immediately be able to navigate the website with ease.

  • Make aesthetically pleasing designs, but not at the expense of usability.
  • It doesn’t matter how great the design is; if it’s not functional and cannot be found, it’s pretty useless.
  • Think like the target user.
  • Function before form!
  • All designs begin with an audience analysis. If you don’t know who you’re designing for, how can you know they’ll get it?
  • Don’t underestimate the users.
  • Design with the client in mind but for the end user. In the end, everyone will be happy.
  • It may be dull, but here’s my tip: form follows function! It’s good design if the user can achieve what they want, the way they want to.
  • Think about the user first, then design accordingly.
  • User experience trumps everything. If it’s not usable, it’s not useful.
  • Understanding is the key to creating simple, usable designs. Understand the users, the why of the design and the business goals.

Save… Often!

If we were ranking the tips we received in order of importance, this next bit of advice would sit near the top. The tip is simple but vital: save your work. Save often. When you’re caught up in the excitement of a project, and the flow has you in its grip and is carrying you forward with hardly a moment for you to come up for air, forgetting this tidbit is natural. If you do, though, it’ll come back to bite you. Losing hours from being lost in work is easy, as is forgetting to save as you go. It takes only an instant and a hiccup in your system or app to lose hours of progress. When it happens to you, you’ll feel the importance of this advice.

  • Use Command + S often.
  • SOS: save often, stupid.
  • Design with simplicity, and remember to save your work frequently.
  • Remember to save your work often.
  • Save files early and often.
  • Never forget to save. It’s the simplest and most useful tip I can give.
  • Your design talent is no match for a system failure or computer crash. Always save and back up your digital masterpieces… often!

Inspiration

Another popular tip for anyone working in a field where a fresh and creative voice goes far is to keep the flame of inspiration burning. Design is no different. Inspiration is key, and the design community puts a lot of effort into keeping its wellsprings flowing uninterrupted. Designers spend countless hours seeking out sources of inspiration, both general and project-specific, to maintain their creative edge. Remember, inspiration can strike at any time, so be prepared to capture it.

  • Remember, design inspiration can come any time, even when you’re in the shower or on the toilet, so don’t fret if you get struck.
  • Don’t design in a vacuum. Draw inspiration from others, both online and in person.
  • Carry a notebook with you everywhere; you never know when inspiration will come.
  • Inspiration comes from what you least expect will give it, so keep your eyes open.
  • Eat the world with your eyes.
  • Do not steal or copy the creativity of others, but do get inspired by it.
  • Take your notebook everywhere (bed, bath, washroom…).

Get Out!

Several of our followers suggested getting an inspirational recharge by getting away from the computer. Unplugging and getting some fresh air could renew your perspective and state of mind. As you reconnect with nature, your mind removes itself from the environment that it normally grinds away in. By freeing your mind from stress and creative roadblocks, you might make great progress upon your return to work.

  • Step away from work and have some fun in order to bring back energy and inspiration.
  • Inspiration is rarely found at your desk.
  • Don’t limit your inspiration to the Web. Go to the library, on a photo walk outside or people-watching with a notepad and a pen.
  • Inspiration comes from nature, not Google Image search.

Don’t Force It

You want your designs to feel organic and natural, not like some sort of paint-by-numbers construction that you mechanically churned out. If you aren’t inspired, your work will show that. Of course, we don’t always have the luxury of waiting for inspiration to strike (what with deadlines and all), and there are times when we must work regardless. For the most part, though, we should nurture creativity so that we don’t have to force inspiration.

  • Let it flow; don’t try to hard or it will look fussy.
  • Don’t try so hard. It will just come to you and look that much better for it.
  • When you’re stuck, just walk away from the project for a while, then get back to work with new thoughts and fresh eyes.
  • If you are finding it difficult to develop ideas, take a break, then browse @smashingmag and let inspiration take hold.

Layout

The importance of layout was touched on in a lot of responses. Given everything that a design has to accomplish visually, layout is crucial. Functional design goes far beyond clickable elements and navigable depths. The bulk of it comes down to visuals and interactivity, both of which contribute to the function of the design.

console

  • Keep the main thing as the main thing.
  • Make your copy layout the backbone of the design as much as possible. The message won’t matter if it’s illegible.
  • Produce comps in black and white and in color so that clients can see the difference between the layout and the color and design.
  • Here’s a simple rule for good layout and positioning: make sure everything can be divided by four.
  • Use the “squint test” to evaluate a graphical layout: structure, contrast, spatial relationships, usability.

The Grid

When it comes to layout, there is a guiding force that most designers adhere to and recommend: the grid. The grid allows for a calculated and measured approach to laying out elements and making them work together so that the design is complete and functional. For many designers, the grid has no substitute for clean, professional design. Others use the grid to construct the initial layout but do not hold fast to it; they free themselves to break the grid if they feel the design would benefit.

  • Always design in a grid format; it never fails. Stay organized.
  • Build a solid foundation by harnessing the power of the modular grid before expanding into free-form design. It’s more intuitive!
  • The invisible grid: what you don’t see is as important as what you do.
  • Always use a grid. Then be sure to break it.
  • Your designs won’t look right until you truly understand the grid.
  • When doing page layout, don’t leave things to chance. Always use a grid.
  • Use a grid. It doesn’t limit you; it helps you make decisions.
  • Mind the grid.

Visual Hierarchy

As you lay out a design and place various elements, craft a visual hierarchy within the piece. This is an important facet of every design; it is the communication with users. Ensure that a hierarchy is in place to guide the user and to highlight interactive and navigable elements. Without clues and attention grabbers, users will feel left behind, lost or overwhelmed. Some users may need just a moment or two to figure it out, but they are making up for the designer’s shortcomings.

  • Every page needs a visual anchor, something that draws the user in and dominates the design.
  • Establish a clear hierarchy of elements. It should be clear what to look at first, second and third.
  • Maximize the effectiveness of the experience, put controls and content in relevant spots, and create focus where it’s most important.
  • Be sure to look at your design in grayscale. You’ll see true contrast and get a sense of hierarchy.
  • Trust your eyes. If they aren’t naturally pulled toward the important parts of the layout, you bettah move ’em.

Advice From Outsiders

Don’t underestimate or forgo the advice of outsiders—those useful people who are not necessarily associated with the project (or even the field) but could provide invaluable insight and suggestions for improvement. An outsider’s perspective won’t be mired in all the details we designers get caught up in. Feedback from the community and from potential users usually helps the design process, so don’t skip it.

  • Don’t be afraid to ask for others’ opinions.
  • You can’t proofread too many times. Get other people to check your work, too.
  • Consider criticism from people outside of your creative circle; users and consumers are important.
  • Describe to a friend your new design project, and ask for their opinion. Write the feedback down.

Typography

Another focal point in design, according to our followers, is typography. No element should appear like an afterthought, but all too often typography comes out this way. Whether the sizing or color is ill-fitting or the text is simply illegible, improperly implemented type detracts from a design.

buchblogger

  • White text on a dark background looks cool, but you can’t read it.
  • Always use a good font like Helvetica, and don’t use Arial. If you are a designer, invest in some killer fonts.
  • Never underline text.
  • The right font will make your design stand out.
  • Make sure your website still works when users enlarge fonts. This is a huge (and often overlooked) problem that breaks websites.
  • Get really good at typography. It differentiates the amateurs from the pros.
  • Your type can and will be resized and mutilated by browsers, poor monitors and search engines. Plan for it.

Originality

Originality is the key to making a website stand out. One way to create original work is to know the rules that govern design so that you can purposefully break them. Without knowing the basic rules, how will you know you’re being original and not just treading well-worn paths?

  • Don’t limit yourself to what’s trendy. Originality means breaking from everyone’s comfort zones.
  • Try to find your own style! Be original.
  • Looking around for inspiration is good, but learn to incorporate more and more of your own ideas. It will make you a real designer.
  • Design is all about knowing when to follow the rules and when to break them.
  • Use others for inspiration, but don’t become them. Developing your own style is important.
  • Be original.
  • Intimately learn the fundamentals of your craft so that you’ll know later when to cast them aside.
  • Rules, tips and tricks are great, but rules are meant to be broken. Be different, but do what feels right and looks right.
  • Never be afraid to ignore trends; trends are defined by like-minded visionaries.

Trust Your Instincts

Your voice is the most distinctive aspect of your designs, so you use it. More importantly, learn to trust it. Your skills and design prowess got you the job, and you need to have faith that your instincts will make the project a success.

  • When put together, design tips look like mantras. This is counterproductive if you are as cynical as I am. Trust your instincts. Rebel.
  • Stop looking at it. It’s fine!
  • Trust your instincts.
  • When learning a new technique, try it before searching for a tutorial. You’ll often learn more that way.
  • Trust yourself, but always sleep on it.
  • Trust your gut.

Take A Break

Taking breaks is crucial in every project. Deadlines are important, but so is the fresh state of mind (mentioned earlier) that comes from being rested. If you’ve been racing for hours with your nose to the grindstone, then you owe it to your clients, yourself and the project to walk away and refresh your perspective. Let the design sit for a day or so, and then assess its appeal and effectiveness. This is especially important when you feel you’ve come to the end of a project.

cocktails

  • Sleep on it, and re-evaluate it the next day.
  • As soon as you think you’re done, stop. Take a break of at least four hours. Come back and re-evaluate.
  • The design is never finished. Keep trying to improve what you have created. It will go from good to better to excellent.
  • Walk away from a project, simmer, and come back in a day or two to edit. Even when working with tight deadlines, it’s crucial.
  • Once you’ve “finished” your design, take a break, then go back to it and see what bits don’t need to be there.

Sleep Well

Get your rest. We designers must be alert and have sharp minds. Being well rested enables us to deliver the fresh and cutting-edge work that our clients expect. And no matter how many energy drinks we pour into our systems, one of the best recipes for clarity of mind is simple restful sleep. Tossing and turning for hours because you’re dwelling on the work that awaits you won’t revitalize you. Let go, and turn off the project for the night (or whenever it is that you sleep).

  • Sleep more.
  • Get enough sleep.
  • If you have the luxury of taking counsel with your pillow, do it! The morning is wiser than the evening.

A Few More For The Road

We got so many other fantastic bits of advice, and we wanted to pass them on to you without delving too deeply into them. So, here are a few more from the Web design community to take with you. Thanks to all our Twitter followers who shared their favorite advice, and thanks to you for reading through this long compilation post.

freie-fahrt

  • Stop thinking “campaign,” and start thinking “conversation.”
  • Optimize your workflow for elements that you reuse: presets, actions, customized panels and grid layouts save hours of time.
  • A design has 56 seconds to capture someone’s attention. A slideshow with call-to-action buttons solves this problem.
  • Design to meet the client’s needs, not to stay in your comfort zone.
  • Even a one-pixel line can change the feel of a design.
  • Creativity means allowing yourself to make mistakes. Design means knowing which mistakes to keep.
  • Literature can help your design. Invest in great books, like The Non-Designer’s Design Book and The Smashing Book.
  • Ask the right questions.
  • There is no fold.
  • Design, like love, is in the details. Paying attention to details can take a design from OK to awesome.
  • Be passionate about every design you create. That passion will make all the difference
  • If you make everything bold, nothing is bold.
  • Spend half your time learning, half your time doing and half your time teaching. Then rest.
  • Identity is consistency. Remember to align your imagery, message, colors and fonts across all design media.
  • No matter how long your website took to create, design and produce, if there is any doubt that it will work, start over or don’t deliver.
  • Think before you start. If you don’t, you’ve already failed.
  • word-wrap is the most useful CSS property that designers ignore: word-wrap: break-word;.
  • “Be consistent”: the mother of all design tips.
  • Design with code in mind. Know the capabilities and limitations of XHTML, Flash, JavaScript and CSS.
  • Always follow the four basic principles of CRAP: contrast, repetition, alignment, proximity.
  • Educate your client, educate them some more, and then educate them even further! An uninformed client is a huge obstacle in your design path.
  • Don’t stop at asking a question. Answer it.
  • Your best tools are analog: pen, paper, eraser, ruler, coffee, end users and other people’s perspectives.
  • The goal is not to live forever but to create something that will.
  • Failure isn’t the end point. It’s actually the starting point.

We, members of the design community, are on an ongoing quest for knowledge and learning opportunities—anything we can find to enhance our skills and share the precious pearls of wisdom we’ve held close to our hearts. Given that most of us are where we are because of the shared advice we’ve managed to accumulate along the way, tips like these can be powerful tools for facilitating professional growth, which we all strive to achieve. And it helps the community to grow and improve. Thus, they should be not greedily hoarded, but rather openly shared.

Interestingly, when we called for design tips, many of them came in the form of links and basic theories of art and design. Our followers felt that designers should have a firm grasp of such knowledge, so we’re dropping them in here at the end so that they don’t slip under your radar.

Smashing Editorial (al)