If you need a little inspiration for this undertaking, we’ve got a few amazing websites to show you. These agency sites are exceedingly well made, so see what you can learn from these impeccable designs.

Dogstudio

Dogstudio nails its branding by designing a website around its wolf-like character. Everywhere you explore, the beautifully animated dog follows you, changing color, rotating, and moving around the screen. It’s an amazing display of interactivity and 3D web animation.

Everest

Design studios have lots of content to show off, so it’s important to have good navigation. Everest does it right with a beautiful and functional homepage that takes you through the company’s work. Click something you’re interested in and it smoothly transitions to a whole new area to explore.

Rally

If you’re not sure where to start with a design, try using consistency. This studio’s homepage is made up of a spiral that changes color as you scroll through each project. The colorful ribbon remains on other pages and stretches as you navigate between them.

Okalpha

Websites for agencies are often dark and serious. But that doesn’t mean you can’t have fun with your design! Okalpha’s site is bright and colorful, with a flat look and cartoonish hues. It’s the perfect fit for an upbeat animation studio.

Canvas United

This site is all about clean and interesting UI. There’s plenty of elegant hover and transition animations – even the loading screen includes a beautiful animated logo! The flawless UI design leaves a lasting impression of quality and grace.

Feral

Many websites opt for digital icons or photography rather than illustrations, but Feral’s website proves that they have a place in web design. Lively sketches are scattered absolutely everywhere, and it makes the site seem unique and personalized.

UIX

Studios need a good portfolio, and UIX does it perfectly. Widescreen images allow you to get a good look at their work, with quick animations keeping you interested in the content. Short paragraphs and impactful blurbs are broken up with more visual examples. It allows you to get an in-depth look at their design choices and see if the company is the right fit for you.

Prokhorov Design

For portfolio sites, a simple but strong design often works best. This site uses a background of particles that shift into different shapes, while also leaving a comfortable amount of space. Click on a project and the site becomes much more compact as it takes you through the creative process of designing an app.

Visual Soldiers

Content-packed boxes make up this website’s design with links and articles appearing inside them. Click one to explore this colorful site as you navigate through portfolio pieces, articles, and videos.

Hoffman

Nothing hooks people more than a charming intro video, and there’s plenty of interesting photos and videos to be found on this website. Explore to learn more about a company’s branding campaign, and be stunned at the perfectly synergistic design.

Rise

Though many brands’ websites go over the top with flashy elements and animations, clean and simple design shouldn’t be forgotten! Rise uses space and simplicity to create a breathable website that uses contrast to call attention to important areas. It’s a solid look that gives a sense of reliability.

RFTB Creative Digital Agency

If one site inspires you, it should definitely be this one. The building music and slowly scrolling video background create a sense of wonder and curiosity. Follow that up with other great background videos, leading you to plenty of interesting excerpts and you’re already hooked.

Creating Gorgeous and Professional Websites

When you’re creating a site for a professional studio, your main goal is to hook potential customers – and a website that’s beautiful and inspiring is more likely to charm visitors and get them interested in the company.

These twelve great website examples gracefully capture their agency’s vision, all while creating a site that’s easy to navigate and fun to explore. There’s a lot to learn from these designers.

Carrd

Carrd is a one-page site maker that uses a super straightforward interface to help you set up your portfolio. If you’re looking to create something elegant and minimalistic, you’ll love this. Many builders can be overwhelming before you get used to them, but Carrd is easy to use right from the get-go. Just pick a theme and click one button to add elements.

There’s a really cheap Pro version, which offers various forms, custom domain compatibility, and custom code + third party widgets. At $9 a year, this is about as affordable as it gets. However, all the core features are free, so feel free to test it out and even publish your website.

Mobirise

An offline web builder solution for Mac and Windows, Mobirise allows you to easily create mobile-friendly websites. It was specifically designed to be as easy to use as possible for non-programmers and visual thinkers. If you’re new to this, try it out.

Once you’ve finished putting together your website in this block-based builder, publish it for free wherever you want. No domain? Mobirise can publish to Github Pages at no cost to you.

About.me

Simple and professional, creating an about.me website is a great way to introduce yourself. Just type in some info about yourself, pick from one of three clean themes, and you have a mini portfolio! From there you can customize the website further, changing text and adding links. There’s also a nifty email signature feature, which adds your about.me as an email signature.

The Pro version has various other features, testimonials, image and video embeds, messages, appointment scheduling and newsletter building. With the free version, you can still build a professional biography.

WordPress

If you’d rather do it yourself than use a simple website builder, but don’t have the technical know-how to create a website from scratch, WordPress is probably the solution. Choosing a one-page WordPress template still gives you something to work off of, but you’ll be more in control of your website’s appearance. And there’s hundreds of thousands of themes – no website builder can boast that.

Customizing and making it your own may require HTML and CSS knowledge, and you’ll also need to handle hosting, domain and WordPress installation. WordPress itself is free and open source, but these aspects will probably cost money.

Diving blindly into WordPress is not for the faint of heart, but if you’re up for a challenge, this might be the solution for you.

Wix

Wix is considered by many to be similar to WordPress, but much easier to use. Its interface is intuitive enough, and setting up and publishing a website is super easy. There’s a ton of functionality in this builder if you’re willing to learn it.

The free version of Wix allows you to create and publish your site under a Wix domain. Premium plans let you get a custom domain, remove Wix ads from the site, or add apps, but it isn’t necessary to make your portfolio public.

Persona

Persona does absolutely no beating around the bush. Just click to get started, pick a theme, and start editing. The WYSIWYG editor is super powerful. It takes some adjusting to, but once you have the hang of it, you can create basically whatever you want.

However, note that you can only create a private Persona without upgrading. If you want to publish your portfolio, it will cost a relatively cheap $24/year or $4/month. Trying before you buy will at least let you know if this is the right tool for you.

Building a Simple One-Page Portfolio

Never underestimate the power of a one-page portfolio. A site that’s too complex can drive away potential clients, especially if you can’t hold their interest long enough to direct them to the contact page. But a well-crafted one-page website is concise and gets the point across quickly, while still showing off your skills to visitors.

And in a smaller sandbox, you have more reign to creatively show off your design expertise. One-page portfolios tend to have some of the most interesting and well-made layouts in web design. With a single page, you can make your site less like a static webpage and more like an experience sure to thrill anyone who comes across it.

Looking to create your own one-page portfolio? Here’s a bit of inspiration from some of the best designers and developers online!

Owltastic

With a charming duotone palette and beautiful starry space theme, this is one fantastic example of a one-page site. There’s plenty of links to case studies, past projects, and the designer’s social media accounts. Frequent use of a call to action leading to the contact form means that clients won’t ever have to scroll far to send a message.

Gordils & Willis

This portfolio wastes no time at all in diving into the project showcase. As you scroll, you’ll get to see various pages, logos, and parts of the UI that were designed for each website or app. If you’ve seen enough, just use the menu to snap to the bottom, or click the hovering email button that’s always on the left.

BRNDMKRS

Big ideas need a big website, and this full width page features huge typography, large videos, and full screen images. There are even a few interactive elements, like a service checklist that lets you see an estimated cost for what you want.

Ollie

Bold and dark design are what this portfolio is all about. The black background makes the more colorful images pop, and the custom cursor is a nice touch. This one is a good example of an image-focused portfolio without too much text.

Aristide Benoist

Gigantic text is certainly one way to grab attention. Once you’re interested and start scrolling down, you’re immediately introduced to the developer and his work. Hover the image and you’ll get a taste of this dev’s experience in interactive design.

Portfolio of Oliver Gareis

Oliver Gareis’ portfolio opens with a brief about and awards section before getting right into the portfolio. Each project includes a brief description of what the designer was going for, showing off his expertise. There’s quite a bit of content, but you can use the sticky header to scroll right to the contact info at any time.

Kevin Dunbar

One of the best parts of this portfolio is the bright white design, accentuated by a single splash of color that strategically highlights certain areas. The red draws attention to banners, links, and contact info against the white and gray background. Meanwhile, the portfolio section uses animations to the same effect.

Unlikely

The moment you enter this site, you’re plunged into a page of striking animations that are impossible to ignore. Text flies dramatically to your cursor, loading screens shake, and project videos play in the background. Unlikely makes a bold statement from the very beginning.

Green Chameleon

On sites like this, it’s easy to forget you’re on a webpage. Animations play and hovering images ripple and distort as you scroll. It’s more like exploring an art gallery than visiting a website.

Amazing One-Page Designs

A one-page website is a bit like a business card. You need to explain who you are, what you do, and why an employer should choose you, all in a small amount of space.

It takes a lot of skill and design expertise to build something that gets the point across while leaving room for inspiring design, but these people pulled it off perfectly. Now it’s your turn to create your own inspiring one-page portfolio.

So, what impact should this have on how you build out your portfolio? It can actually depend a good bit on the types of projects you’re looking for.

With that in mind, let’s take a look at some considerations for targeting your portfolio towards the intended audience.

Detailed or Not?

If you check out the portfolios of other designers around the web, you’ll find a wide variety of styles and levels of detail. Some offer in-depth case studies of the process of taking a website from concept to finished product. Others are sparse and let the work speak for itself.

Is one approach better than the other? Again, this is where your intended audience comes into play.

If you’re looking to book large, high-paying projects where you want to demonstrate the full spectrum of what you offer, a more detailed portfolio may make the most sense. This could be especially important if you do a lot of custom development. Potential clients will be looking to see how you get things done and will want to have a more complete picture of what’s involved.

This is also a scenario where case studies or project profiles can be a big help. If you go this route, try to write them all in a similar format and point out any specific challenges you helped solve. This offers some solid proof that you’re an expert in your field.

Alternatively, many feel that a simple listing (text or gallery-style) of projects is enough. If your goal is to show off your great design skills, a strong visual may be all you need to get people’s attention.

Projects to Include (and Leave Out)

Whatever approach you’ve chosen, all portfolios require a selection of projects. That’s right – a selection. We often think that, just because we’ve completed a project, it belongs in our portfolio. But this may not be the most effective way to go about it.

For instance, if you’ve been in the web design business for a number of years, you will probably have some projects that haven’t been touched in just as long. You need to ask yourself: Is this really relevant to what I’m doing now?

Not only will some of these older projects utilize outdated technologies, they will also send the wrong idea regarding what you do. If you’ve moved on from static HTML to working with a CMS such as WordPress, then it’s probably not worth posting sites built via other means.

Keep in mind that portfolios are not just about the past. Prospective clients view them to get a sense of what you can do for them in the future, as well. Knowing this, it’s worthwhile to consider which of your projects will help you with regards to gaining new clients down the road.

This doesn’t mean that all projects that reach a certain age are irrelevant. If you’ve done work for a major brand or did something that you consider groundbreaking, it’s okay to leave it in. The idea is to weed out anything that doesn’t fit with the narrative you’re trying to establish.

Other Essentials

We’ve established that the projects we list should be relevant to where we’re at in terms of our business. But it’s also important to think about other items that are of interest to potential clients:

Industries You Service

Many times, people will want to see that you’ve worked on projects that are in their industry. If your business tends to work with a variety of different types of businesses, you’ll want to reflect this in your portfolio. For those who have a large project list, the ability to filter by category is also a nice touch.

Likewise, you may specialize in a niche that only covers a specific industry or two. Again, showcase your best examples here and leave out anything that doesn’t apply.

Mobile Friendliness

Responsive design is pretty much the default these days. But it’s still important to emphasize that you’re skilled in this area. How you do so is really a personal preference.

Some designers will provide the obligatory mobile device mockup, which is great for demonstrating how a site would look for mobile users. Another approach (and perhaps even more important) is to ensure that your portfolio itself looks great on mobile devices.

As we know, there’s no guarantee that visitors will view our work for the first time from large desktop screens. In that case, it’s good to put your best foot forward – regardless of screen size.

Showcasing the Best of What You Do

Above all, your portfolio should be used as an up-to-the-minute reflection of who you are and what you do. That means keeping it both current and relevant to your business. It’s something that should change with you over time.

While style is important, content is an even greater consideration. Whether you currently have a portfolio or not, take some time to consider what will paint you in the best possible light and help you get the types of projects you’re after.

There are so many amazing portfolios out there to draw inspiration from. If you’d like to explore and learn from the work of your fellow designers, you’re going to love this list. These are the portfolios that get it right!

We Ain’t Plastic

We Ain’t Plastic definitely leaves its mark. Its subtle effects, animations and images all come together to create a website that was obviously crafted with love. It also gets right to the point, careful not to overload you with too much information.

Melanie Daveid

This beautiful one-page portfolio proves that simple-but-strong design is often the best way to go. The perfectly elegant animations are the most memorable part of this website, alongside the dynamic layout.

Steve Mengin

Stylish and well put together, navigating this portfolio is no less than delightful. Every animation looks great, and though many navigation elements are fairly unique, getting around is very intuitive thanks to fantastic UI design.

Gal Shir

Fun animations and colorful images quickly bring this site to life. You won’t be able to stop scrolling, stopping to see each animated image. And a pretty parallax effect brings the site to a satisfying end.

Portfolio of Nathan Riley

This dark, modern website is filled with all sorts of fun little details, animations and browser interactions. Discovering them all is a joy. You know this is a designer who loves his job. Click to see the projects and you’ll get some interesting behind-the-scenes info on design choices, too!

Jack Jeznach

Everything about this website indicates excellency at both style and skill. There’s so much attention to detail that it’s astounding. As you navigate the well laid-out portfolio you’ll be constantly driven to keep exploring and learning more about the developer.

Weightshift

What’s better than a collection of case studies so nicely presented? Scroll through the clean, brightly colored website and check out the examples to see a short demonstration of the company’s past work!

Timothy Achumba

This portfolio uses a pleasant block-based layout that’s easy to navigate on any device. Images are the focal point, taking up a majority of the screen. What text there is tells you exactly what you need to know.

Friends

Here’s one reminiscent of a business card: Sophisticated, beautiful and simply but carefully designed. There are plenty of case studies to learn more about the company and its methods. Nothing is better than understanding your designer’s goals and processes.

Baptiste Ringot

This is a portfolio made with readability and ease of navigation in mind. There’s a lot of content and past work, but text is frequently broken up by interesting images of past design projects. It’s simple to navigate the sections. And the slight change of background color as you scroll is a nice touch.

Youandigraphics

A beautiful palette, unique layout, and cute art and animations certainly make this a standout website. Looking at this portfolio, you know the designer truly has an artist’s eye.

Amazing Portfolios by Designers

There’s nothing more inspiring than a skilled web designer’s portfolio. Experts and innovators are always pushing the limits of what a website should be capable of, with portfolios that skillfully display their mastery in design.

Which portfolio was your favorite? There’re just too many awesome ones to choose from!

Still, the ideal portfolio really is a matter of personal preference. It’s a good idea to think about what you want people to learn from your projects. Is an image enough, or do you want an in-depth profile of each project? Maybe you’d prefer a hybrid approach, with specific projects being highlighted with extras while others are just a simple listing. It’s all up to you.

There is a number of exciting WordPress themes out there to help you create your perfect portfolio – no matter which style you opt for. Here are 10 of our favorites for displaying your projects in style. While the main focus will be on their portfolio capabilities, we’ll also mention some other goodies where appropriate.

All the WordPress Themes You Could Ask For

2M+ items from the worlds largest marketplace for WordPress Themes, Web Templates & Design Assets. All of it can be found here at Envato Market.

DOWNLOAD NOW

Büro

Büro features 15 different home page designs with a variety of portfolio layouts to choose from. Standouts include the boxed goodness of the Portfolio Gallery and the tall, thin look of the Carousel.

You’ll also want to check out their Wide, Masonry and Animated Showcase options. The theme also sports lots of customization possibilities, along with copies of Visual Composer and Revolution Slider. This is a great choice for designers looking for a unique portfolio offering.

Visual Arts

Visual Arts is an image-driven theme that you can use as a vehicle for displaying your work. Choose from several portfolio listing and single item layouts. Listing styles range from long-scrolling pages with full-width images to neat and clean cards.

Single items can consist of image galleries, long text, carousels or a combination approach. There are a number of outstanding hover effects to add that extra bit of flair. Also take advantage of 15 customizable header styles included with the theme.

Futrus

Futrus makes great use of color, along with a filterable portfolio to ensure that your projects stand out. There are four home page layouts to choose from, including a mesmerizing full screen layered portfolio with custom background images.

The result is a site that enhances your work all the more. The theme is based on Bootstrap and includes a page builder.

Eagle

Eagle is a great fit for those who want their portfolio reflect minimal styling.

What you get is an animated, filterable masonry portfolio that includes more information upon hovering. From there, it’s on to a project description page featuring a large image and the opportunity to add text. It’s very basic and allows your outstanding work to do all of the talking. Overall, it’s an understated and professional look.

Minikini

Minikini offers a minimal look, but with a more robust set of options. There are five home page layouts to choose from, along with lots of different portfolio looks. You can choose from Card Box, Card Full Wide, Masonry Box and Masonry Full Wide styles.

But you can also customize the amount of columns per row to get things just as you want them. Also included are header/footer variants and compatibility with the free LayersWP page builder.

Maestro

Maestro gives you five beautiful portfolio layout styles including Brick Wall, Half Squares, White Canvas, Vertical Slides and Classic Grid. Brick Wall is unique in that it alternates image widths in a two column layout.

The result is a gallery that looks just like its name. You’ll also find lots of customization options, beautiful page transitions and a copy of Visual Composer.

Jora

Jora brings a retro artistic flair to your portfolio site. It adds off-kilter frame borders and hover animation to portfolio listing images to create an attention-grabbing effect.

Individual portfolio posts feature bold use of shadows and borders to make photography stand out. This is one of the more unique approaches to a portfolio site you’ll find. Jora is easy to customize, with multiple color schemes available to match your taste.

Union

Union makes great use of screen real estate, with left-side navigation and plenty of room for images. Several portfolio grid styles are available, along with a full-width slider. Customizable hover effects can bring a splash of color to listings.

Also included are a whopping 12 individual portfolio post styles to choose from. There is quite a bit of flexibility here that will serve designers well. The package includes copies of Visual Composer and Revolution Slider.

Diux

Diux harnesses the power of black and white imagery to add a high end look to your portfolio.

Your images can be automatically displayed in black and white, with a color version appearing upon hover. Special effects and animation add a classy touch and make the site appear lightning-quick. This Bootstrap-based theme also features video backgrounds and isotope filtering.

Eris

Eris is a portfolio theme that works best when used for a variety of project types.

It also offers some unique layout possibilities. You can use a standard grid portfolio or opt for a “Shuffle” layout that presents images in a more random fashion. Individual portfolio posts can feature one of three layout options. Other features include a “hidden” sidebar and two home page designs.

It’s Your Showcase

Proudly displaying your best work in an online portfolio is a great way to tell your story in more a visual way. While the themes above provide you with lots of choices, the most important aspect of a portfolio is that it reflects who you are and the quality of your work.

The good news is that, with so many great styles and layouts to choose from, you’re sure to find the perfect fit.

This area of web design is of particular importance to the overall aesthetic of the web and can give great insight into the direction that the current web design trends are taking.

Today, we’re going to take a look at some of the most recent web designer portfolio trends and showcase examples which implement these trends highly effectively.

Resume-Style Portfolios

Until recently, there was considerable focus on imagery on web designer portfolio sites. Now we see a shift towards more resume-style portfolios where the portfolio is a set of links to live products, projects, or previous companies.

This is likely, in part, a response to many companies looking for live portfolio work and projects, as opposed to pure visuals.

Floating Elements

Floating and randomly placed elements can introduce personality to a portfolio design. It signals a shift away from the very structured, template-like layouts that we have become so accustomed to (and quite truthfully now struggle to make a portfolio stand out).

It is particularly effective in combination with visuals such as past work or imagery.

Experimental color schemes

Likely a product of the brutalist web design trend, experimental color schemes are popping up more and more in web designer portfolio websites and producing some highly visual results. The schemes often involve gradient background colors, high contrast, and bright primary colors.

Unique spacing and layout

Many web designers are shifting away from the more generic grid-type layouts and defining their own unique layouts and spacing.

This has resulted in some truly unique results and make for some exceptional visuals such as in the example below. It uses a split layout while incorporating multiple text alignments, monochrome imagery, and vast areas of whitespace.

Diagonal scroll

Gone are the days of horizontal scrolling, and in its place is a far more usable alternative: diagonal scrolling. You can test it out here. A simple vertical scroll results in images that move diagonally across and up the screen, resulting in some lovely visual effects. It feels natural, sophisticated, and will no doubt catch on as the second half of 2017 nears ever closer.

Have you stumbled across any stunning web designer portfolios recently? Share them with us below!

If you’re looking for some options to get started, I’ve curated my 10 picks for the best portfolio plugins.

All of these plugins are 100% free to use and they work with the latest version of WordPress.

Portfolio Post Type

If you already know how to build a plugin, then you probably know how to make custom post types. But many people who launch a portfolio site using WordPress aren’t coders. And that’s fine!

This Portfolio Post Type plugin is free and easy to install. While it takes a little work to get going, it’ll eventually become like second nature. No coding is required.

The biggest learning curve is adapting to the dashboard for adding and editing portfolio entries.

At the time of this writing, the plugin is only in version 0.9 – yet it’s got over ten 5-star reviews. I have a feeling this one will be around for the long haul.

Easy Portfolio

If you want the full WordPress plugin experience, try Easy Portfolio. It’s dedicated to providing an interactive experience for users who visit your portfolio website.

Everything works through input fields on the backend. Just add your portfolio contents, fill in some data and hit “save”. From there, add the provided shortcode onto a page and you’re good to go!

This is probably one of the easiest options if you’re not too comfortable working in WordPress.

Portfolio & Gallery

Anyone who does visual work can benefit from a grid-style portfolio.

The Portfolio & Gallery plugin works really well for this, as it comes with over a dozen unique grid formats to pick from. They each have their own custom features like lazy loading, masonry formatting or custom pagination bars. Plus you can mix and match these features to suit your needs.

Visit the plugin page to check out a whole list of demo links. You’re bound to find something in here that will match the needs of your site.

TLP Portfolio

The TLP Portfolio plugin is one of the simplest options here. It’s also a “freemium” plugin – one of the many on this list.

“Freemium” means that it offers a premium alternative with more features. But the free version always remains free.

With TLP’s plugin, you get a handful of custom styles for grid features and page layouts. You can switch between them using different shortcodes and targeting which portfolio gallery you want to display. It may seem confusing at first but there’s a rhyme and reason here.

Take a look at their promo video to see this plugin in action.

Visual Portfolio

The Visual Portfolio WordPress plugin is actually very cool. It provides you with a complete portfolio editor where you can move things around on the backend without touching a single line of code. Features include a masonry layout for oddly-shaped items, infinite scrolling (or “load more” scrolling), along with custom filtering to make browsing easier.

Have a look at the live demo get a better idea of how it works. This plugin’s pro version is certainly fine, but I really think the freemium option is enough for most people.

Nimble3 Portfolio

If you want a mix of portfolio items with different grids, frontend features and a sidebar widget, Nimble Portfolio is for you.

Each portfolio item links to a full image displayed in a lightbox slideshow. This looks pretty darn fancy and gives you room to add a caption and outbound link if you want.

There are some optional add-on plugins you can buy from Nimble, but none are truly needed.

My only thought is that Nimble’s interface won’t work for everyone. It has a lot of fields and optional settings, so it’s not the simplest choice. Although it’s definitely one of the more powerful ones.

Advance Portfolio Grid

I haven’t used this plugin too much, but from what I have seen it’s just awesome.

Advance Portfolio Grid relies solely on a grid to display your work. This means you’ll find it far more useful if you do visual work (art, design, photography) rather than non-visual work (writing, coding).

Still, the portfolio layout is clean and easy enough to customize. And you can add tags for filtering your projects by company, style, date, etc.

Have a look at the plugin’s sample video to see how it all works.

Behance Portfolio Manager

Some designers and digital artists like to post their work on Behance. It’s a totally free portfolio/networking site and it’s one of the best places for sharing creative work online.

Thanks to the Behance Portfolio Manager plugin, you can quickly import all of your work from Behance into your fancy new WordPress website.

This plugin makes the process stupid simple. Even if you’ve never used WordPress before, this plugin is practically unbreakable.

It’s highly recommended for anyone who already has a lot of work posted on Behance.

Responsive Filterable Portfolio

What’s better than a fully filterable portfolio? One that’s also fully responsive!

The Responsive Filterable Portfolio is totally free and totally awesome. It has a cutting-edge dashboard that really gives you control over your portfolio without feeling too intimidating.

This is a plugin you need to see in order to fully understand, so have a look at their demo video before you form an opinion.

Portfolio Manager Lite

Portfolio Manager Lite is a plugin that’s sleek, easy to customize and just a real pleasure to use.

It won’t take very long to get the gist of how everything works. You can learn more on their demo page.

Note that this is also a freemium plugin, so you’ll find messages in the dashboard urging you to upgrade. You really don’t need to.

This plugin is strong enough to run on its own and you’ll get plenty of features to handle all of your portfolio needs.

There you have it – a whole slew of awesome WordPress portfolio builders to pick from. Feel free to experiment and find one that brings your portfolio to life.

How you set up your portfolio will either attract or shoo away your clients. So in this section, we gather some of the most helpful tips and advice to help you nail the portfolio that will get you clients.

1. Create Detailed Visuals – It Is Not Just about the Aesthetics

We live in a world where pictures, graphics, and anything related to visuals is very important. It’s true that words can help you create a mental image, but nothing beats seeing the image itself.

That is why marketers and advertisers depend a great deal on visuals when they launch a campaign – and what people see first, sticks in their minds. However, potential clients need more – when they like what they see, they would want to know more. In short, they want details.

That is why it is very important that you put forth something that will interest your clients. Make sure that your portfolio represents the skills and specialty you have in the best way possible.

On the other hand, if you are a developer, find a way how to showcase your work. If it cannot be represented by an image, make sure that you provide a clear and thorough explanation about the project.

2. Include How Long It Will Take You to Finish the Project

It is a very dynamic world we live in, where every minute counts. For business owners, time is synonymous with money. They have a goal where a short delay can mean a loss of profits. That is why clients want to know how long it takes you to finish a particular project.

This is one mistake web designers often commit. Because they are creatives, they tend to focus more on the project without regards to time. Their most common response, when asked about this, is, “it depends on the project.”

You should stop doing this and start looking at things from your client’s perspective – after all, they are the ones that are going to pay you. It does not mean that you become a “Yes Person” to your client’s every whim, but think that your client wants details as fast as possible. So learn to compromise and give estimates early because what you can do now, your client wants it done yesterday.

3. How Much Does the Project Cost

Realistically, most, if not all, clients have three criteria when looking for a web designer or developer – visuals, time, and cost.

They also need clear information about these three items as fast as possible. If your portfolio includes these three elements, you will save a great deal of your and your client’s time. Yours from answering the same questions again and again, and your client’s because they can get down to asking other important questions regarding the project.

With regards to pricing, it is up to you how much you will price yourself. Some points you need to consider when thinking about pricing is the competition – how much are similar designers charging; the time you will put into the project; and most importantly, the value you are bringing into the project.

4. What Challenges You Faced and Improvements You Made

The first three points are just the icing on the cake, but unfortunately, they are not the cake. The fourth point is the top layer of the cake because when you answered the first three points, your client wants to dig deeper and ask for more information.

Explain what the challenges were that you faced in the previous projects as well as the improvements you did. This will give them an idea what is involved in the process as well as your expertise in helping face the challenges and finding solutions.

Aside from the challenges, the client also wants to know what you can do for an already existing website. This is essential for the types of clients already have an existing website that they want to improve or develop.

5. Link to a Finished, Live Website

Showing the client screen shots and visuals of the project you’ve finished is good, but providing a link to a finished, live website is way better.

It holds more power and has more credibility, and proves to be a much better testimony. It also squashes all doubts whether it is a real project or not.

Live Project Link from FemmeFatale.paris

6. Provide a Creative Write-up About Each Project

Clients are people with emotions and won’t refuse or avoid reading a story, especially successful or inspirational stories. Thus, you give yourself an edge when you share an interesting story about each project you are involved in.

The story can be about how the client found you, how many revisions you did, the trial and error process that goes into it, and more. You can even include funny anecdotes while you’re doing the project.

If you happen to be involved in a popular project, or for a well-known client or brand, it helps you include stories about that client. It is a given that when you open up first, they will also begin to open up.

Design Process from MelanieDaveid.com

7. Explain What Your Role Was in the Project

Sometimes, you get involved in a project where you share it with another designer, or you were not able to finish a project. If this is the case, specify what your role was in the project instead of pretending that you’ve done it single-handedly. Give credit to whom credit is due.

Besides, the truth will come out sooner or later and when the client finds out that you are lying, then you have jeopardized not only the project but your reputation as well.

Clients value integrity and honesty. It doesn’t matter whether you play a small or a big role in a project. What matters is you are honest, which builds client trust.

8. Specify the Skills You Used in the Project and Which Industry It is In

This is the section where you can let your technical skills shine to impress tech savvy clients, that are specifically looking for a UI expert or Ruby on Rails developer. Here is where it is okay to explain what type of programming language, or software you used.

In addition, you can also include which industry the website is in. Specifics like this make it easier for the client to find you and more likely to hire you if they saw that you have experience in a similar project within a similar industry.

9. Drive Traffic to Your Portfolio Page

No matter how well-designed and well-written your portfolio is, if you have no traffic, you will soon be thrown into the sea of other web designers that sank into oblivion.

Drive traffic to your portfolio page by posting advertisements on web design sites, other social media sites, or other places where it is appropriate. Optimize it so that it will rank high in search results and clients will find you.

In the same way that a logo represents a brand, your portfolio represents your personal brand. If you get it right, you can have clients forever.

As a freelancer, your biggest struggle is finding good, consistent clients. But very few freelancers take the time to craft their portfolio or even consider, “what do clients want to know about me?”

Today we’re going to look at the lessons we have learned from analyzing member profiles on the AwesomeWeb job search site. We know these improvements will get more eyeballs to your project page, because we see which designers get most client inquiries and why. Let’s start and take a look at some graphic web design portfolio tips.

Oh, and stay tuned for a special announcement at the end.

Table of Contents:

1. 9 Things a Good Portfolio Website Needs!
2. 7 Mistakes that Force Potential Clients to Dislike Your Portfolio
3. How to Rock Your Own Web Design Portfolio to Get Clients
4. 10 Easy Steps On How To Create A Good Photography Portfolio
5. Create a Classic-Styled Portfolio Design in Adobe Photoshop
6. Outstanding Commercial WordPress Portfolio And Photoblog Themes

9 Things a Good Portfolio Website Needs!

When working on your portfolio site design, think about the elements your future client should be able to find. Many designers make the mistake of designing a creative portfolio page, but forget to answer important questions their client will have, when he considers hiring the designer.

Live Chat – A Design for Help Desk & Support page by AwesomeWeb member Masum Rana

1. Make Visuals Not Only Beautiful, But Detailed

A picture says more than a thousand words. In the design world, visuals are especially important. Clients will see the visuals first and if he likes what he sees, he will continue digging for more details. Make sure you build that interest in clients with a beautiful presentation of your project.

Different designers and developers have different specialties – your task is to find a way to represent your skills the best way possible. If you are a logo designer – ensure you add a high quality picture of logo and add black and white variations. Put that logo on business cards or packaging designs to show you are a professional.

If you are a developer, find a way to showcase your expertise. If what you have built cannot be presented well in picture, make sure you explain in the page the importance for the client to check live website and keep explaining your expertise on the rest of the page.

Tip: If you are building websites, don’t just include a beautiful header with a nice image in the background. Create a high quality snapshot of the whole website, so client can immediately see the details. Only header snapshot doesn’t give enough information about your design skills to the client.

These are the details you should have under each project. Example by AwesomeWeb member Hussain Lemonwala

2. How Much Time It Took To Finish a Project?

Clients want to know how quickly you will be able to finish the work for them, they want to know exactly what to expect. Most designers and developers don’t even give approximate completion time, because they say it always depends on the project.

But you need to look from the client’s perspective – your client wants to know approximate details as fast as possible. Maybe he needs to sell his project idea to his partners or his boss. Your client needs to know how much time it will take and how much it will cost. You must compromise and give estimates very early, because your client wants everything done yesterday.

Club BevMo Mobile App project page by AwesomeWeb member Larry Sawyer is a great example how to present your work and include useful details.

3. How Much Project You Created Cost?

I would say that your client’s main criteria will be these three points. Do they like what they see, how much time it will take and how much will it cost? It’s up to you how you price your services, there are different clients for different designers, but be clear about your pricing.

Clients want to know the answers to these three questions as fast as they can and you will do a great service to them if you do that clearly. This way you will attract the perfect client and will not waste time compromising or answering the same questions over and over again.

Marcus Handa shares some details about the project when doing the redesign.

4. What Are Some Challenges You Solved? What Did You Improve?

Okay, so the first three points were cake, everything else is the icing on the cake. And we all know how much we enjoy the icing, but it’s still not the cake. Before you move on, make sure you answer these three questions very well on your portfolio page.

Now, when the client has got the answers to his most immediate questions, he will want to dig deeper and get more details.

Explain what were the biggest challenges you solved in the project? What was the process you went through to come up with the finished result? When you share your ideas, you show your expertise (or lack of it) and build trust.

BeHappy Co. links to the finished website as everybody should on his portfolio page.

5. Give A Link To A Finished, Live Website

Why, oh, why so many creatives don’t share a link to a live website – a place where your work is used? If you cannot show the live example, the client will think in his head – “Is this a real project?”.

Just do it – if you are a logo designer, include a link to website where logo is used, if you are icon designer – include a link where your icons are used.

Matt Woodart shares how his client approached him and what steps he followed to finish the project. Writeup doesnt need to be fancy!

6. Do A Creative Writeup About Each Project

Share the history how this project came to life. Maybe you have an interesting story to share how many revisions you did, how the client found you, how you worked for several nights and days for a project just to get it out on time. Give more details, share short, fun stories and show your personality. Clients are humans with emotions, they will relate to you better if you open up first.

Taher Noorani clearly explains his role in the project – lead designer.

7. What Exactly Was Your Role In The Project?

If you didn’t complete the whole project on your own, explain what it is exactly you did. When you add the role, you allow your client to understand if it’s possible for him to find one person, who will complete the whole project or he needs to hire somebody else as well.

Clients will have more trust in a designer, who knows his strengths and weaknesses. Less is more.

If you were partnering up with another developer to complete a project, share that as well. You might both get hired.

Make it easy for clients to find you by sharing the skills you have. Check AwesomeWeb skills directory.

8. What Skills Did You Use When Working On The Project? What Industry Was It?

This is where you can share more technical terms for tech savvy clients, who know that they need to find a Ruby on Rails developer or a UI expert. Explain what programming languages or software you used on the project.

As a side note, include what industry the project you completed was involved in. Your client is more likely to hire you if you have already done a similar kind of work for another client in the same industry. They will know then, that you understand more about the industry than any other designer the client would hire.

AwesomeWeb drives traffic to your profile allowing you to focus on what you do best.

9. Lastly..Do You Drive Traffic To Your Portfolio Page?

I congratulate you if you have taken into consideration all of these things in your portfolio page! You are definitely standing out from the crowd right now (if your work is good)! But why so many brilliant designers and developers still aren’t getting enough clients?

There is no way clients can hire you, if they cannot find you!

There is no point of having a great portfolio page if nobody is going to visit it. You must drive traffic to it and that’s where AwesomeWeb comes in place. On AwesomeWeb we work hard to make sure we help designers and developers to improve their member profile pages so they show up on search results, for clients who are most likely to hire them.

We are responsible for driving traffic to your member profile as you are responsible for answering possible questions the client might have when he finds you. Driving traffic to your portfolio site is a time consuming task and that’s why we suggest you to join AwesomeWeb. You are a great designer or developer, we are great in marketing. We connect great clients with great designers.

Portfolio Search is Here!

At the beginning of the article, I told you we have a special announcement from AwesomeWeb. Today we are releasing portfolio search, which will help clients find you even better. If you have great visuals – if you are a graphical, web designer you will love portfolio search.

This is how it looks:

But hey, go ahead and check it for yourself! Get some inspiration or do some competitive analysis!

As a freelancer, portfolio search will also be a great source of inspiration.

See what other great freelancers are charging and how much time it took to complete. Find these 9 questions answered on all project pages. This is great for freelancers who struggle to get clients and price their services.

Go ahead – try portfolio search right now! Learn more about other freelancers and tell me what you think!

Now let’s look at some mistakes that can prevent clients from deciding to hire you.

7 Mistakes that Force Potential Clients to Dislike Your Portfolio

A portfolio is a collection of documents, works, progresses and basically everything you’ve done and want to show off. The point of a portfolio is to assist you in the process of presenting your skills, knowledge and experience. A portfolio has the aim of showing who you are in a short but detailed form. It’s important to always have a portfolio as you never know what kind of job opportunities you may have in any unexpected moment. That doesn’t mean you have to create one and carry 5 copies of it with you — instead, you can always keep it online!

Anyone can create a portfolio but online portfolios are mostly used by IT workers, such as designers and developers. This group represents the biggest part of portfolio-owners on the internet. In this article we will try to explain the key points of any successful portfolio and analyze the mistakes made which really drive clients from your online portfolio.

Your Domain Name

This is the most basic mistake which can be made. If you consider yourself a professional, you must keep the domain name professional as well. The best idea would be using your name and surname as the domain name as it’s neither too personal nor crazy or strange. It will only say that it is your personal page, and that’s exactly what you want to achieve. The bad part may be the unavailability of the domain name.

In 2011, 300 million websites were created and each of them used a unique domain name. If finding suitable domain name is an issue then you should think about other possibilities as well. You may reduce your name or surname to one letter only, or, you may use a common word like “studio”. While no-one will judge you for using any extra word in your domain, it’s not a good practice to use a word like “studio” in your domain name if you actually don’t own a studio and work by yourself. It may make clients think that you are trying to portray yourself as bigger than you are. You may also use words which represent you or anything that may come to mind, but be sure not to let your imagination invent some strange and creepy names!

Bad Domain Pick

It is a very bad practice to use adjectives in your domain name, especially the ones which would describe yourself. It is the client’s job to decide whether your designs are really amazing and you are a “talented designer” or you aren’t. You shouldn’t think for your clients and impose your ideas to them.

Good Domain Pick

While we already said that using adjectives in domain names isn’t a good idea, I should admit that Visual Idiot has done an amazing job choosing a domain name. It’s actually his nickname which makes him popular in the design community. It would be strange using the word idiot in any domain name, but, you’ll immediately forget about it as the site loads. The stunning work VI has done will make you admire him and his skills. I can actually say that his domain pick is perfect and it doesn’t make him appear in a negative space at all.

Suggested Reading – 6 Must Read Tips Before Registering A Domain Name

Layout

Another key element which makes a big difference is the quality of your portfolio layout. The first impression matters much, that is why you should always try impressing your clients from their first moments being on the website. Your layout must be the one which will impress your potential clients. You can’t convince someone that your work is amazing and they should hire you if your own website lacks quality. A visitor won’t ask or seek for the prices you offer, or your portfolio if your website won’t have at least a decent look. Minimalism is totally accepted in your designs but you shouldn’t confuse minimalism and simplicity. You don’t want your site to look poorly designed and lack basic functionality. Your website’s quality should never be second rate to your work.

About Yourself

People like to know as much as they can about someone they may hire for a job. Before it goes deep into communication and several mails, it is very good to let your visitors know you from the beginning. This doesn’t mean you must post everything from your medical cart to parking fines.

You shouldn’t go too deep into personal life stories, but you should at least provide your name, and details about your professional studies and experience. Obviously this information shouldn’t be located in random places and the best location for it would be an “About” page. There have been several discussions on how to create great About pages so that your visitors won’t leave, at least not because of a poorly written About page.

Two More “Obvious” Mistakes

• Live-Chat – These services were invented with the purpose of helping customers on e-commerce websites where instant help is needed. In theory, live-chat widgets can be present on your website, it’s actually an unnecessary element, but it depends on the specifics of your website. A team, or a medium-large design studio could implement live chat if they have the right person and time to answer all the questions which may occur, however, if you are a lone freelancer there is no point implementing this time-consuming feature as all the questions could be asked by using the contact form and your job is not answering live chat questions.
• Inefficient Use – Another mistake you may be doing is using your portfolio inefficiently. I do not want to say that you should squeeze juice out of your portfolio — what I want to state is that you shouldn’t confuse it with a blog or other personal website. Everything has it’s aim and you shouldn’t mix two different things into one. Your thoughts about Joe’s shoes shouldn’t be near your work examples and your CV. You can always set up a blog on your website, but it should be a different page/category. While this is admissible, you shouldn’t talk about Joe’s shoes on it either. Why? Because most of your eventual clients are not interested why Joe has chosen sneakers instead of boat shoes. I can say that having a blog on your portfolio website won’t hurt you if the discussion and posts are work related.

Conclusion

To sum up, a great portfolio consists of 4 basic parts: domain name, layout, information about yourself and the structure of your page. Each part of it must be well thought out and planned. You don’t want to miss something which you may regret later. Every small detail should be taken into consideration because your portfolio is how you present yourself to strangers. These strangers may want to hire you, and the ultimate goal of a portfolio is to showcase your work, and get more work. In case you need someone to have a look at your design and give you some feedback, you can always ask for some on Dribbble, Forrst or ConceptFeedback!

We have covered a lot already, but we are still going strong. In the next section Wes Macdowell will give you some great tips for building your web design portfolio.

How to Rock Your Own Web Design Portfolio to Get Clients

[firstwebdesigner_subscribe]

How Important is Your Portfolio?

Your portfolio is a dynamic, ever-changing collection of your works, skills, accomplishments, and experiences. It puts a spotlight on your best works and achievements as well as your values and experiences.

Every information you include in your portfolio is critical because it will not only reflect your capabilities but will also serve as a marketing tool to attract potential clients.

So how do you create a portfolio that rocks and attracts potential clients?

Today’s episode of the 1WD Show features Wes McDowell, the Creative Director of The Deep End, a digital and branding agency, and he will share how to create a portfolio that does just like that – attract potential clients. 

Wes pointed out that most of the time, web design professionals indeed create a portfolio but never really give careful thought that they can do more about it than just showcasing who they are and what they know. He added that your portfolio shouldn’t look like it’s just an afterthought, but you can make it to actually look like a 24/7 ambassador that represents your brand.

1. Videos

When you look at the websites of most creatives, they’re nowhere to be found. You can see the projects and accomplishments they have done, but the website remains faceless and impersonal. Bear in mind that companies hire people. They want to see who they’re going to be working with and before that, they want to see if you are a good fit for the company.

You can utilize videos to work for you in this way, making your website more human and giving it more personality. Placing your photo or image in your web site is good, but placing a video ups your game because they can see a real talking and thinking human being.

But what do you put in your video?

Your video should serve as a welcome greeting; therefore, it should have a welcoming vibe to it making visitors and potential clients feel welcome. Just like when you’re greeting someone face to face, you should also express how happy you are to see them visit your site. Introduce yourself briefly and give them an overview of what you do.

Never sell your product or services on the video. Rather, it should just be enough to pique their interest to make them know more about you and what you offer.

2. Case Studies

Putting all your successful projects in your portfolio is good, but creating a case study from them is even better. Case studies don’t just show your proficiency, but it also shows your understanding of various design principles that you have used in your projects. In addition, it shows people the process the project has undergone and the challenges you have faced to complete the project. Most importantly, though, case studies build confidence in your potential clients that you can do and finish the project.

What should you include in your case studies?

Your case studies should help other people see your creative process and, at the same time, gain knowledge from it. It’s true that all of us have their creative side, but not everybody uses their creative energy in the same way. Thus, your visitors are always curious how you do it.

Your case studies don’t just have to be the projects you did for others, but it should also include projects you did for yourself. Furthermore, it also shows potential clients other skills you might have. For example, most of your projects might focus on web design, but a fun project you did focuses on creating mobile apps.

Some necessary elements that you should include are:

• Overview of the project
• Services you provided and tools you used
• Client testimonials (a video testimonial is much better)
• Dedicated page
• Screenshots

3. Separate Pages for Each Project

Another mistake most creatives make is thinking that their client can find every project they have made. You have to understand that visitors to your website will not play the “treasure hunt” game and find all your projects one by one. Like a good host, you have to make it easy for your visitors to find them.

The best way to do this is by creating thumbnails for your projects on the landing page of your portfolio. Each thumbnail should be clickable, leading to that individual project’s own page. Then, each page should have a heading specific to each project or industry you have designed for. This serves as an opportunity to  create long-tailed keywords for each of these projects so that it will be easier for potential clients to see them when they search it on the Internet.

4. Call to Action

Your call to action will be the deciding factor whether visitors will decide to become clients. You don’t just want people to look at your work rather, you want them to call you and, eventually, hire you. Wes suggested, as what he does, that your call to action should have a quote which funnels them to a page with a contact form.

That page should include specific questions that would give you more information regarding what the client wants or needs, so you can call or email them back with a quote. Don’t go for general CTAs. Instead, make it crystal-clear and laser-focused because you want to get hired.

Conclusion

Don’t expect projects to just fall into your lap just because you have a portfolio. Make all the elements inside it purposeful. All of them should lead to the fulfillment of that one single goal – YOU GETTING HIRED.

This Episode’s Sponsor

WebdesignerNews.com is this episode’s sponsor. It’s a single location to discover the latest and most significant stories on the Web.

Now lets take a look at how to create an awesome Photography portfolio.

10 Easy Steps On How To Create A Good Photography Portfolio

Creating a showcase of photographs is not an easy task and most of the time the photographers have basic or no knowledge of design at all. Moreover, creating such a portfolio in which the images have to be in focus is a tricky task and even the more experienced designers might fail providing a good layout, therefore I thought of sharing with you a list of tips for designing photography portfolios.

The difference between a web design portfolio and a photography showcase is huge. The focus has to be on pictures, not on content, while the normal way of designing, with the header, content box, sidebar and footer changes totally from a layout to another. The more inspired and original you can be, the better your design will be. When you are a photographer, it is very important to have a platform where you can show clients your work – this has the same importance as for a web designer.

Most of the time the photography portfolios are heavily reduced to a showcase – which can be the home page, a contact section and maybe an “about me” page. It sounds simple, but there are still many things to figure out before being able to design properly such a layout.

1. Think of your target

Yes, you’ve heard this before so many times – and I know it annoys you. It is so simple to just overlook it and why not do it? In the end all of us want as many clients as possible and don’t want to make our audience narrow. Well, I tend not to agree with you, and I would suggest you to think seriously about who you want to work with.

A good example is a wedding photographer – this page would be totally different from the one of a roadshow photographer. It will probably be white, including many circles (which suggest continuity), will have maybe floral arrangements and might be full of happiness and sunshine. If you are a roadshow photographer, you might want to design with a darker color, keeping a balance between organized and chaotic (although do not get too close to organized) and so on. Think of what kind of clients you want to attract and then design for them. It is so important!

White and clean – wedding photographer portfolio

2. Think of the number of images

You have to do this because most of the layouts look good with a small number of pictures uploaded, but how will it look when you will have an odd number of pictures to show? There needs to be a balance between the number of pictures on the page and the negative space you leave between or around them. If you have many pictures, consider using pagination or categories to separate them – and do it for the sake of the user. Don’t forget that they never saw you pictures before and if you are really interested in them, it takes a lot of effort for the human eye to analyze them. Don’t make it even more difficult for the visitors.

This page is a good examples of how to present your work.

3. Make the images stand out

When I say this, I usually mean keeping a high contrast between the pictures and the background; and I usually recommend having black as background, because there is most of the time more contrast than when viewing the showcase on white. This tip is good for bringing out the contrast of the photos and it is also a good idea to try to look at the pictures on different backgrounds, so that you make the best out of them.

Good example of contrast between background and picture

4. Consider the quality

When I visit a photography portfolio or even a showcase, I expect all the time to be able to see the pictures in full size if I click on them – and it would better be huge. I want the pictures to look good and fit my screen if I would like to have it as a desktop background. And not only about this – but if I want to see all the details, I can’t do it properly on a small picture.

To avoid keeping the visitors wait too much, have two versions of each picture (you can resize them with a JavaScript too). This way if somebody is interested in seeing one of your pictures larger, he knows that this comes with the price of loading time.

5. Be flexible

According to official statistics, less than 1% of the internet users have 800×600 displays. However, this does not mean 800×600 is the smallest resolution you have to design for – think of mobile devices as well. It is not highly probable that a potential client will want to use his bandwidth with your pictures, but what if they are on a wireless connection? This means you have to think about all the possible resolutions.

You can do this by making you pictures be 100% of the width of the div which displays them, and the height can be set to auto. This will make the pictures resize according to the screen. It is not difficult to do and is very useful, so why not spend few more seconds to customize this?

6. Show only the best work

This is also for the web designers, not only for photographers. It is always good to make a point fast and then let the visitor make a decision – the World is moving fast and we don’t have time to view all the crap work people have done. Therefore only show the top-notch work and let the potential client move on, if he wants to. Don’t keep him tight – he will leave without seeing every piece of your work anyway.

Is is also a good idea to order your pictures. Even if you select your best work, some of your pictures simply have to stand out. Put them first and leave the other good ones for the second page.

7. Describe the photos

When potential clients look at pictures, they want to know who it is they are looking at. They might also want to hire one of the models, which is not a bad thing either. Write short notes about each one of your pictures and let the client know what is he looking at. It is also much more important to give each picture a short description than a title. Naming the tools you’ve used for shooting and post-processing might be a good idea too.

Kenn Reay talks about his pictures in the description.

8. Emphasize the contact information

Sure, the most important thing is to show your work, but how does this help if you do not get clients? It is important to lead the visitor to your contact page if possible, otherwise always make it clear that he can contact you right away. Having the e-mail address in the footer might work too, but it depends a lot on your layout. It is entirely your decision which information you give out, but I would also show them I am present and active on social media.

By having a normal navigation, the contact link does not have to be emphasized, because it is where the user knows it should be.

9. Ask for feedback

I never release a website before asking for feedback – it is just in the manual. Always ask the others – experts or not – about their opinion on how your site looks. It is really important to know what the others think, especially because after hours and hours of looking and analyzing your portfolio, you do not notice the small details anymore – and this is crucial. Never release a website before asking people for opinions.

10. Keep it dynamic

By this I mean that you have to keep your portfolio updated. It is not difficult to do this anymore thanks to the bunch of tools we have at our disposal. Nobody wants to see a good photographer not uploading his latest work and potential clients do not enjoy this for sure. Never replace old strong images with bad ones. Don’t forget about tip #6, showing only the best work.

Conclusion

Having to design a photography portfolio is not an easy task, as said in the beginning, not even for an experienced designer. There are many small tips you have to take into consideration and I hope this list helps all of you in designing better for our fellow photographers out there. With this is mind, I share with you a list of good links on the same topic.

8 Tips for a Great Photography Portfolio on I Shoot Shows

Great Photography Portfolios for Your Inspiration on The Photo Argus

10 Cool Photo Portfolios and Gallery WordPress Themes on Inspired M

Top Five Photography Portfolio Tips on All Art Schools

Five Tips for Building Your Photography Portfolio on Digital Photography School

In the next section a great tutorial awaits you in which we will show you how to create a classic portfolio page.

Create a Classic-Styled Portfolio Design in Adobe Photoshop

Howdy, today we will be creating a nice design for your online portfolio. What we will learn here is how you can use a combination of textures and patterns to create a nice old-school look and how to use guides in a smart way.

Here is what we will be making:

Resources for this tutorial

• Icons from Iconsweets
• Sample images for the center image
• PSD Download – but really, you should follow the tutorial first!

Step 1: Setting up the Document

• Start by creating a 1600px x 1600px document in Photoshop.
• Ruler Tool is very useful for this tutorial make sure that rulers and guides is turned on.
• Rulers: Ctrl + R
• Guides: Ctrl + ; or Ctrl + H
• The total width of our content will be 960px. Our canvas is 1600px width. So what you have to do is go to View – New Guide. Set the value to 320 px. Repeat the step but now change the value to 1280 px, this will make a total of 960 px to the center of our canvas.
• Because this design will have a 3 column set up, you will need 2 more guides. 960 / 3 = 320 px.
• So repeat the step again twice, but now with the value of: 640px and 960px.
• So what you now should have, is an empty canvas with 4 lines. Which represent the alignment we will be using. You can hide these guides by Ctrl + H
• Fill the background with: #272e2e.

Step 2: Working on Base Background for Header and Slider

We are going to give this header background a nice old-school look. We will use a texture and a pattern for this. Combining these with the right colour should give the style we are aiming for. Start by selecting the rectangular marquee tool (M), create a 100% by 390px shape, color #2daaa5. Go to Blending Options on this layer and select Gradient Overlay. Below are my settings:

Next, we have to add the texture. You can use the one below or download your own.

• I used the one above at 20% opacity.
• Now, for the Pattern. What I did was make a new document, 5 x 5 px and background Transparent In here we will make the pattern.
• Zoom in all the way (1600%), select the Rectangular tool (M) and make a cross in the document.

Like this:

• Go to Edit -> Define Pattern. Here you’ll save the pattern which you can use in every other .psd file.
• Back to our work file, Ctrl + left mouse click the blue layer. This will load the selection of the layer. Now, at the bottom of the layer panel select the black/white icon and choose Pattern Fill. It should automatically show your pattern but if not, select the arrow next to the thumbnail of the selected pattern. You’ll see a selection of patterns which should include your defined pattern.
• Hit OK and there is your pattern.
• Opacity = 3%.
• Now we will make a nice line at the bottom of the header background. There’s actually 2, 1px lines. the upper one is #26938e, and the one below is #44c6c1.
• To make these lines it’s easy to use the (horizontal) Single Row Marquee Tool.

Should look close like this:

So far for the header background. Of course you can experiment with colours and different textures/patterns.

Step 3: Filling The Header With Logo/Nav & Slider

So, we made the document and we have a nice background for the header. Now it’s time to fill it up with content. First step, making a logo. What I did was quite easy.

The font I used is Century Gothic. The settings can be found here: Kroal

Portfolio

Kroal: Color overlay is white.

Portfolio:

The last part of the logo is a vertical line which should be on your guide. Like this:

I made that line with the Rectangular Marque tool. color: #289a96. Second step, the navigation.

The navigation is just some simple text fields with 13px Open Sans font. The slashes in between are the same font but 10px and 37% opacity. The BlendingOptions for the nav text are:

The lines beneath the text are 2 layers, made with Rectangular Marquee Tool. Colours are: #289a96 and just white for the active line. Third is the slide show, mine is 960px by 410px. Of course you can choose any size. Use the Rectangular Marquee Tool to create the shape. I recommend to switch to Fixed Size style-mode.

I used Drop Shadow and Stroke, settings below.

Use the Rectangular Marquee Tool again to make the little zoom icon caption. Hold shift while making this square. This will keep the dimensions right. The icon can be found in the Iconsweets pack.

Also the caption to the right of the slider is made with the rectangular marquee tool. 

The text settings are below: /WEBDESIGN:  AVICII BLOG

The next part we will make are the small dots beneath the slider which show on what slide you are right now. I recommend making them with the Ellipse Tool (U). What you have to do is make 3 circles of about 15×15 pixels.

The layer styles for these layers can be found here: Drop Shadow

Inner shadow

Color Overlay

One of the dots needs to be the active one. Make this circle again with the Ellipse Tool (U).

Blending options: Inner Shadow

Gradient Overlay

You may have noticed there’s a shadow beneath the slider. Let’s make that! The shadow was made with the Pen tool (P). Try to make a shape like this:

• Next, fill the shape with black, and go to filter > Blur > Gaussian blur. Choose a radius which fits you best. Mine was about 4 px.
• For the content background. It’s kind of the same as the header. But now you’ll just use the pattern and not the texture. Fill the background with #272e2e.
• Add another pattern overlay with the same pattern.
• Opacity is about 15%.

Then the arrows beneath the slide show.

You can make them with the pen tool or just use a standard icon. Blending options left arrow: Drop Shadow  

Inner Shadow

Color Overlay

• Just a solid black #000000
• Blending options right arrow.

Drop Shadow

Inner Shadow

Color Overlay Color: #607474 You may have noticed there is a line to separate the slider from the content below. These are 2 1px lines 100% width. Upper one is #1f2626, lower one is #2b3232. made with Single Row Marquee tool.

Step 4: Filling In The Content

• The content starts with a 3 column showcase of text about your website.
• If you don’t see your guides you made at the start hit Ctrl-H. This should make them pop-up ;).
• I like to have some icons to give some information about what the content includes. So search for icons which fit what you would like the visitors to see. It should fit the reading content. Mine are from the Iconsweets pack.
• Next to the icons is a single header title. Font is Open Sans, it’s all capital 15px and the colour is just plain white.
• The lorem text also is open sans, but now it´s 12px.
• Next, the read more button. Select the Rounded Rectangle Tool (U). Make it 3px radius and make yourself a nice sized button.

Blending options below: Drop Shadow:

Inner Shadow

Gradient Overlay

There’s another line beneath these 3 columns. You can just duplicate the ones you made before.

• Next is another 3 columns, but now it’s a showcase of the last 3 portfolio items.
• Another icon + title as a header. And all the way too the left is a button to the portfolio. It has same dimensions as the buttons before but different styling.

Drop Shadow

Inner Shadow

Gradient Overlay

Stroke

Then, the images. The thumbnails are 306px by 135px. Make an inner stroke that is 3 px plain white. and put an image on clipping mask. The shadow beneath the thumbs are made the same way as for the slideshow.

Step 4: Let’s Make A Footer

First we have to make some sort of separation between our content and the footer we’re about to make. You can see in the image above that there are 4 1px lines. Make them again with the Single Row Marquee Tool. Play around with color and opacity until it feels natural. The background colour of the footer is #161a1a. I made the field with the Rectangular Marquee Tool. The footer again contains the 3 column build-up. Recent Tweets, Recent News & Contact form. I think the text is pretty easy to create with what I explained earlier. The buttons have the same blending options as the View Portfolio button. The only new thing is the contact form.

I pulled out the Rounded Rectangle Tool (U) and created 3 shapes with 3px radius. The blending options are the same for all the 3 fields. Drop Shadow

Inner Glow

Gradient Overlay

So, we’re almost there. Only one thing left to do. Make the copyright bar at the bottom. It has the same background as the content so that’s easy. The lines can be copied from the top of the footer and the text is just open sans again. This time the color is #c4c4c4.

That’s it for this tutorial, I hoped you guys learned some new techniques. Still got some questions? Just leave a comment below.

If you don’t feel like designing your own portfolio, maybe the themes below can help you to create a great portfolio website for your work.

Outstanding Commercial WordPress Portfolio And Photoblog Themes

If you need to complete quick project and you are ready to spend some money for it, this premium WordPress portfolio theme showcase will definitely interest you!

You can check out some great portfolio themes by going to our other article. – 40 Premium WordPress Portfolio Themes.

I think it’s okay to spend few bucks for great theme with full support and many features for fast projects. I just bought one as well, just because I needed to set up site rapidly fast, but I had specific requirements for that blog. I visited several premium theme sites and found good looking theme I was happy with in 30 minutes.

1. Photo Nexus WordPress Gallery Theme (27$)

Photo Nexus wordpress gallery is a 2 column , 2 color variation ( Bright and Dark) theme.
This theme is great for those who need a convenient way to publish and showcase a self managed Gallery of Photos, Artworks or Designs. The theme features modern yet minimalistic style so that your work will be guaranteed to be on focus. The theme comes added with Admin theme options so you won’t need to manually edit the files to get it running.

3. London Creative (32$)

London Creative + comes with fully working contact form, awesome slider for your featured images, nasty spinning slider buttons (never saw them anywhere else, so you can call it unique), 2 message buttons under the slider and PrettyPhoto plugin (better clone of Lightbox).

You will also have user-friendly dropdown navigation with infinite dropdown levels where you can style every even list item via Jquery, so no more hassle, it’s automatic, you can just add posts and you are ready to go!

ElegantThemes Theme Website

This is an excellent site also offering some nifty premium WordPress themes, where you can pay 19.95$ and get access to all of their commercial themes for one year. Here I also find my own pick for personal project, so I am saying from personal experience, that I was positively surprised about their great admin panel with big list of modifiying features, so I didn’t even had a need to touch the code at first.

Okay, let me finish here and also share your opinions – do you need this type of  commercial articles, at least I don’t think anymore that the best stuff is for free, I don’t mind paying for quality and this article definitely proves it! If you buy something please use this site affiliate links to help us improve 1stwebdesigner blog quality! Thank you!