Harmonious Relations between Past and Present in Web Design

Key features of vintage ­style web design and contemporary ­style web design

  • Share on Google
  • Share on Stumbleupon

Can one assume that the past, the present, and the future can live in parallel realities that cross paths from time to time? The way we perceive reality can differ exponentially from one person to the next. Things that seem ordinary to the average human being can appear miraculous to the creative mind.

If you are reading this post, most likely you belong to the latter group. You can’t but agree that there is no future without a past. Our past teaches us precious skills and gives us the experience we need for a brighter future.

Smart web designers live by this rule, everyday learning about and keenly following the latest web design trends with the utmost interest and attention.

Today we will take a look at the uncommon phenomenon of crossover web design styles see some wondrous examples. Today we are talking about a vintage contemporary mash­up. In the right hands, these styles can complement each other leading to unexpected and delightful results.

Let's break down the most obvious features of each style.

Key features of vintage ­style web design
  • 1) Inimitable typography. It can be characterized as elegant and classy with a mix of script fonts, cursive, handwriting, roman & sans­serif typefaces.
  • 2) The use of different textures: wood, stone, paper, etc.
  • 3) Cute illustrations – either humorous or serious ones (maybe from old posters, movies, newspapers, CDs, vinyls, ads).
  • 4) Old­fashioned motifs and patterns.
  • 5) Retro and vintage radios, TV devices, cars.
  • 6) Retro and vintage packaging, scrapbooks, pop­art elements.
  • 7) Faded photos, vibrant, loud, rainbow, high contrast, neon­style colors.
  • 8) Torn, used, stained, yellowish paper.
  • 9) Dark, dirty, grunge colors (brown, dark red, dark blue) and textures.
  • 10) Old­style signs and decorations.

Key features of contemporary ­style web design
  • 1) Simplicity and focus on utmost usability.
  • 2) Responsive layouts. Needless to say how important they have become with the rise of the tablet and smartphone.
  • 3) Retina support. The demands of the time, once again. In order to support retina displays developers need to include additional media content for big resolutions.
  • 4) Fixed header bars ­ it’s a matter of usability. When the main menu remains in sight, the user is saved from additional, unnecessary scrolling.
  • 5) Large photo and video backgrounds. High quality photo or video backgrounds make websites more appealing.
  • 6) CSS transparency.
  • 7) Minimalist landing pages. The purpose of a landing page is to make the user do what he/she is required to. Here no long texts are needed. Large, clear call­to­actions are enough.
  • 8) Digital QR codes.
  • 9) Social media badges. All of us have social accounts and want quick shareability of the info we consider useful, funny or important.
  • 10) Detailed illustrations. Modern illustrations look like real works of art.
  • 10) Infinite scrolling. Analytical data shows that one page layouts look more appealing to the users.
  • 11) Sliding webpage panels. They simply make the viewer go: “Wow”.
  • 12) Huge typography. Fewer words written in big fonts guarantee that the user will read your message.
  • 13) APIs and open source. Open source platforms let developers all over the world make contributions improving their functionality.
  • 14) Deep box shadows. Long shadows have become a modern design trend that appear on the bases of flat layouts. A flat object casting a disproportionate shadow looks cool and creative.
  • 15) CSS3 animations. These fun, cross­browser animations add awesomeness to modern websites.
  • 16) Vertical navigation.
  • 17) Circular design elements. They simply look cute.
  • 18) Flat elements. Enough with skeuomorphism! Today’s web has a flat face.
  • 19) Use of bright colors. Minimalist approach makes neon colors a good means of drawing attention.
  • 20) Lots of whitespace. Enough negative space makes the user concentrate on the essential content.
  • 21) Dynamic grid layouts let you arrange elements vertically, positioning each element in the next open spot in the grid. The result minimizes vertical gaps between elements of varying height, just like a mason fitting stones in a wall.
  • 22) Content first. At last, everything mentioned herein above and under is done for content’s sake. Content rules.
  • 23) Metro style. Simple, cheerful tiles with understandable outlined icons are extremely popular as they remove the boundary between regular and touch interfaces.
  • 24) Parallax. This scrolling effect in web design is the technique that features layered images that move around the website in different speeds/perspectives creating a nice, interesting 3D illusion. It provides a more interesting onsite experience.
  • 25) App style interface design. Utmost user­friendliness and transparency.
  • Inspired Email Marketing

    Inspired Email Marketing

    Ribbons, stickers, geometric backgrounds, vintage fonts, decorative elements… Dynamic animation, scrolling navigation... Past and present at their best!

  • Font Walk

    Font Walk

    See these flat outlined icons created in a retro style? They just as amazing as the rest of the illustrated layout with a simple, infinite scroll navigation.

  • Vibes Design

    Vibes Design

    Huge fonts, borders, neon colors, onepage layout over a black, wooden texture… A powerful combination, isn’t it?

  • Perkier

    Perkier

    Note the combination of vintage tags, stickers and illustrations with absolutely flat elements and trendy neon colors. Slider photos create a background for small illustrative elements.

  • Great American Whiskey Fair

    Great American Whiskey Fair

    Minimalistic vintage design? Why not? Everything is possible when the past and the present meet.

  • Sallee Design

    Sallee Design

    Blue, grungy texture with huge, legible text impressive. And this moustache menu… We like!

  • Diy

    Diy

    This wall of hexagonal retro illustrations is really incredible especially combined with semi transparent text blocking with bright, colored, ultramodern calltoaction buttons

  • Cyclemon

    Cyclemon

    Again, faded vintage colors and illustrations are combined with scroll down navigation and concise texts.

  • Lambs Navy Rum

    Lambs Navy Rum

    This contemporary site perfectly renders the feel of an old port tavern due to the mix of modern, grunge and retro elements.

  • Copag

    Copag

    An absolutely vintage layout with builtin video in the center… Looks very intriguing

  • Savoura

    Savoura

    Those sketched illustrations of an old town and faded background help the company convey the idea of a timetested corporation the customers can rely on. Lots of negative space and short powerful text messages are trends from today.

  • Gronnpose

    Gronnpose

    Traditional, retroillustrative layout of this website contains modern outlined elements and social media icons.

  • Book Cover Archive

    Book Cover Archive

    Grid layouts are undoubtedly en vogue, but look at the background texture, heading font and sticker, they scream vintage.

  • Field Notes

    Field Notes

    Old paper backgrounds and grungy elements create a weird mix alongside this onepage layout containing current embedded HD quality videos.

  • I Shot Him

    I Shot Him

    What do you see here? A regular skeuomorphic layout? Try scrolling down, there is a surprise waiting for you below.

  • Julia & Artem

    Julia & Artem

    Wedding ceremonies are events that don’t change much throughout the ages, however, the author of this template managed to put a modern, humorous spin on this special day.

  • Angry Bear

    Angry Bear

    The website combines a dark, illustrated background, vintage fonts and elements with logos arranged in an uptodate grid structure and flat text blocks.

  • Forty One Twenty

    Forty One Twenty

    This modern video player looks very cool in this pseudovintage environment.

  • Get Enigma 64

    Get Enigma 64

  • Switch

    Switch

    Have you ever heard the term “retro minimalism”?

  • Oxide Interactive

    Oxide Interactive

    Interesting angles of content placement… And the division into retro and modern parts!

  • Handiemail

    Handiemail

    This website seamlessly combines a grunge style, vintage fonts and stickers with fixed position menus and HDembedded video from Vimeo.

  • These are Things

    These are Things

    A good portion of quality humor makes every website a hit. The couple stick to the center of the page and travel from one room to another while you scroll down.

  • We Grow Cherries

    We Grow Cherries

    How do you like this odd mix of retro photos, grunge icons and quality highresolution photos? We consider it artistic.

  • Heritage Chickens

    Heritage Chickens

    The author of this website managed to combine organic wooden textures, vintage fonts, intricate decorative elements, with currently popular fixed headers and cool visual effects powered by jQuery lightbox.

  • Rivers and Robots

    Rivers and Robots

    This website mixes wavy edges, blurred retro images, elegant fonts and a clean layout with builtin video and audio players. Tooltips are also available for visitors’ convenience.

    Conclusion

    So what was all the fuss about? How can retro elements can benefit your contemporary website? In our opinion, this technique is used in order to gain an emotional response from visitors to the page. Vintage motifs stir up feelings and awaken nostalgia meaning customers return time and time again. In combination with the right amount of usability and simplicity of modern design will help boost your site’s popularity.

    If you have your own thoughts and exquisite examples of perfect past and present crossover in web design, we will be happy to read your comments to this article.

Awwwards

By Helga Moreno

Helga Moreno is a learning junkie, requiring a new dose of fresh information every day. She is always keeping her notepad at hand in order not to miss a single thrilling event happening in cyberspace. She diligently puts down all her thoughts in order to share the most interesting of them with web community in general and TemplateMonster's readers in particular.

templatemonster.com/properties/styles/flat-design