Escapee Speaks: An Effective Portfolio Website Part 1 – Site Design
This article is part 1 of the series entitled 7 Elements of an Effective Portfolio Website, which aims to encourage Illustrators to consider some crucial features when building or refining their portfolio websites. You can find the rest of the series here.
Site Design
The primary element to consider is your overall website design. Whether you are building from scratch, or using some of the many online portfolio services (which I’ll highlight in the future), there are some basic concepts that you should keep in mind when creating the look and feel of your site. The reason that I am beginning this series with this element is that if you get this one horribly wrong, potential clients will leave before you’ve even had a chance to draw them in.
Clean and Clear
The last thing you want to do to a new visitor to your website is hit them over the head with an overwhelming jumble of noise.
They won’t know where to look, they won’t know where to begin, and the memory of the splitting headache you gave them will make them leave and keep them away forever. This is especially important on your Home page, where they are just getting their bearings and feeling things out. I advise getting rid of anything you don’t absolutely need, and that makes your site difficult to navigate or distracts from your brand, which brings me to…
A Consistent Brand
The look and feel of your portfolio website should be a cohesive representation of your style, and should give the visitor a feel for your work before they even make it to your gallery. This can be achieved through the careful use of your logo, header image, color scheme, typography, and any other visual elements in use.
Simple Navigation
You want to make it as easy as possible for people of all skill levels to make their way to the various sections of your site. In other words, don’t hide your navigation tabs with clutter and be sure to use common or obvious titles for your pages (Don’t call your gallery “The Laboratory of Infinite Inspiration” or something silly like that, for example). While personalizing your titles may be creative and interesting to you, it’s important to keep in mind that Art Directors look at a lot of websites everyday, and they don’t have time to try to decode your sideways logic.
Flash vs. HTML
I could easily write an entire post on this topic alone, and perhaps I will in the future, because this is not only an important one, but is also a topic of debate for some Illustrators. In my opinion, I’ve heard enough people say (including myself) that waiting for a Flash page to load makes them leave a website immediately to convince me that Flash is a big no-no. Unless you’re an animator, Art Directors don’t want to wait around for you to dazzle them with special effects. Sure, you want people to remember you, but not for your razzamatazz. Like I mentioned before, they look at too many portfolios in a day to sit through a page that says “Loading…” Just get them to your site so that you can impress them with your Illustration work. That’s the service that you’re really trying to sell, after all.
The Bookmarkable Site
In general, the idea is to get someone to hire you, or at the very least, bookmark your site so they can follow your work. If you have a clean and clear design with a noticeable and consistent brand, simple navigation and an overall positive experience, you will present yourself as a professional, and you’re more likely to keep them around long enough to impress them and call them to action with the other elements that I’ll be discussing in this series.
Escapee has spoken.
Now it’s your turn to share.
Do you agree with these concepts?
Have you seen websites that made you leave right away, or ones that impressed you with their design?
Where do you stand on the Flash vs. HTML debate?
Is there anything I’m missing here?
Read Part 2 of the series – The Gallery.
Read more of the 7 Elements of an Effective Portfolio Website.
Read More Escapee Speaks Business
Who is this Escapee guy anyway?
Follow EFII updates via email or RSS.
Trackbacks
- Illustrationmundo.com A blog dedicated to illustration » Blog Archive
- Tweets that mention Escapee Speaks: An Effective Portfolio Website Part 1 – Site Design « Escape From Illustration Island – Illustration Resources and Community -- Topsy.com
- Un portfolio online efectivo: Parte 1 « Martin Blanco Studios
- 15 Tips on a Strong Portfolio Website
I agree. Simple is key.
I agree with letting your artwork speak and keeping the website design simple.
My concern: are templates okay or do they look unprofessional?
I’m looking forward to this series. Thanks for sharing!
Hello Heather. I think templates are fine, in fact I use one at http://thomasjamesillustration.com. If you’re going to use a template, I recommend finding one that is simple and allows as much customization as possible. That way, you have room to inject your own creative personality into it.
Templates don’t look professional unless:
1. You choose a silly, gaudy template
2. You make it look unprofessional with clutter and confusion.
I hope this answers your question, Heather. Thanks for commenting.
I designed my website and its the first one i ever did.
Does anyone feel its going against the points mentioned in this article
http://www.pratikart.com
Pratik
Hello Pratik,
Nice Illustration work, and I think you’ve got the right idea as far as a simple, straightforward approach. One thing that jumps out at me is that a couple of your menu tabs open new pages without a link back to the Home Page. This really isn’t a huge deal, but it’s always a good idea to make it painfully obvious how to get back to the main menu.
Thanks for posting your question.
Anyone else have any feedback on Pratik’s site?
I agree that it is simple, to the point and nicely done. The ability to easily navigate to the different areas is great.
The only thing I wanted to point out is that some people (like myself) use Noscript. This blocks things like Flash on websites you’ve never been to, unless you turn it off for that site. This is useful in blocking viruses which can come from flash and anything that uses scripts.
When I went to Pratik’s page, his entire navigation was blocked because it was all flash elemnts. I’m not saying this is bad but my point is that while I personally just went ahead and allowed scripts on Pratik’s site, a more wary AD might not.
Of course this is highly situational but I figured i’d bring it to attention anyway since it relates to the article.
This can be handled as well, I think. My site sends no-flash users to a regular HTML page. The pictures don’t load as fast and it lacks the slick look, but it is a regular page for those who prefer to the Internet on training wheels (only kidding – playing it safe on the Net is wise).
The use of a flash page doesn’t make it all or nothing if it is layered to respond to what the visitor is using.
–Duncan
=====================
See my book cover illustrations at: http://DuncanLong.com/art.html
i’m in the process of doing updating my website (it’s slow going, i’m best at procrastinating.) one minor thing i’ve decided is that my contact information does not need it’s own page that the viewer has to navigate to. the title/heading area has the site name, my name, the city i live in, my phone number, and my email address. also, there are links to my twitter, linked in, my blog, and a google search to my name. likewise, there are headings for illustration, graphic design, photography, and to my c/v (or there will be, i haven’t built that button yet). so at a simple glance, a viewer will be able to see my name, and that i’m an illustrator/designer living in brooklyn, how to get ahold of me, and where to find out more information about me. and the area does not look too busy or cluttered. in fact, i’ve done away with the concept of writing a bio about myself, let alone giving it a whole separate page. most details of my life are a) irrelevant and b) easy to find out. i’m no shrinking violet. it’s easy to find out a lot about me with a simple google search (which, i’ve mentioned, i’ve included a link to directly on my page). and not only all that, but all of these things will be at the top of every page of my portfolio site. i mean, if an art director is looking at your site, sees an image he/she likes, the last thing you want to do is make that person navigate away from what interests them to a whole new page that has little more than a phone number, which really only takes up a tiny amount of space on any given page anyways. or maybe i’m just an extreme architectural minimalist when it comes to portfolio sites.
Thanks for your comments. I agree that it’s a good idea to try and have your contact info in a prominent place on every page of your site. It is important, however, to remember that some people are used to looking for a contact page, and the best reason I know of to have a dedicated contact page is to have a contact form that they can fill out right away, rather than copying your email address and going to their email to contact you.
Also, the thing that would concern me about a Google search option instead of an About page is that you are potentially sending them away from your site, where that all-important contact info is, not to mention the fact that it is usually best to have control over the info you want them to know about you in that moment.
Any thoughts?
I’ll be going into these ideas and more in future parts of the series, and I’d love to hear what you think about them, so stay tuned!
I have to agree that it might not be the best idea to leave off the contact page. Today I was talking to a savvy web user who couldn’t find the phone number to call godaddy. Yet it is right at the top of every page. When you design a webpage you have to consider the users expectations.
Powkang, I think you’ve outlined a very good point.
Clients are still asking me to do a contact page and it irritates me. Call to action is a key point (made earlier) but I feel a contact page is a dated example of this.
I like to work on the theory of “in a rush” or “got more time”. What I mean by this is by designing a home page that has almost all the info you require on it, is aesthetically pleasing & uncluttered – there isn’t any reason to navigate away from the page, unless you want to (“got more time”).
Call to action is the most important thing on a website. The reason you have built your site is because you have confidence in your work so the only thing left to do is market it and sell it.
I tend to look at online shopping sites for good examples of call to action.
Hello Steve,
Those are some great thoughts. I’ll be giving my take on the concept of a contact page in future parts of this series, but one think I’ll say (as I touched on in my response to Powkang) is that the best reason to have a separate contact page is to have an actual contact form that the potential client can fill out right away. So, you catch them in the moment that they are considering getting in touch with you, rather than the extra steps of emailing you.
You mentioned looking to online shopping sites as an example, which I think is great, and I believe most of these places usually have a contact form for this reason.
I might agree with you on the concept of a contact page being dated if it wasn’t for the benefit of a contact form.
What are your thoughts on this?
Another 2¢
Contact forms are good, especially if you make them a short “Quick Contact Form” – I always try to come at it from the “What would I want it to do” place. Having good action text in the fields and the submit button does a lot to encourage users to convert. Giving them a reason to convert makes even more sense.
Ultimately though, my thinking is moving toward not having the form (graphically) on every page – as this is often giving away valuable real estate on something that may only bring .05-1.0% conversion rates globally. That spot might have a more effective element/conversion pushing traffic somewhere on the site.
As for the dated concept of the contact form, I have been developing more and more internal robust landing pages for these kinds of conversions with anchor text links and smaller call-outs/buttons “on the page” doing the heavy lifting of making the user aware of ability to contact the site. Having a robust inner landing page allows you to build-in a clearer or stronger offer or allows you to dial-in the kind of persona who should be filling out that form (qualifying the lead) – plus users are not used to landing on a rockin’ landing page with a form – so they get the drama even if they’re only there to drop you a line.
It’s a win-win.
Just thought I’d throw this in. From a business sense having a contact form is a great way to capture data, allowing you to keep these people informed of offers/latest news etc that you provide. They say it takes 5 times of contact before people buy. What better way than with informative emails/phone calls/letters.
My input over. Look forward to seeing the rest of the series.
Kev
I totally agree !Indeed my and my boyfriend website would need to redone:)
Now Hear This
This point is very important:
Flash vs. HTML – I could easily write an entire post on this topic alone
and The Escapee should write a blog post, but not for the reason stated here (load-time) rather the reason to avoid Flash when all the content is locked in Flash sequences is that search engines have a tough time (currently) managing, contextualizing, and parsing the content they are able to extract from these files. Indexing and “parsing” are two different things – like seeing and recognizing are different. Most in the community agree that Google can now pull the content out of the Flash files, but treats what’s there like a bucket of alphabet soup. what’s still missing is the hierarchy and the context of that content.
There are ways around this: programming your site in HTML and embedding Flash into the site as rich user experience seems to be the primary way most enterprises and designers who need/want to bring in more active content prefer to go. In any case, Splash Pages that have all kinds of elaborate graphical elements in Flash development that require long load sequences are to be avoided for two reasons: user experience suffers when the user tires of waiting for the content and, from a more global perspective, the search engines may be passing you by when they spider your site hurting your SERP results.
Check this site from time-to-time to hear news from Google on this issue: http://bit.ly/_Latest-Google-Word-On-Flash-Indexing
SB
Thanks StevieB for raising a great and well-stated point. I’m not going into search engine optimization in this series because my focus at this time is more on the visitor’s experience once they actually arrive at your site. That being said, I think page load and SEO are both good reasons to avoid Flash.
In the future I’d love to invite a guest writer with more expertise than I have on SEO to tackle this topic. If you’re interested, let me know.
Thanks for helping to add to this discussion and sharing the link.
Thomas
I’m in – just let me know when you need something -or- if you want a different angle on something you’re tackling. Thanks for the holler.
SB
Hey Stevie B,
Can you send me your contact info? http://escapefromillustrationisland.com/contact/
I think flash home pages are sudden death. BUT flash galleries can be quite different. The one I use pre-loads pages and is much, much faster for the viewer, as well as for setting up a new gallery (enabling me to keep it current with very little work).
I think the idea that flash pages are always slow or a bad idea is just plain wrong.
–Duncan
=====================
Freelance illustrator for HarperCollins, PS Publishing, Pocket Books, Ballistic Media, American Media, Fort Ross, Asimov’s Science Fiction, and other publishers. See my illustrations at: http://DuncanLong.com/art.html
and download my newly illustrated copy of “The Raven” for free at: http://www.datafilehost.com/download-2c8ed3c3.html
Agreed. If people arrive at the home page and then want to see more, they’re more likely to stick around a bit longer. Flash is a great tool for animation/galleries etc, but it’s getting people there that’s the hard part.
Kev
I agree with you Escapee as many people have so much going on in their website that you don’t even know what they are selling or what services they offer.
In addition, they make it extremely difficult for the user to make any contact… no phone number, etc.
A website is a communication conduit in that you have on one hand the user who is looking to for information. On the other hand you have the company or organization that the website represents.
A good website makes this connection work… a clean look, easy to nagivate, a clear message and the ability to make an easy contact.
Hello Marcela,
Thanks for your comment. I’ve seen too many websites, and even promotional materials, that fail to feature their contact information in a prominent place. This is such a small detail that can mean the difference between someone contacting you or not.
I agree – simple is best. In my opinion the best illustrator’s websites intergrate their illustration work into their design. This could be as simple as having a text menu and heading to one side, and a good illustration next to it. Like the sites built with Indexhibit – http://www.linziehunter.co.uk/
Or, something like this one: http://www.jesse-lefkowitz.com/
You have all the important information on the top there, name, email, number, etc. followed by a menu, and then some pieces of work. And it looks good!
If this is your professional portfolio and art directors are looking at it, you can’t go wrong with simple, easy to use, and clean presentation. They just want to look at the work after all and if they have to click a billion things to find it, then they will probably lose interest pretty quickly.
I’m in the process of making a personal site with my blog and all that sort of stuff on it, which will be seperate from my portfolio site. If the people I direct to my portfolio are interested in seeing more different work and learning a bit more about me, then they can look at my personal site if they choose to :)
Thanks for sharing those links, Melanie. I definitely feel that a direct approach gets the message across a lot more effectively. Sometimes it seems that artists who don’t have confidence in their work are overcompensating with a lot of busy distractions.
Thomas
check out this guy’s site: http://www.omgjhq.com/
having the text gives the work context and gives the search engines something to work on.
SB
I just recently got my web site up and running. I’m going to compare what I did to some of your comments. This was a helpful post. I’d appreciate any feedback on how my own web site compares. Comments anyone?
http://www.pennylockwoodehrenkranz.yolasite.com
Thanks.
Penny: I would suggest you try to get more of your text “above the fold” toward the top of the page. Unfortunately many visitors don’t take the time to scroll before leaving a page if it doesn’t interest them. So moving the material that “sells your product” up on the page would be a plus. Also, it is hard to see how to contact you if someone wants to hire you to do some work for them.
–Duncan
=====================
Freelance illustrator for HarperCollins, PS Publishing, Pocket Books, Ballistic Media, American Media, Fort Ross, Asimov’s Science Fiction, and other publishers. See my illustrations at: http://DuncanLong.com/art.html
from one of the worlds leading ADs (Irene Gallo), ADs need bookmarkable and emailable links of images from within your website. if your Flash presentation does not give you this option and AD like her will skip you. She needs to be able to send links of your images, and possibly individual images to other ADs and supervisors. If she can’t she won’t bother, unless your a Donato or Manchess. And i can’t believe other ADs would differ from her opinions and work flow to much degree. And she has said if i remember correctly that she hates Flash. So, no flash for me.
I have private html pages, prints, and PDFs that I send to art directors. My flash pages are for other artists, writers, and small publishers – basically people I want to see my artwork and make an inquiry.
Bringing me to… Another big plus of flash for general viewers is that it discourages the theft of artwork. I can’t tell you how much time I wasted, and how angry I often became, tracking down and issuing take-down notices because some kid or dingbat posted my artwork without permission (sometimes claiming it as their own). And I also hated doing this since many times the person didn’t understand the law).
The flash display has all but done away with the problem of theft by all but the most blatant of people who obviously know it is wrong.
I am open to arguments, but to date my flash galleries are much faster (and how many would-be clients leave rather than wait for a picture to load?) and the flash display secures the artwork better, at least when it comes to the casual viewer.
–Duncan
=====================
Freelance illustrator for HarperCollins, PS Publishing, Pocket Books, Ballistic Media, American Media, Fort Ross, Asimov’s Science Fiction, and other publishers. See my book cover illustrations at: http://DuncanLong.com/art.html
and another thing! Flash does not work on many smart phones.
That’s because apple is the devils work
Escapee, I simply loved your post a lot! I am falling short of words to express how much I liked it. The way you have explained and put your points forward is simply intelligent. I totally agree with you that Flash sites take very long to load and the visitor leaves the site before it can open, therefore I too prefer HTML sites. Eagerly waiting to read your upcoming posts. Good job!
HI thomas james. I recently just redid my illo portfolio site and wanted to get your opinion on it..
http://www.mitchlana.com
I love your site by the way! I am a follower now on your tweets as well! take care!
-Michelle
I really like the site. I’d like to know how you get the image to appear in a new flash window when you click on the images. I havn’t written a lot of code myself and this is the main thing I’d like to know!!
Your theme has a nice consistant feel.
One question. Can someone elaborate on the section where it says
“The Bookmarkable Site
In general, the idea is to get someone to hire you, or at the very least, bookmark your site so they can follow your work.”
How does one go about doing this?
Thanks for your question, Julie,
I’ll expand on that topic next week. Stay tuned.
Thomas
A note on Flash sites. I build my whole site in Flash, more so to reacquaint myself with the Flash environment but the vector look and feel I chose worked well with it.
On load times- Mine isn’t bad. I built several .SWF’s and used the loader class, so smaller amounts of content are being loaded in at a time rather than one big call to load everything in at once. I am in the process of re designing a few pages and setting it up for Flash player 9. I’m getting some feedback on flashing currently with versions older than 10.
On SEO – I have recently finished school and was aware Flash lacks quite a bit with SEO. I would rather have the control over clients at first just starting out. The beginning will be filled with friends and family anyways. Or consider a Flash/HTML hybrid, and optimize what you can on the HTML side.
On mobiles- I have no experience designing for mobiles.
With anything, you make decisions based on the needs for the project, not just “because”.
If SEO is important, yes Flash is a bad option. If handled properly, load times can be trimmed down. I plan to redesign in HTML soon, to use the Javascript and AJAX I am now learning. Things don’t always have to be “all or nothing”.
I agree with most points. I have also made my site completely with Flash. I have done it 3-4 times now, each time trying something new. Loading time is a BIG thing to conquer ESPECIALLY for a site loaded with pictures and artwork. You must write your code so that it pull images off the site… not embedding pics into the swf file itself. My site used to take over 2 minutes to load. Now it it about half a second! More flash vector work, less embedded pics.
I still need to learn how to plan a bit more, and make more of a “Clean” look (and I need to finish placing artworks in it :P )
If you would like to take a peek here it it……………. http://www.darkseal.com
Any and all advice, C&C, always appreciated!!
I found simple html works best. I was going to update my website ages ago so added a placeholder site so I have something up but now the ‘holder’ site has taken over as it is easy to use and clean. I still want to redesign the site one day but work alweays seems to take over.
You can get round loading times with flash sites but I only use them for educational multimedia now, not my illustration work.