Portfolio Design Trends & Website Ideas

wdhb4In honor of Patrick McNeil’s latest workshop, Web Design 101, we’ll feature some of his inspirational content from The Web Designer’s Idea Book vol. 4 to showcase the current web design trends.

McNeil’s two-part workshop guides print designers without web design knowledge through the web design basics. Luckily, print designers already possess skills that transfer to web design. A strong grasp on the basic design skills remains essential – repetition, alignment, hierarchy, balance, emphasis and contrast.

In the self-paced and week-long workshops, McNeil explains the critical basic building blocks, such as key terms, the web hosting process and the primary languages. After mastering the basics, McNeil gives the blueprints for building web pages and references credible sources to stay fresh on current trends.

In addition to teaching on the principles of web design, McNeil shares how to find what is working on a site and what isn’t via analytics, and how to use that knowledge to make smart design decisions. McNeil’s instruction provides a guided learning approach on the key concepts of web design. By the end of the two-part workshop, students will build their own web pages.

The first segment starts on May 25th and the second segment on June 10th. To find out what each segment covers, visit HOW Design University.

Now, on to ideas for designing portfolio web pages from McNeils’ book, The Web Designer’s Idea Book. View the excerpt below to notice the current web design trends and to generate ideas for web design projects.

Portfolio Website Ideas:

Super Clean Design Trend

The Super Clean chapter is one I include in all of my Idea Books. As I have said in the past, this style embodies all of my favorite qualities and the sites here are typically the ones I admire the most. Sites that fit in here must display the cleanest and most beautiful designs. And most often they contain a clean, spacious layout that is easy to consume. Let’s dissect a few examples to see what I mean.

website-ideas1

MING Labs

A perfect example is the MING Labs website. This site embraces a minimalist approach and is void of any structural design elements. This allows the designer to focus the user’s attention through a clear (and beautiful) typographic hierarchy. Though the site might appear simple, its detailed nuances are gorgeous and leave nothing undone. Notice how clean the design feels. It is full of space and one can easily digest its content—a perfect example of the super clean style at work.

website-ideas-2

Heikopaiko

Another example that easily fits into this category—and is equally easy to love—is the Heikopaiko site. Again the site leans toward the minimalist mindset, as most Super Clean sites do. But here, it feels less sparse, and yet it still has a clarity to it that is very welcome. Notice how you have no trouble scanning the site and consuming its content. There is no confusion in the flow of the document, no mixed messages, and no details left unattended. Super Clean sites like this one are so refined that it is almost annoying; annoy- ing because it shows just how perfect a website can be. Frankly, this site feels so spot on that you feel like you’re looking at a Photoshop comp and not a live website.

Illustrated Designs

I have long been an advocate of illustration in design if only for a single reason: It almost always leads to a really unique design. Want to blend in with the herd? Rely on stock photos or artwork that anyone can use (and everyone does). Want to completely stand out? Make original artwork a component of your design. No one will have your exact style combined with your ideas. It is a great way to make your work pop. Granted, we aren’t all great illustrators, but I believe that we can all create something from scratch.

Another huge potential perk to this style is the current popularity of what is known as the Flat Design style. A flat design is void of depth and decoration and is very minimalist. By working in some unique illustrated elements our work can really pop. So, again, illustrations can really make your work stand out, and given the current style that is so popular, it can stand out even more.

website-ideas-3

Symphony Online

Symphony Online is a lovely example of this. It uses beautiful type, subtle textures, solid colors and decorated edge treatments (all of those topics, by the way, are covered in The Web Designer’s Idea Book, Volume 3). All of these elements are very popular and in style. The site genuinely feels relevant in the current design world. But notice how the illustration adds uniqueness to the design that makes it stand on its own. The site doesn’t at all feel like yet another “me too!” design. In my humble opinion, the illustrations are what make this site really pop.

website-ideas-4

William Cole

Next I want to look at the portfolio site of William Cole. In this case, I would say that the site doesn’t fit into the current style at all. In fact, the fundamental design of the site goes right against everything that is trendy and popular right now. In some ways this works against the site—or at least creates an uphill battle for the site’s designer. If you break with convention, and even go opposite of convention, you have to really bring your A game. In this case, I think the designer successfully did just that. Yes, the site isn’t trendy, but it feels extremely unique. Even more, it seems that the site’s style reflects that of the artist behind it. It has more character, and you get the sense that an artist made it. Look through his work and I think you will agree that this resonates perfectly with his body of work and personal style.

Masonry Styles

This style is named for a jQuery plug-in that is largely responsible for the results you see here. The Masonry plug-in organizes rectangular items that vary in size and dimension by laying them out in such a way that they all fit together perfectly. It rearranges them like stones in a wall and the result is a solid structure of images or other content. Though this is not a new thing, it is incredibly prominent in the world of portfolio design. As such, I thought it was appropriate to highlight the approach here. Another popular plug-in that does pretty much the same thing but with a few other options is Isotope.

website-ideas-5

Alexa Falcone

The portfolio of Alexa Falcone is a perfect example of this. On this site you can clearly see the collage of images with a variety of sizes and dimensions. If you open the site and resize your browser, you will quickly notice that the elements rearrange to fill the available space. Using the Masonry plug-in, the content perfectly fills up any screen size and best of all, the plug-in does all the hard work for you.

website-ideas-6

Glauce Cerveira

Another great example is Glauce Cerveira’s portfolio site. Here you also see a grid of images neatly arranged into a solid wall of content. In this case, you will also see that the “bricks” being arranged in this way can include any type of content—you are not limited to images alone. Instead you can have a series of containers that get positioned magically, whether they contain images, text or articles.

If you are considering this approach, there is perhaps a single gotcha you may encounter. Since the plug-in is arranging the elements in the grid system, you have little control over what goes where. You can sort of place things generally based on the order you put them into the page. But as the screen size changes it will move things around. So, if the exact order or placement of the elements is critical to you, this may be a problem.

Finally, I want to mention a simpler alternative. If you are going to use this style and you find that all of your items have the same width (height can vary), you need not use a plug-in to get the same results. Simply look into using CSS-based text columns with the column-count CSS property. This turns a block of content (including images) in a container into multiple columns inside of the same container. The results look the same as the Masonry style (when the items are equal width), but without the complications of using a jQuery plug-in.

The Web Designer’s Idea Book features more than 700 examples of successful website designs, this guide can be used as a source of visual inspiration for web designers – explore what others have done, and discover how these ideas can be adopted to suit your own needs! See more of McNeil’s collection of beautiful webdesign, the book is currently available in My Design Shop.

2 thoughts on “Portfolio Design Trends & Website Ideas

COMMENT