Inspect Element » inspiration

15 Stunning and Fresh Premium WordPress Portfolio Themes

Tom Kenny — Mon, 18 Jan 2010 23:35:05 +0000

A benefit of building a portfolio using WordPress is you have the ability to use the powerful blog features alongside your portfolio. A blog discussing your work or more about your processes and inspiration will add to the personality and allow potential clients to get to know you more increasing the attractiveness of you as a web designer. WordPress can also act as a more than adequate CMS for displaying your portfolio work.

Previously we’ve looked at Fantastic Presentation Styles of Web Designers’ Portfolios so taking what has been learnt from there, let’s look at WordPress themes which make great portfolio displays. Many people are of the assumption that WordPress is nothing more than a blogging platform but it can easily be adapted to behave more like a traditional content management system as the following themes demonstrate.

Ready-made WordPress themes are great:

for web designers who don’t know WordPress
for web developers who can’t design
if you don’t have enough time to build a WordPress theme
because they give you the opportunity to learn about different techniques and the inner workings of complex themes
as they’re inexpensive
because they are supported by the sellers and are often updated to fix problems or even make improvements

1. Display ($42)

This theme makes use of a prominent area to display your work on the home page with the use of a slick 3D flash box that transitions between images in a unique and cool way.

View Live Demo

2. DesignFolio+ ($32)

View Live Demo

3. LondonCreative+ ($32)

A striking design through the use of colour and pixel perfect layout give the LondonCreative+ theme a distinct look and feel that is almost instantly memorable and one that visitors are likely to come back to.

View Live Demo

4. Varnish ($37)

Varnish doesn’t have a portfolio page built in but you’ve got a fantastic three column design to build off and create your own.

View Live Demo

5. Manilla ($27)

Manilla doesn’t do anything particularly special but what it does do, it does extremely well. A great use of tabs, textured background and whitespace make this theme a great way way to show of your work.

View Live Demo

6. Pandora ($32)

This theme uses an AJAX filter on it’s portfolio page so it’s perfect if you have many examples of work to show off.

View Live Demo

7. Magnifizine ($32)

Magnifizine utilises a large image to show off the latest work on the homepage. Also the contrast against the dark background really brings out the colour of the images.

View Live Demo

8. Bosspress ($32)

The header of the Bosspress theme is a giant showcase of your work. Certainly a memorable showpiece for any visitor.

View Live Demo

9. Northern Lights ($27)

View Live Demo

10. Picco ($27)

Picco implements a carousel effect on the homepage to present a select few pieces of work.

View Live Demo

11. CUBE-X ($32)

The centrepiece of Cube-X is a big colourful image of 3D blocks with your project work overlaid on top to really make your work jump out.

View Live Demo

12. Business Planet ($27)

View Live Demo

13. Ambiguous ($32)

View Live Demo

14. ShapeShifter ($32)

ShapeShifter uses the same 3D flash image rotator as the Display theme above. It’s also a sleek one-page portfolio with a minimal style.

View Live Demo

15. TurboMax ($27)

TurboMax really comes to life as you navigate through the pages when a parallax scrolling effect causes the clouds and leaves to move with the sections. The portfolio page itself may need a bit of work but it’s a great base to build from.

View Live Demo

Making the Most of Icons in Web Design

Tom Kenny — Thu, 13 Aug 2009 08:00:34 +0000

When used effectively, icons can add so much to a site’s design. They can help identify list items and make navigation a more visual experience as long as the icons have enough relevance to what they’re representing. Icons as visual representation alongside content allows a user to scan a page easier than plain text.

Aiding Navigation

Rather than relying on just text to navigate, new and repeat users can find their way around a website quicker thanks to the mind’s ability to associate images with what they want when using icons as part of the navigation.

Tutorial9

Media Temple

Carsonified

Dallas Fort Worth

Sourcebits

Present Multiple Products

By making the most of icons to display products you are giving the user a clear index of what you have to offer.

Envato

37 Signals

Viget Labs

Panic

Atebits

Display Features of a Product or Service

Feature descriptions are usually constructed by an unordered list with a heading and some text. By adding a relevant icon not only do you make the list visually more appealing but the list items become more clearly defined. As a bonus, this improves readability which encourages users to explorer the feature set.

280 Slides

Silverback

WP Remix

Coda

GMX

Good Barry

Edopter

activeCollab

Expression Engine

Use Wisely

Just because icons work well in the above examples doesn’t mean that they will work effectively for everything. Poorly designed or badly chosen icons could have the effect of confusing users as they may misrepresent the content.

Used well as describe and icons can have a great effect on how users navigate and read a site.

27 Stunning Examples of Header Design Inspiration

Tom Kenny — Mon, 13 Jul 2009 08:00:54 +0000

Headers are the usually the first thing you see so the examples shown have gone for big, bold and beautiful headers that give the design character while also making them very memorable.Alexandra Tong

Duirwaigh Studios

Designslurp

Matt Mullenweg

Cosmive

PSD Layout Design

Webstaze

Ectomachine

CSS Leak

CTL

Dragon Interactive

Gummisig

Feed Stitch

JesÃºs RodrÃguez Velasco

Vidget Inspire

Corvus Design Studio

Pixel Resort

Frisk Design

RCI UK

Mirasim

Squarespace

Firefox 3.5

Delicious Monster

Cult Foo

Versions

Dizzain

Toucouleur

Creative Uses of Navigation

Tom Kenny — Mon, 06 Jul 2009 08:00:05 +0000

With the combination of javascript and CSS, navigation doesn’t have to be static transitions between content or just another standard boring menu. Below is a showcase of creative navigation that can make the user experience more interesting and memorable.

Tap Tap Tap smoothly slides in and out product information.

RZMota loads content into a section at the bottom of the page.

MB Dragan‘s navigation expands from the top to reveal sub-menus.

Red Crown Studio slides up and down to the relevant content.

Dragon Interactive uses javascript to fade the menu states between colours on hover.

Polar Gold has big typography as it’s navigation with content appearing below each title upon click.

branded07 uses a very simple navigation menu that has a follow effect when hovering from one section to another.

Apple tend to be at the forefront when it comes to web design and their horizontal product navigation is no exception.

We Bleed Design uses transparent PNGs overlaying a series of colours making the transitions between content fun and interesting.

Marketing Informatico uses an illustration of an iceberg and transitions between the sky and underwater.

Sursly is the portfolio of Tyler Fink who implements a very nice left-to-right sliding navigation.

Search Inside Video mixes a content sliding navigation with a progress tracker display.

Pikaboo displays navigation content in lightboxes.

Now Leaving Earth is a CSS Zen Garden design by G. Scott Olson and scrolls from left-to-right with the rocket that flies into space staying in place and the background moving.

Jason Read uses an accordion effect to display content.

Associated Flavors places it’s navigation in space, scrolling down to content.

TomÃ¡Å¡ Pojeta is another site that transitions between sky and underwater with beautiful illustrations.

CSS Tricks displays a description about the destination upon hovering over the relevant tab.

Kriesi.at implements an accordion effect directly into the navigation which reveals an icons for each section.

JiÅ™Ã Tvrdek displays navigation in the form of oranges in a tree with the content in the trunk and underground.

Creating a Web Design from Scratch: Getting Started

Tom Kenny — Tue, 23 Jun 2009 08:00:56 +0000

Often the most difficult part of web design is getting a design off the ground. It is important to sufficiently research whatever project you’re working on before you really get stuck into the design. Even then you may find yourself staring at that daunting blank PhotoShop screen. There are a couple of things that can help you get going.

Research

The most important thing to get right before you get started is to make sure that you understand your client and what service or product they offer. This doesn’t only apply to freelancers or web designers who work in a design agency where they deal with multiple different clients but also those who work in-house. Think of your employers as your client as they, much like a traditional client, pay your for your service.

FreelanceSwitch has a great post onÂ How to Extract the Facts with a Web Design Client Questionnaire. This is designed to get the most information out of your client that they probably never thought that you would need to know. Obviously these questions aren’t suited to everyone but if you follow the idea that you need to find out as much about your client as is required then you’ll be setting yourself up for a good start.

Good research has an added benefit further down the road. If you have a solid understanding of what the client needs, then in theory, it will reduce the amount of changes that the client will make as the design or development is in progress.

Inspiration

Hopefully, having a better understanding of what your client needs will create something in you mind’s eye in which you can springboard off from. If you’re still stuck with that blank PhotoShop screen then there are a few things you can do to trigger the design stage.

Compare your Client’s Competitors

Have a look at what your client’s competitors are doing and see what you can do better and improve upon. Try to find something that they’re missing and fit that into your design. At this stage it’s important to not forget what the client requires or you can end up not delivering what the client asked for. At this stage, if you can thing of something that the client wants that you can improve then discuss it with them.

Find Inspiration from Existing Sites

There are a number of great design galleries out there that can help you get a project off the ground. Best Web Gallery, CSS Remix and CSS Line are examples of some of the best galleries out there. These galleries showcase the best or most popular web designs.

Remember, inspiration is not about copying but rather kick-starting an idea of your own.

Hopefully the above advice should give you a helping hand when you are struggling to start a new project. If you have any ideas or ways you do things differently then please feel free to comment.

Superb Examples of Form Design

Tom Kenny — Mon, 22 Jun 2009 08:00:09 +0000

Following on from our look at fantastic login pages comes a look at more comprehensive form design such as contact forms, order forms, sign up forms and comment forms. Below are just some of the best examples on the web.

WPCoder uses a high quality image of a clipboard for their order form.

Alex Cohaniuc uses a piece of paper for his contact form.

Paramore Redd have a nicely styled, clean contact form.

Graphik uses a big friendly header on their contact form.

Kontain clearly defines form fields by using bounding boxes and colour.

Tumblr uses big form fields and a nice clean appearance.

News Pond gets users to focus on their sign-up form with the use of a background glow.

Duoh uses a big bold header and a paragraph to introduce their contact form.

Neutron Creations fills in fake details on their contact form, showing clearly, at a glance, what details should be entered.

Ballpark has a nice clean design with clearly defined sections.

Dragon Interactive uses a tab interface to distinguish the type of message on their contact form.

Substrakt uses the familiarity of a postcard for their contact form.

Battle.net implements a progress tracker for each step of signing up to their service.

Tuitive uses sIFR for non-web safe fonts on the label tags of their contact form.

David Hellmann uses plastic tape for the label tags of his contact form.

Elliot Jay Stocks uses nice big and clear elements on the comments form of his blog.

Be Inspired

As you can see, forms don’t have to be boring, there are a number of different ways that you can make forms more interesting and more usable, increasing the chance that users will sign up to a service or send feedback.

Feel free to share your own form designs and any others that you have seen out there in the comments.

20 Great Examples of the Use of Brown in Web Design

Tom Kenny — Mon, 15 Jun 2009 08:00:58 +0000

This is an extensive follow up to a post that I wrote on my own personal blog a little while ago before Inspect Element was even a twinkle in my eye. Now time to let the designs to do the talking:

Forest River Timber Homes

Tuts +

Sergio Noviello’s Portfolio

Showcase of Fantastic Login Pages

Tom Kenny — Mon, 08 Jun 2009 08:30:05 +0000

Login pages for web apps/websites are something that regular users are likely to see over and over again but are also can be an opportunity to entice new users to sign up so a well designed login page can have greater benefits than you think. Below are some of the best login pages currently out there.

Battle.netWorld of Warcraft