Designing a website isn’t just all graphics and strings of code, it takes style. This means that with most websites you come across, you’re bound to see a certain style being implemented or adapted. With these styles designers and others are able to reach a broader crowd and extend their brands or portfolios to the possibility of being recognized by potential clients.
There are a variety of different styles, and with it being just as hard to choose one of them, we’ve taken the liberty to discuss the styles that stand out the most. Hopefully you’re able to find use of this post and effectively implement a style or two into your portfolio.
1.) Photo-Manipulation
Implementing photo-manipulations into your portfolio will surely grab the attention of your visitors. Your users will immediately be engaged and depending on the what’s in your portfolio, you can even include one of your works of art into your web design. Many times this style is used as a large background that surrounds that pages layout.
Here are a few examples of websites that have adapted this style:
Iestudio
IEstudio has a beautiful website that’s innovative as well as interactive. They grab your attention at an instant with their photo-manipulations that pop-up through animated movements.
Greydient
The first image you see on this site is a creative photo manipulation that’s surreal. The sites functions are similar to drag and drop and you the navigation travels in a horizontal direction.
Davehillphoto
This is an extraordinary portfolio that has all of the photographers work accessible. The site is simple, straight to the point, and concise.
Finchleywebdesign
The main reason this site was chosen was because of its layout and the way the hands on both sides are “holding” the main body of content like if it was a presentation.
Carlosalonsobodas
This site has a simple black and white theme with a large background of a real photograph containing several added manipulations. It has a gorgeous layout, and although it may not seem like it, the site uses Flash technology.
2.) Illustration and Vector Art
One of the most common styles that designers use to attract attention is the power of illustration and vector graphics. If you’re a graphic designer or a web developer with the knack for art, then this style is more than likely the one that fits you best. As soon as your potential clients get to see your website they’ll get a taste of your creativity on the spot and they’ll also be attracted to your creativity.
Below you’ll find several portfolios that have adapted this style:
Kx2web
Kay Times is an extremely simple site that releases a new illustration (magazine cover) every month. The illustrations are witty, have meaning, and catch your attention.
Lesillustrationsdelapin
This site has beautiful hand-drawn illustrations all over the layout. This attracts users, however, you have to be careful not to over-do-it.
Rawkes
Rawkes uses a unique illustrative style to captivate users. The website engages the users with the header and later entices them to keep reading and finding out more with small details and other illustrations.
Sebdesign
Sebdesign is a brightly-colored and detailed website that instantly arouses curiosity as you see the homepage load.
Noeldesign
This web portfolio was designed with a theme somewhat similar to Rawkes, however, the amazing detail and 3D illustration is where the difference lies.
3.) Amazing Typography
Typography is a stand-alone element of design that can make or break a website. If your typography is not inline with the style of design, or if the actual types are wrong, then your website is pretty much doomed to fail. Typography in a web portfolio can be inspiring, attractive, engaging, and captivating. It’s all in the way you implement it.
Using great typography you’re able to display your content and work much more elegantly and on a much higher level of professionalism. With the rise of various effective typography tools such as Typekit, embedding beautiful typography on your website is as easy as 1, 2, and 3!
Here we’ve found a few websites that have applied amazing typography to their portfolios:
Simonemaranzana
This website practices an elegant use of typography and utilizes a variety of fonts that mesh well with the overall theme.
Newconcept
NewConcept in their logo and their header to grab attention. If you pay close attention you’ll see a shift in the font’s weights, sizes, and colors.
Pngised
This website has beautiful typography that pops out from the screen. There are three main colors used along with the type, and words that need to stand out are emphasized correctly.
Notoriousdesign
Notorious Design utilizes a grunge style for their type. The typography makes the navigation menu highly accessible and usable.
Secondandpark
Second & Park uses typography to set a professional mood all while keeping it simple and classic. For the most part, the same font is used throughout the site, what changes is its size and weight.
4.) Textures and Patterns
Many use textures to add a certain touch of seriousness, professionalism, or creativity. Patterns exist everywhere, and they can be seen in a wide variety of websites, however, using them correctly is where it can get a bit touch. Most of the textures are used within a website’s layout, meanwhile patterns are usually what’s used to style a websites background.
The following portfolios display a prominent use of textures and patterns throughout their design:
Jameslaicreative
James’s website uses exceptional texture and simplicity throughout the sites layout. Different elements seem to have acquired unique textures, for example, the “price tag”.
Theseen
This site contains a grungy style and resorted to a variety of textures that mesh well together. It’s definitely attention grabbing and unique to say the least.
Colourpixel
ColourPixel has a pattern that contains various small squares with a different color or gradient. This is effective and works well for this site, however, you should be careful implanting a pattern such as this one, it can create a sort of chaotic look.
Ths
THS has a grungy texture for a background that has a few aspects that look transparent.
Davidhellmann
This site has a well designed background that contains a pattern. The background also has a rough textured look and feel to it.
5.) Retro and Vintage
Retro and Vintage styles have been around since the early 1930’s, they have managed to break the mold of design, and offer creativity and uniqueness to anyone who views them. These styles can make anyone feel as though your designs are a part of history. They’re vibrant, ecstatic, and give you a much better chance at grabbing attention then almost any other style you can implement. All though these styles have become extremely popular, any website that manages to implement them effectively will conjure up some attention and respect.
Here we have a variety of websites that have managed to take the retro and vintage style and properly create amazing web portfolios out of them.
Synchmedia
Vintage/Retro website designs are great and this one is nothing less. What makes this website have a vintage look is the robot and the design, colors, and gradients that the robot has.
Eightytwodesign
This vintage design uses textures, color, and “old” type to define itself. The website is well organized and contains captivating illustrations.
Teamfannypack
There exist a few vintage websites that implement the magazine or newspaper look, however, this one stood out the most due to the choice of typography, “old paper” texture, and the look and feel of the photographs found all throughout the site.
Allstarlanes
This website has a gleaming feel to it. The logo, gradients in the home image, and clothing on the illustration makes this a retro-styled website.
Analog
The analog website is vintage, however the “old” illustration contains a vector feel to it. The typography is also a dead giveaway since it looks like an old type writers font.
6.) JavaScript Awesomeness
Adding some JavaScript to your website can go a long way. One of the most common and beneficial uses for JavaScript is to create animated effects. When you use animation to attract users, you’re striving to make your portfolio more exciting and interesting. Therefore, you should carefully select which JS animation effects work best with your site. Use JavaScript sparingly, and make sure you don’t over-do-it with the animation. This can make your portfolio look tacky and hard to interact with if used incorrectly.
The following are several websites we’ve rounded up that use JavaScript animation effects to interact with and captivate the user.
Delugestudios
This website utilizes JavaScript to scroll the previous work area from left to right, in the testimonials section for fading, and the navigation for scrolling the site vertically.
Howarths
Howarths website utilizes JavaScript to create somewhat of a flipping book feel. The pages can be individually moved in order to be read.
Ericj
Eric Johansson’s portfolio is detailed and uses a scroll bar to move a man on a scooter to where you need to get to. When you reach the portfolio you also have to use your mouse to pull down the area where you’ll find his works.
Eyedraw
Eye Draw uses awesome JavaScript animation that allows the user to hover over a project and get a much larger preview. When you place your mouse over the selected project all the attention shifts to that one project and that makes it much easier to view the portfolio.
Yourauxiliary
Auxiliary Design’s web site uses a cross-location movement to help the user interestingly navigate through the sites content.
Nofrks
Nofrks is similar to the Auxiliary website in terms of movement, however, when you click on the navigation links the only movement you see are vertical and horizontal. It gives the site a much more organized feel of things while keeping its creativity.
