Showcasing Skills in Web Design

Showcasing Skills in Web Design

Portfolios are one of the best methods we have as designers to showcase our creative talents and imaginative muscles with code. Being able to portray your abilities in a way that will both captivate and intrigue your audience (potential clients) and future employers is therefore as important to your job hunting attitude as a resume. Within this article we’ll examine the three elements of a portfolio that should reflect your abilities best, and give you some inspiring examples of these in action.

Showcasing Skills in Web Design

Skills Matter to Clients

Every portfolio needs to explain three fundamental job related skills to a client and those are what web related technologies are you tooled in, what services can (or are you willing) to provide, and the visual examples of your previous work which inherently showcase the true skills you possess. This is much like analysing the abilities of an artist: the technologies represent the tools you can use (like a paintbrush), the services represent your forte (like portraits) and the visuals are the end result.

Designme
If you have a talent for web design, make the effort on your portfolio to showcase it!

Designme

The importance of having all three listed goes without saying. If you don’t explain to people what specific languages you know, you may end up getting requests for work you simply can’t undertake (so attracting the wrong kind of client), if you don’t explain what services you provide, you may get requests for a wide range of things from designing icons to writing software (which doesn’t help you) and without that portfolio and previous clients, your reputation simply hangs in the balance instead.

Showcasing Skillsets

There are many different technologies that we utilise on a regular basis. From lowly markup languages like HTML to the ever more complex server-side scripting selection (like PHP), it’s quite a dynamic range! As a designer or developer, it’s important that you explain precisely what types of languages you are equipped to deal with, or you may not attract the type of clients you would hope for. Usually a simple list will do, but you could provide extra details such as the level you’re at.

Brandwood
Brandwood

Shayhowe
Shayhowe

Uituneup
Uituneup

CSSninjas
CSSninjas

Harryjh
Harryjh

Dustin Walker
Dustin Walker

Showcasing Services

Giving your clients an idea of the type of work you undertake will improve upon knowing the types of language you are equipped to deal with. Perhaps you only prefer to do PSD to HTML conversions, maybe you do advanced WordPress integrations, or you might want to work as a consultant doing audits! Whatever your trade or niche, declaring it effectively will help a potential client gauge your suitability to their particular project. Unless of course you want to take on absolutely everything!

Level9design
Level9design

Florida Flourish
Florida Flourish

Thought Bot
Thought Bot

Aside
Aside

Nickfinck
Nickfinck

Tonygeer
Tonygeer

Showcasing Portfolios

Finally we have the portfolios themselves, of which the common trend involves displaying a lovely big image or screenshot of the work undertaken, details of the project itself with the name of the individual or brand you worked with and a link to the site itself (if it still exists – if not, you could consider hosting a mirror of the work). When you’re showcasing your past work, you want to include the best pieces perhaps organised by date if you find that you’ve far too much in one portfolio.

Brynn Shepherd
Brynn Shepherd

Robalan
Robalan

Header Footer
Header Footer

Design This
Design This

Art of Davemyers
Art of Davemyers

Ploc
Ploc

Creativity is Critical

Within the web design and development process, being creative and highlighting those important aspects of your work makes all the difference. If people know who you are, what you can do, what you offer and can see you’re a master craftsman, clients will find you! Portraying that portfolio is more than simply offering a general list, it’s about explaining your purpose, showcasing your passion and giving people every single reason possible to hire you rather than to look elsewhere.

While keeping in mind that every website must be highly usable and accessible, producing a unique portfolio that doesn’t look boring will inspire people to take a closer look at you. Portfolios are lucky enough to be in a position where that first impression tells a lot about you and your quality. If your showcase is out of date, poorly maintained and barely legible, no-one will hire you. Therefore as you leave this article, perhaps consider ways your own portfolio’s visibility and distinction can increase.

Questions

Do you have a unique portfolio design that is unlike anything else out there? What tips do you have for producing a successful portfolio? Is your portfolio a single or multi page site? And what, if anything do you believe is the most critical of the three elements? Let us know in the comments!

Alexander Dawson is a freelance web designer, author and recreational software developer specializing in web standards, accessibility and UX design. As well as running a business called HiTechy and writing, he spends time on Twitter, SitePoint’s forums and other places, helping those in need.

Comments

    • alem,
    • April 21, 2011
    / Reply

    usefull.. :)

  1. / Reply

    Thanks for posting. This was just what I was looking for. I never really thought about listing my skill set on my site; I always figured that most clients didn’t know or care about if I used php or pear as long as it all worked, but I guess some of them might already have a certain language they use and would be happy to know I can use it too. Thanks.

  2. / Reply

    http://www.tommek.eu/
    Is my portfolio meets the requirements.

    • Mike,
    • April 22, 2011
    / Reply

    Interesting, and some nice portfolios!

  3. / Reply

    Was looking for more examples..

    • Amie,
    • April 22, 2011
    / Reply

    These portfolios are very nice and unique. It is very useful for me. Thank you for the posting.

  4. / Reply

    Great stuff. I hope after reading this article many webdesigners will stop neglecting their portfolios and this article will inspire them.

  5. / Reply

    Nice Information
    Thanks for Sharing these more Valuable Information because a web consultant can provide a wide variety of services to businesses, from designing a web page to maintaining the activity that is generated by the site. While web consultants can serve in an on-site capacity with a company, they typically are brought in for special projects for a limited time.

    • Marek Levak,
    • April 24, 2011
    / Reply

    Thanks for including my portfolio in this article! But you used an OLD screenshot. I have my portfolio redesigned a while ago ;)

    Thanks again, Marek, designme.sk

  6. / Reply

    Thanks Alexander for such a nice article.

    All the examples mentioned here are nice, but my personal favorite is Tonygeer.

  7. / Reply

    nice!!

  8. / Reply

    Very nice information. this will help me. thanks

  9. / Reply

    Thanks, for the list.. Will try them my self

    • Anne,
    • April 27, 2011
    / Reply

    You are right. Any business should have a website to showcase products and services to online viewers. It is an effective idea to attract more people in quick time.

  10. / Reply

    yep, presented portfolios are creative ones. They could be great examples for those, willing to make own.

  11. / Reply

    Hello Alexander:

    We struggled with the best way to display our completed work. We went back and forth with the layout of our portfolio. We started by listing 8 projects on a given page for a total of 6 pages and provided pagination but soon discovered that most people did not go beyond page 2 or 3. After a lot of experimentation, we concluded that the best way was to list all our projects on one portfolio page and let the visitor decide what sample site to visit. We also added “Featured Projects” on internal pages that allow visitors to navigate to our portfolio.

    Thank you for sharing this information.

  12. / Reply

    I’m glad everyone enjoyed the article! :)

  13. / Reply

    Really nice article Alexander, very useful! In my opinion, it is always important to keep honest when mentioning your skills or showing your portfolio. Never say what you can not do.
    Taking the advantage of the related topic, I have written an article ( http://tinyurl.com/6k5hfm5 ) about skills in web development. It is more a general view, not focused only on web design, but in the daily process of development.

  14. / Reply

    Illustrating all your skills and services on your portfolio is important. Your portfolio itself can be a good way to demonstrate your coding and design skills. I’ve gone on to sites and seen elements I like and then later incorporated them into my own work, and this is sometimes the case with prospective clients. A good way of showing clients what your skills are, is by listing them, I know this is the obvious way; but if your rate your skills then clients can see whether your skill set matches what they are looking for. Also, don’t feel like you have to put every piece of work up that you’ve done, as a designer I’m sure there are some you’d rather keep in the closet!

Leave a Reply

Your email address will not be published. Required fields are marked *

Deals

Iconfinder Coupon Code and Review

Iconfinder offers over 1.5 million beautiful icons for creative professionals to use in websites, apps, and printed publications. Whatever your project, you’re sure to find an icon or icon…

WP Engine Coupon

Considered by many to be the best managed hosting for WordPress out there, WP Engine offers superior technology and customer support in order to keep your WordPress sites secure…

InMotion Hosting Coupon Code

InMotion Hosting has been a top rated CNET hosting company for over 14 years so you know you’ll be getting good service and won’t be risking your hosting company…

SiteGround Coupon: 60% OFF

SiteGround offers a number of hosting solutions and services for including shared hosting, cloud hosting, dedicated servers, reseller hosting, enterprise hosting, and WordPress and Joomla specific hosting.