Modern Element Trends In Minimal Webdesign of 2010

Monday, 07 June 2010 02:12

As you may heard, I’ve been working on site redesign for a long time already and now I am deeply researching modern elements in minimal webdesign - I decided to share my research with all of you. I think this modern&minimal trend will rule for some time, time for loud elements and web 2.0 cheap shiny badges has been long gone [...]

As you may heard, I’ve been working on site redesign for a long time already and now I am deeply researching modern elements in minimal webdesign - I decided to share my research with all of you.

I think this modern&minimal trend will rule for some time, time for loud elements and web 2.0 cheap shiny badges has been long gone – time for subtle emphasis, accents, big and stylish fonts, lightly textured backgrounds,grids, lots of negative space, usage of icons.

We cannot deny also huge technological possibilities with CSS3, HTML5, jQuery allowing you to do things which were impossible like 2–3 years ago. I also read IE6 is finally nearing extinction so we have one pain less from our shoulder and we can focus more on design and clean code!

What’s interesting this trend isn’t even minimal fully – while it has lots of white spice, you will still see some light textures, icons, bold fonts. Usually people called site minimal if it was just plain typographic, almost without any images and styling. While researching new trending I must say plain minimal won’t work anymore if you really want to create modern design. Minimal isn’t just black text on white background anymore, while you still need to reduce design to the most important elements, you will improve design with a little more coloring, minimal icons and very light textures.

You may be confused right now, but don’t worry – read further and I will show what I mean through real examples expressing modern design style in the best way possible! While I may not be so great into describing contents, try to pay attention and focus on important elements I mention and at the end of this article I am sure you will be fully charged with inspiration and understanding how to design your site using modern elements.

However this article isn’t meant for you to just get inspired to copy elements from other sites, but to understand where trending is going now. Maybe you will be the one to start new design trend? – keep experimenting and never stop learning, good luck!

Before we start I would like to drop down the most important features of modern minimal webdesign style:

Lot’s of effective negative space
Grid based web designs
Clear, big typography
Lightly textured backgrounds and patterns
Subtle,minimal icons
Light shading and color transition, letterpress effect
Ribbons, sketches, dashed lines,ruler, transparent like backgrounds
Keypress navigation
Clear shapes
Old-school design combined with HTML5,CSS3 and jQuery
Animated mouseover effects
Colors – usually monochrome with just one bright color to give little emphasis on links and titles.

Roger Burkhard

This is portfolio site of Roger Burhard who is web designer and developer featuring all the works he has been done here!

To describe his design style I have to quote his words:

“Hi, my name is Roger and I call myself a New School Designer which means I set great value on clear shapes, colors and typography. New School because I believe in the mix of design and technology. I love the challenge of simplifying complex information, to visualize and pimp them with the latest technology.”

I have to say his own words also describe current trending – with all the tools, technology and information available we now can create designs much easier, you just need to put little thinking in to understand how to simplify our designs and codes even more using latest technologies.

Thomas Maier

I think Thomas Maier site design is excellent example to show minimal simplicity with modern elements. It is portfolio and blog for Thomas with sliding navigation and all content is on single page. Navigating through this site is really easy – use main navigation and right bottom “back to top” button.

All elements are made easy to use, intuitive and design is amazing! Minimal icons, letterpress text effects, light shadowing!

Inspect Element

With huge buzz about new HTML5 and CSS3 collaborating with jQuery there is no surprise new effects have become one of the most popular modern trends! To understand what I mean mouseover to their logo and images – logo is rotating and images has nice shadow, you can learn this effect in this tutorial if you want to recreate something similar.

Besides that Inspect Element blog has implemented few more design elements which are very popular right now – I mean background behind logo, which is very well-recognized by designers who know how transparent background looks in Photoshop, paper boxes in the navigation also gives nice emphasis and clean look associating with clean paper.

Veerle’s Blog

Not long time ago Veerle created new site design (actually created completely new website to start fresh, but it’s another story) and her new design is a huge case of study with subtle beautiful design elements everywhere but in the same time keeping everything simple and clean.

I spent like 10 minutes just playing and researching all the great effects – little 2/3 sec. mouseovers create a feeling that site has something magical in it. What I like the most is effectively used white space and font selection. Icons are minimal, but sometimes bright to bring right emphasis for RSS, Twitter or just making Jobs section more prominent in the middle section.

Check all sections of this site, little design ideas are sparkling everywhere here!

Project Fedena

Project Fedena is the open source school management system based on Ruby on Rails. It was initially developed by a team of developers at Foradian Technologies. The project was made open source by Foradian, and is now maintained by the open source community.

But from design point of view what makes this site stand out is light background resembling light paper and hand-drawn icons and buttons looking very realistic and natural. Only two colors are used – dark red and 2 variations of grey color, pretty impressive. Strong grid system and white space just emphasize right elements – nice alternative to minimal icons, create minimal hand-drawn ones instead!

Kyee

This website is owned by Kyee from England creating beautiful websites which are minimal, beautiful and modern, I checked his portfolio as well and I was impressed, I suggest you to do the same for further inspiration and study how modern design should look in 2010!

What’s impressive in this particular design – it is simple, light without big design element, but it looks so professional!

At first there are just 1 main color (blue) used in different variations and that’s it, what creates that comfortable feeling when we visit Kyee portfolio page? A lot of white space – design is so hard, because it’s so simple – every section gets the space it deserves.

Everything else is minimal – even logo, really small font size, but headings really stand out to deliver the message.

Impressive portfolio and skill!

I just couldn’t stand and exclude this beautiful piece of art! Light noise added, nice separator with subtle logo and input fields also get well deserved space making hard for you not to start typing your contact info automatically!

WPBundle

Liam from WeFunction just finished his design on WPBundle which will be shop for bundle of webdesign candies like 10 Wordpress themes, icon sets and various other useful goodies, but to make this work of course professional site is necessary to prove their skill and create sales.

Since Liam and his team are really experienced they’ve put together amazing site – both from design and functionality point of view. In the screenshot also we can see how light texture is used to resemble with Twitter sky, but really such little elements rule the world now. Watch out for subtle dashed lines, calm buttons and little colors.

Emphasize just what you really need!

They Make Apps

But what if you want to create minimal site, but it is almost impossible because of all the functions and links you need to include in your design?

Create design – black&white, at least almost, using less is more even in colors!

TheyMakeApps website has recently won Webby and SXSV awards – it is online shop for mobile apps and also hanging place for all app makers dying to earn some money for good work.

You will notice here several trends – boxed background, precise logo ( by precise I mean it has been measured, which is popular trend lately too) and of course keep icons minimal using just color.

Simple Bits

SimpleBits web agency designs and builds simple, usable, and attractive interfaces that account for speed, file size, readability and accessibility — using web standards and also it has interesting blog in the meantime.

But now about design – little ribbons are gaining popularity as well, forget about web 2.0 colored badges – use them as naturally as possible. SimpleBits logo sits nicely on red ribbon, where it resembles with real bookmark we used to put in our books. Use natural colors and get resemblances in visitors – create deja-vu with real life.

Beautiful typography is definitely an important element here and notice CSS3 2–3 sec color variation on mouseovers in links!

DelliBarApp

Delibar is a full featured Delicious and Pinboard Mac client. Delibar focuses on giving Mac OS X users an easy and quick tool for searching, managing and sharing their bookmarks.

Looks like there is not any modern and great looking webdesign imaginable without self descriptive icons as one of the main graphic design elements.

Light radial gradient, shadows, 1 px thin lines, strokes and of course beautiful typography with subtle letterpress effect. Even design element behind “Pinboard Flavor” is really calm and almost unnoticeable.

Design Swap

Site has interesting idea to bring community together by redesigning each others website.

By Trent Walton words:

“DesignSwap’s sole purpose is to promote collaborations between designers by saying one simple thing – I design on your site, you design on mine”.

I am curious how this project will work out and suggest you to join in to create new friendships and grow your experience, but now about design.

All the main elements are in the “above the fold” section showing branding and which artists are now exchanging and doing redesigns. Both circles have nice mouseover effect. Make notice on subtle texture (which is not noise in this case),many subtle letterpress effects on text and icons.

Red ribbons and sketched characters seem nostalgic and odd at the first time, but little CSS3 effects clearly show you designer knows about latest technologies and trends!

Yaron Schoen

This is personal portfolio site of Yaron Schoen, designer based in NewYork. It’s important to create the first impression good and here by quality chemistry icon expression and slogan you get immediately introduced with Yaron’s world. Design shows he is confident about his skills and while browsing his site you will also feel his experience.

But what about modern trends? Logo is minimal, even loud header uses as little graphics and colors as possible. All design is kept clean and grid based, I almost feel the most white space you will be using, the better results in the most cases you will get. Just don’t exaggerate or maybe you need to do exactly that!?

Design Informer

I couldn’t exclude this great design blog from this collection since I consider Jad Limcaco design is pure greatness including simplicity in such complex website.

Navigation and input boxes has nice mouseover effects using CSS3, header has subtle graphic to make it more interesting – there are many little and subtle design elements you will not notice immediately, but it all together feels natural. You just have to notice those elements, use them in your own designs letting visitors enjoy information you want to deliver.

Nice element is that little ruler separating content section from sidebar – small things matter!

Informer-trendy-webdesign-inspiration

Uh and did I mention this valuable art directed post teaching how to use grids to achieve clear separation of content.

Hot Meteor

Hot meteor is web agency which specializes in web, print, and branding. Design is kept really minimal and interesting it has been centered, which is unusual practice. Transparent gradient in the static header also gives nice scrolling experience!

Crush Lovely

Not used a lot just yet, but I am sure keypress navigation will gain huge popularity in future to let visitors switch categories and slide images easier. When I used keypress navigation here with left/right arrows in this single page design it was really great experience to slide through different backgrounds and styling in elegant way.

Usable Efficiency

Very valuable video tutorial site teaching you how to improve and design websites. Author got very clean and professional site designed with him, you an expand extra info – such as comments and description about video just if you choose to.

Arty Papers

Portfolio site by R. Marie Cox, here besides white simplicity I like tiny small logo and navigation – looking great! Just for fun, check his 10 previous site versions in the footer, interesting evolution through years!

Arty-papers-minimal-trendy-webdesign-inspiration

i-Design Studios

iDesign Studios is a web design and development company specializing in creating custom web sites, focusing primarily on custom WordPress theme design and development.

Look how dashed lines do all separation and not a single bright color is used? Check out also interesting feature to switch to dark/light theme – it’s nice to see they think about reader by offering little personalization options

Franzz

Personal portfolio page by Francesco Fonte, nice addition to site is percentage skill graph, where he measures his own skills by percent. I couldn’t avoid to notice subtle background texture and light “more” – such eye candy!

Monty Lounge Industries

This is a portfolio site created by experienced web designer Kevin Fricovsky and huge titles do make an impression!

Dustin Allen Pace

Portfolio website of 23 years old web designer Dustin and this is his showcase site. Play with navigation to enjoy light mouseover sliding.

Pixelumbrella

Pixelumbrella is the online portfolio of Seattle-based web designer and developer Nick Robinson.

5 Squared

Single page portfolio website – definitely saves clicks and some of the expensive time!

Skylar Anderson

Jason Duerr

THG Creative

Einserver

This is personal blog and portfolio site by Florian Pichler from Deutchland. What I liked here was little font size – maybe for bigger resolutions it would be too small, but for my laptop it was just the right way! Interesting – everything is small, but white space is used in the right way and that’s what makes it feel and look so good I think.

Great design element here is animated navigation too with sliding ribbons on mouseovers and active sections.