Thursday, September 21, 2017

The “Digital Retro Movement”: A Look at Rebooted Design Styles

overhead of a series of electronic equipment in vogue in the 80s / 80s passions

Trends come and go, and some even come back again. While that’s common in the fashion world where mom jeans and crop tops have made a recent resurgence, it’s surprising to hear cutting-edge startups and Fortune 500 companies are also embracing the retro trend. The country of Norway has jumped on it too with its newly designed, retro-inspired currency.

Before we get into retro design, it’s worth noting another popular—and very different—design trend to see the contrast in styles. Minimalist design aims to boil everything down to just the essential elements. On the other hand, retro design uses a variety of elements to create a vintage feel that harkens back to the past. Restraint is not one of its guiding principles.

Now let’s look at two ways retro design is taking shape in the digital world.

Pixel Art

From games like the hugely popular Minecraft to an ad campaign by Coke, you can see evidence of pixel art’s comeback all around you. Based on the two-dimensional design of 8- and 16-bit video games from the ‘80s and early ‘90s, today’s style is an intentionally low-res homage to that era of 2D design.

The article “9 Tools for Creating Retro Pixel Art” looks at three styles of pixel art and the best tools for replicating each of them. Because of its deliberately computer-generated, 2D style, you might need to use particular tools to achieve the look you’re going for.

1. Static pixel art

Static pixel art is the most basic type and the easiest to create. You can use a classic program like MS Paint (which isn’t being retired after all) to make simple, pixelated styles. Another basic option is Make Pixel Art, which is a free, web-based tool.

If you’re looking for more features, Pyxel Edit offers support for palettes and layers—a must-have for professional-grade pixel art. In addition to basic draw and shape tools and some support for animations, the tool provides the ability to create tilesets, which you’ll need to design levels in games.

For Photoshop-like functionality, GrafX2 is a fully featured bitmap editor with robust features for game designers and 2D artists.

2. Animations

Characters and objects in games can be created using sprites, a basic type of animated pixel art. Simple sprites alternate between two frames to create movement, such as a character walking.

There are several programs you can use to create sprites:

  • GraphicsGale: A freeware, Windows-only, animation-focused pixel art editor that’s widely used by experienced pixel artists and features live preview and onion skinning
  • Pixen: An editor for MacOS and iOS with basic features, plus a handy film-strip-style view and the ability to export animations
  • Piskel: An open-source sprite editor for Windows, MacOS, Linux, and Web with a live preview option, robust feature set, and a gallery option to make your animations publicly viewable
  • Aseprite: A professional-grade editor for Windows, Linux, and MacOS with advanced tools and features
  • Spritekit: A framework for creating 2D animations for gaming apps. Learn more about it in this article.

3. Isometric art

Pixel art falls into two categories: isometric or non-isometric. Isometric art is commonly used in games to create the look of a three-dimensional space by using a bird’s-eye perspective. Most pixel art programs enable you to create isometric art, but two that work well are:

  • Pablo the Pixel Art Builder: A Photoshop add-on that enables you to create isometric shapes from 2D images
  • Triangulart: A JavaScript-based graphic editor you can use to create isometric illustrations

Read more about pixel art and the tools you’ll need to create these throwback designs in “9 Tools for Creating Retro Pixel Art.”

Retro Web Design

In “The Rise of Retro Web Design,” Matthew Garrepy traces the genesis of the retro movement to the ‘90s when a group of trendsetters started sporting acid-washed jeans, Vietnam-era jackets, and T-shirts, which had previously been reserved for the gym or athletic field.

What was old was suddenly cool again, with kids wearing styles hailing from 20-30 years ago. From there, the trend spread and soon mainstream retailers were turning out looks inspired by the ‘60s, ‘70s, and ‘80s.

One cause for the seemingly sudden love of retro? The internet. As Garrepy writes:

“On the surface, this fascination with ‘retro-mania’ seems to have appeared out of thin air. But there was more happening behind the scenes that led to this tectonic shift in pop culture—and one huge, historical event that occurred at the same time and was the catalyst for revving up retro design: the birth of the Web.”

Thanks to the internet, people had instant access to movies, music, clothing, and TV shows from the present time and yesteryear. The retro movement spread from fashion to music and then to the web.

Past meets present

In the digital space, everyone from Chanel to KFC to Harley-Davidson has embraced the vintage trend in their websites at one point or another. Even banks and government agencies have jumped on the bandwagon.

How does vintage style translate to the online world? You can see it in the photography, illustrations, typography, colors, and even the navigation of websites. Retro design elements have been inspired by posters, records, cassette tapes, CDs, and ads from the past.

One recent example of a retro website? Guardians of the Galaxy Vol. 2 site. As the site loads, you see a cassette tape. From the typography to the imagery to the color choices, the site has a very ‘80s feel to it—just like the movie itself.

Ready to give your website a retro vibe? Read “The Rise of Retro Web Design” for tips on creating vintage web design.

To learn more about design and how to find the right designer for your project, check out these articles from Upwork’s Hiring Headquarters.

The post The “Digital Retro Movement”: A Look at Rebooted Design Styles appeared first on Upwork Blog.



from Upwork Blog http://ift.tt/2yrPgkx

No comments:

Post a Comment