Tips For A Finely Crafted Website

Advertisement

Good Web designers know what many others might not realize: that creating a truly beautiful website requires care, time and craft. And similar to how a craftsperson molds their creation by combining raw materials, skill and unwavering focus on the vision, a beautiful design is planned and executed with exceptional focus on what is to be achieved by the website.

It is important, however, not to confuse a beautifully crafted website with one that simply brushes over the content with attractive visuals. This article provides a small selection of tried and true methods that Web designers regularly employ to give a website that bespoke look and feel (think a tailor who carefully cinches a suit here and there to ensure a perfect fit).

Make no mistake: these methods do take extra time, and they often result in improvements that the untrained eye might not consciously register. But the payoff is a better overall experience for the user. Users will leave with a smile and a lasting impression or relationship with your website, even if they can’t quite put their finger on why.

Start From Scratch, Every Time


For a truly customized design, always start with a blank slate.

Whenever possible, avoid cobbling together work from old designs. Every website should be treated as unique, regardless of its type (e-commerce, author website, blog, etc.). The very best websites are designed to fulfill a defined purpose. Building your design from the ground up fosters clarity, focus and commitment to the design.

At every step in the design process, ensure that everything in the layout has a deliberate purpose; you should be able to explain your thought process behind every element on the page. If something has no reason to exist on the page, then consider removing it because it could simply distract visitors from more important content.


Every element on the page should have a reason for existing.

Simply copying and pasting elements from previous designs is a crutch that prevents you from experimenting, learning and growing as a Web designer. This isn’t to downplay the value of iterating on previous design elements1, which can be a useful exercise and which can challenge you to get creative2 and experiment.

Invest In Custom Icons And Graphics

Spotify3
Spotify4 uses custom icons and graphics, rather than relying on stock images, to give their design soul and character.

Custom illustrations, imagery and iconography make for a unique experience on a website. While stock photography and vectors do save a ton of time, a photo of a smiling sales rep wearing a headset just feels phoney to visitors when they’ve seen the same image on five other websites.

Invest time in creating custom icons and graphics to preserve the look and feel of your website, as well as the authenticity of your message.

Spotify5 is a perfect example of this. Its lighthearted, “sketchy” illustration style sets its apart from all the other music services, and it leaves a lasting, positive impression on visitors.

Some other examples of great websites with custom icons and illustrations:

Remove Friction That Impedes Scrolling


Encourage scrolling by removing obstacles.

As screen resolutions expand and touchscreens multiply at every turn, we’re encountering longer pages and smaller website footprints9. And with good reason: a user who has to scroll down the page will encounter far less obstruction than someone who has to click a link and wait for the new page to load10. Removing this obstruction will not only simplify the navigation, but help to tell a cohesive story, without the interruption of page loading.

As Paddy Donnelly’s excellent article “Life Below 600px11” explains, the fear that users will ignore any content unlucky enough to fall below the fold afflicts designers much less today. And the proliferation of devices of different resolutions makes it almost impossible to determine where exactly the fold lies.

12
Life Below 600px13” is an excellent essay that dispels the myth of the fold.

Weave a cohesive story concept by getting creative with connecting individual page sections. This will promote a natural flow for the user, encouraging them to explore deeper into the page, building momentum in their experience and making it easier to get all the way through the page. You can even tie radically different styles of content together on the same page by adding small visual cues at the bottom of each section to indicate that more content awaits — much like how different rooms in a house can have entirely separate functions yet retain a common theme. If each section on the page comes to an abrupt end or looks like a footer, then users will be less likely to reach the end.

In fact, scrolling has become such a natural interaction on most Web-enabled devices that Apple did away with the scroll bar14 in OS X Lion.

The Dangers of Fracking15 and Slavery Footprint16 deserve hearty mentions. Both websites drive the user to scroll down with incredibly creative parallax effects and compelling stories.

More awesome examples of mega pages:

Make The Design Invisible Through Interactivity And Functionality

After more than 20 years of evolution, the paradigms of the print world still provide the fundamental building blocks of the way we present content online. Think about the terms we use to describe the Web: pages, headlines, columns, scrolling. These are band-aid metaphors that we’ve adopted to make the Web more understandable to the public. But the medium itself is capable of so much more. Static text and images are usually fine, but human beings by nature crave varied stimulation, and the Web is capable of feeding that craving with a much more interactive and richer experience.

Zurb21
Joyride2322 uses “Pit stops” of interactivity to keep the visitor engaged with the website.

Providing clear points on the page where users can interact with the design, rather than passively consume it, will help to relieve the burden of wading through long passages of copy. Visitors will experience the invisible part of a design; content sliders, tooltips, lightboxes, modal windows and other points of interaction give them something to do and can propel them further along in the story, much like how a good museum exhibit mixes methods of conveying information. Of course, swing too far to the extreme of too much interactivity and you’ll distract users, so be cautious of how much you build in. All interaction points should serve the overarching goal of the page.

Joyride2322 is a great example of this approach. While the page has plenty of content, Joyride does a great job of guiding the user around the page and highlighting points of interest to come back to later. (And the little surprise at the end will leave you grinning.)

Great examples of engaging users with interaction on the page:

Pay Attention To Detail

Whether you’re going for clean minimalism or complex and illustrative, pay special attention to the details of every element on the page. Even slight inconsistencies will be picked up by users subconsciously, thus diminishing their experience or confusing them.

A few common pitfalls to watch out for:

  • Typography gone wild
    Each typographic treatment in the design should be consistent with its function. Headings in one part of the page should look the same as headings elsewhere on the page, and indeed throughout the rest of the website.
  • Buttons, buttons everywhere
    Be conscious of where a button style is called for, as opposed to plain text links. Overusing buttons diminishes their overall effectiveness.
  • Changing gradients
    If your design has gradients, use them consistently, with the same shades across like elements and with the same gradation.
  • Mind the gaps
    Consistent spacing and alignment between page elements will make the layout feel refined and high quality.

Thoughtfully questioning each element in the layout is key to achieving a highly polished design. The burden is on you to prove that an element has a reason to be there and is not superfluous to the experience. At the end of the day, don’t fall into the trap of thinking “No one will notice,” because the chances are high that someone will!

As Antoine de Saint-Exupéry28 once said:

Perfection is achieved not when there is nothing more to add, but when there is nothing left to take away.

Consider whether the elements on the page have the right amount of detail to fulfill their purpose. Does that button have the right texture and color treatment to serve its role? Does it need texture at all? Simplicity is key29 and is relative to the purpose of the element.


Polished designs can be found across the Web, if you look closely.

Polished touches lie all around the Web if you look. Little Big Details30 rounds up some details from the Web and other interfaces that many of us encounter every day but don’t notice.

Details31

To see a truly polished design, head over to PixelResort32. To describe it in one word: sumptuous. No detail has been spared for each element. The entire experience has a weight and tangibility that stays with the user.

Some other excellent examples of polish on the Web:

Bringing It All Together

Creating a truly beautiful and memorable website ain’t easy. You’ll need to make a significant investment of time and effort, focused in key areas for maximum payoff:

  1. Design the entire layout specifically for the given website. Putting a new coat of paint on an old template won’t give you the most compelling design possible.
  2. Create your own graphics to give the design a unique personality.
  3. Motivate visitors to scroll by weaving a story across the page that compels them to finish.
  4. Engage visitors with variety. Adding “rest stops” of interactivity will keep them actively thinking about the experience that you’re leading them through.
  5. Finally, polish, polish, polish! Think about every detail in the design. Make sure nothing is missed.

There you have it: five solid techniques to ensure that your website is a beautiful and memorable experience. This roundup is by no means comprehensive, but the techniques will pay you back with returning visitors, high engagement and user satisfaction.

Do you have any tips on adding beauty to a design? Feel free to post them in the comments!

(al) (jc)

Footnotes

  1. 1 http://www.alistapart.com/articles/style-tiles-and-how-they-work/
  2. 2 http://www.dtelepathy.com/blog/articles/why-web-designers-should-code-limitations-open-doors
  3. 3 http://www.spotify.com/
  4. 4 http://www.spotify.com/
  5. 5 http://www.spotify.com/us/jobs/
  6. 6 http://captaindash.com/
  7. 7 http://slidedeck.com/
  8. 8 http://www.axure.com/
  9. 9 http://speckyboy.com/2012/03/27/design-trends-the-present-the-future-and-you/
  10. 10 http://blog.kissmetrics.com/loading-time/
  11. 11 http://iampaddy.com/lifebelow600/
  12. 12 http://iampaddy.com/lifebelow600/
  13. 13 http://iampaddy.com/lifebelow600/
  14. 14 http://uxmag.com/articles/the-extinction-of-the-scrollbar
  15. 15 http://dangersoffracking.com/
  16. 16 http://slaveryfootprint.org/
  17. 17 http://www.spoonjuice.com/nightstand/hd/
  18. 18 http://diablomedia.com/
  19. 19 http://www.realmacsoftware.com/courier/
  20. 20 http://www.rdio.com/
  21. 21 http://www.zurb.com/playground/jquery-joyride-feature-tour-plugin
  22. 22 http://www.zurb.com/playground/jquery-joyride-feature-tour-plugin
  23. 23 http://www.zurb.com/playground/jquery-joyride-feature-tour-plugin
  24. 24 http://circleme.com/
  25. 25 http://path.com/
  26. 26 http://www.secondstory.com/
  27. 27 http://lamoulade.com/
  28. 28 http://en.wikipedia.org/wiki/Antoine_de_Saint-Exup%C3%A9ry
  29. 29 http://www.vitsoe.com/en/gb/about/dieterrams/gooddesign
  30. 30 http://littlebigdetails.com/
  31. 31 http://www.littlebigdetails.com
  32. 32 http://www.pixelresort.com/
  33. 33 http://get.wunderkit.com/
  34. 34 http://metalabdesign.com/
  35. 35 http://outsideapp.com/

↑ Back to topShare on Twitter

Jason Amunwa is the Director of Products at digital-telepathy, a user-experience design studio that created SlideDeck, the WordPress slider plugin that lets you create awesome content sliders in minutes with no code, as well as Hello Bar and Impress.

Advertising
  1. 1

    Awesome article man i have saved it for the future references while I will work on some UX stuff :)

    1
  2. 2

    Carlos Botelho

    July 4, 2012 7:44 am

    Great article, I am a developer and I use smashingmagazine to try to stay closer to design trends. I have a very difficult time when we are making the slices to make the psd file to HTML, and often we ( the design team and the developers ) loose some points such as name patterns and even CSS definitions. We could gain a lot of productivity if we could take advantage of the CSS inheritance, or even focus more in the performance without leaving it to the end. I would greatly appreciate if there was a material for this topic.

    5
  3. 3

    Fascinating tips !!, “pay attention to detail” is what struck me in this article, off course detail matter, subtle details really matter in web design, I think project management and also time management have a role to give us time to deliver a detailed design.

    1
  4. 4

    I enjoyed the article itself, but the examples of “polish” were poor in my opinion.

    Here are a few sites that I find particularly well designed:

    Vimeo – http://vimeo.com/
    Livingsocial – http://www.livingsocial.com/
    Mixpanel – https://mixpanel.com/
    Brafton (tooting my own horn) – http://www.brafton.com/

    3
    • 5

      Thanks for the examples, Evan.

      Just curious – what made the original sites I mentioned poor in your opinion?

      Jason

      0
      • 6

        Hi Jason,

        I think the major thing that was bothering me was a feeling of lack of originality. Wunderkit and MetaLab look very similar… kind of that Web 2.0/Apple aesthetic that has been done to death. Also, the “Get in Touch” button on MetaLab is awful.

        Another thing about MetaLab is their site feels boring. For instance, in their slider, they have the little dots for navigation cues; it would have been more interesting to have mini versions of the relevant app icons for each (and betters the UX since people know what they’ll get when they click.)

        I could go on, but I think you get the idea. Anyway, thanks for the great article!

        -Evan

        -1
  5. 7

    Cheers, Jason! You make a great point about using invisibility and functionality in web design to gently guide users along an engaging browsing narrative. Like you say, we don’t want to overload the page with interactivity functions, but instead manage user expectations and consistency within the design. The “story” should feel natural and empowering, with no outrageous interactive “surprises”.

    Thanks for the article!
    Sarah Bauer
    Navigator Multimedia

    0
    • 8

      You’re welcome! Yeah, no-one likes being ambushed by unexepected interactivity, but it is useful to give your visitors a little break here & there, to break up the text-fatigue =)

      1
  6. 9

    Great article. I’m a developer trying to hone my design skills and tips like these are invaluable.

    0
  7. 10

    Grant medefindt

    July 4, 2012 11:26 am

    Great article. I like the idea of rest stops. Allowing the user to engage with additional content or ideas. A lot of the time this is all second nature, but well put into words.

    0
  8. 11

    Normally I get bored, reading so many similar articles on design, customers, clients, all of the above. This one was different. In fact I read it twice. Well written, and it made me care more about what I do – I didn’t think that was possible. Starting from scratch can be intimidating, but I think it’s necessary, no one wants their website to look cookie-cutter, even in the slightest. I just purchased a software plugin to help get through the more boring elements of design, while still being able to be creative and fulfill my clients needs (divine elemente) I’m finding it a little daunting, but I’m excited about it. There’s so much out there, so many tools, programs, generators etc etc etc. Do you have your own go-to tools for each element in the design process / when you’re developing or do you constantly go looking for more? Maybe that’s a silly question, but I have a hard time keeping to just one thing. I’d be scared to try to sort my bookmarks.

    2
  9. 13

    You really managed to pick out the cream of examples to back up your arguments. An altogether compelling and well put-together article. Thanks for the good read.

    1
    • 14

      Thanks Kris – yeah, it was actually a lot of fun searching around for them. There’s so many unknown sites out there that are truly stunning with their creativity and finely-executed design. It was a pleasure to get the spotlight shining on some of them.

      Jason

      0
  10. 15

    Excellent! I think that the whole idea of weaving things together presents a very key paradigm that can help with design – HOLISTIC, not fragmented. Thanks for the article!

    0
    • 16

      Absolutely – the fact that people are more accustomed to scrolling, screen resolutions are getting bigger, and processor/download speeds are increasing mean that Web designers have more leeway to create really compelling stories on a single page, and therefore can afford to think more holistically about the user’s experience, without breaking it up into parts.

      0
  11. 17

    A really thought-provoking article with some great tips and excellent examples to drive the points home. Thanks so much for sharing :)

    0
  12. 18

    i love this sentence
    ”Perfection is achieved not when there is nothing more to add, but when there is nothing left to take away.”
    thanks fo sharing.

    0
  13. 19

    Personally I’m getting a little tired of corny stock imagery being used all over sites, a little bit here and there is fine in my opinion, excessive useage of stock imagery is a negative point in my book, Personally I feel the best sites have bespoke illustrations

    0
  14. 20

    Simplicity is the key… fantastic article!

    0
  15. 21

    Good article but I don’t agree with the first tip, never start anything from scratch if you can build it from something already existing. Already existing PSD pages and components are key to foucs on creativity and design and not on more mundane repetitive tasks.

    -3
    • 22

      Hey Giuliano

      It’s a good point – efficiency is definitely a good thing. I think the sentiment I was trying to convey is that a great design isn’t cobbled together from existing parts just to save time. If you happen to have the perfect button PSD lying around, then go for it, but take the time to consider whether or not it’s right for the job. Simply seeing an opening for a button, and pasting in an old button design just to fill the space rarely results in a great design.

      Jason

      3
  16. 23

    Nick Haroldsen

    July 5, 2012 8:08 am

    Thank you for this well-crafted article. Yes, many of the points have been said time and time before, but we all need reminded of the basic design principles to continue to achieve great designs. The way you have written it validates the process. Thanks again.

    0
  17. 24

    Okey article. However you do need to think about SEO in the section about The fold. Having uselrs klick links to pages in your site makes search engine (Google) think that your centens is relevant to the visitor. Just à heads up!

    Thnx for the article!

    0
  18. 25

    Hi, great article! I was expecting some obvious ideas, but again smashing magazine remain more into quality ten quantity. Before I read it we had a large discussion in our office over the avarage scrolling and parallel scrolling. Both are very useful for the user however we decided that parallel scrolling maybe distracting from the content. This is what we came up with: http://www.redcloudsoft.com any comments warmly welcomed:) kind regards, Karolina

    0
  19. 26

    This is a great site and I enjoy the writing, but the visual examples are generally pedestrian. Would be great to see the editorial selection of sites match the quality of the content.

    1
  20. 27

    Rajesh Maharjan

    July 11, 2012 9:00 pm

    Well it is great post, I’m holding this field about 3 year and running. I find that website design takes experience & knowledge of latest trend & user friendly designs.

    0
  21. 28

    Great insight. We are clearly beyond a point where beauty is all that’s required for a successful design. Elements which appeal to user emotions will be most effective, much of which you have captured here.

    0
  22. 30

    Awesome article. The timing was perfect. I need to launch in two weeks and you hit on 2 big risks, “frictionless scrolling” and “flow navigation”. Thanks again!

    0

Leave a Comment

Yay! You've decided to leave a comment. That's fantastic! Please keep in mind that comments are moderated and rel="nofollow" is in use. So, please do not use a spammy keyword or a domain as your name, or else it will be deleted. Let's have a personal and meaningful conversation instead. Thanks for dropping by!

↑ Back to top