Posts

Welcome to the weekly Design & Animation Inspiration #4

This week there is a I have found some UI interactions on the topic “Neumorphism”. Probably Neumorphism Interfaces is not a thing anymore, but the dribbble post from my colleague Stan Gursky gave me the idea to do some research on this topic.

Stan has built a Neumorphism prototype in protopie.io, where light and shadow are dynamically aligned with the angle of the smartphone. Awesome stuff!

This Week Neumorphism Styled UI Design

 

Dynamic Neumorphism Lightswitch (Video) by Stan Gursky

You can try it out yourself (with ProtoPie Player):
https://cloud.protopie.io/p/904970c75b

 

f6e5b4010a95ad9c05bd3532c266a91c - Bärenstark - Digitale Lösungen

Book Subscription App 📖 by Ariel Jędrzejczak for Riotters

 

6c9cb8deabc71b3bb158f6ab7ca653ff - Bärenstark - Digitale Lösungen

Neumorphism UI Trend 2020 by OTAKOYI

 

ae160f8f2f45438a72013c1bbbc2a36d - Bärenstark - Digitale Lösungen

NEUMORPHISM TUTORIAL by Julia Shagofferova

 

16563f664e6a9f11229191768ca9ea27 - Bärenstark - Digitale Lösungen

Dark Neumorphic Website Design by Samson Vowles🕺 in Neumorphic UI Kit

 

9ecf9ad4389b4797936e6298f197b414 - Bärenstark - Digitale Lösungen

Neumorph Clock by Vadim Demenko

 

2b4c34d902a7988b8466a6844b62d675 - Bärenstark - Digitale Lösungen

🎶 Neumorphic Music Player by Veno for Overlap Studio

 

35202e1791330752cc633e60512cf54c - Bärenstark - Digitale Lösungen

Neumorphism UI // Notification by Cosimo Scarpa

 

3b3c08a999b779f1745b814d9c2c6ac0 - Bärenstark - Digitale Lösungen

ING App Redesign by Matthieu Leung

 

59a71e28f3073b422359be37ac6a3fd0 - Bärenstark - Digitale Lösungen

Music App by Paulina Corona

 

3a2edcc409f6d4cf3c51a025d0a21550 - Bärenstark - Digitale Lösungen

Soft Text Input for Chat by Vincent Snagg

 

4a229b0faf0eaddae13dc0ba1866d1e4 - Bärenstark - Digitale Lösungen

Florist App by Darya Popkova

 

Thanks for stopping by.

For more content follow me on:
InstagramDribbbleMedium | Twitter

flecsable stylescape dynamic 2 - Bärenstark - Digitale Lösungen

The purpose of stylescapes is to provide the company’s stakeholders with an impression of the future brand and is therefore a suitable tool to make the design process transparent.

Stylescapes help to demystify the idea that a designer can get around the corner with the perfect design solution in a short time just by staring at his computer. Of course, when developing specific design solutions, one goes through several phases of research and tries to find the right look for the target group and the product.

Basically, Stylescapes help to transform the terms defined in the briefing discussion with the customer or in the brand workshop into images.

Stylescapes “are the collection of highly curated images, designs, type, textures, and colors that help defined visual direction, but more importantly, will get you buy-in from your client before you design anything.

-Chris Do, Blind CEO

 

Advantages

  • Makes the design process transparent and involves the customer.
  • Buy-in from customer before starting to design specifically for their product or service
  • Minimizes the risk of designing something that does not meet the expectations of the customer or the target group.
  • Promotes customer loyalty: Your customer will love it if you present the visual lines at a personal meeting, especially if the stylescapes have been printed out in large format beforehand.
Stylescape Wine-Store Key Word “ Modern + Cultural”

Stylescape Wine-Store Key Word “ Modern + Cultural”

Structure

Stylescapes are more than moodboards. While moodboards are often loosely cobbled together images, stylescapes follow a scheme and always contain visualization of the target group, logo examples, fonts, colors, graphic elements / design elements, imagery, application examples such as websites, brochures, packaging, etc. tailored to the client and the project.

The stylescapes can either be very contrasty to each other to cover the widest possible visual spectrum, or they can lean on each other. This depends on how detailed the desired appearance has already been described.

View this post on Instagram

Stylescape Moodboard 2.0⁣⁣⁣⁣ ⁣⁣⁣⁣One part of the process to develop a brand is to determine the visual line for the company together with the customer. Therefore stylescapes or moodboards 2.0 are a great tool.⁣⁣⁣⁣ ⁣⁣⁣——⁣⁣⁣ ⁣⁣⁣BRAND KEY WORDS:⁣⁣⁣ ⁣⁣⁣Young, structured, dynamic, self-confident. On this stylescape we focused on the Keyword „Dynamic + Structured“ as a trigger for the visual line.⁣⁣⁣ ⁣⁣⁣——⁣⁣⁣ ⁣⁣⁣Target Audience:⁣⁣⁣ ⁣⁣⁣Channel manager of a leadership position in a software company⁣⁣⁣ ⁣⁣⁣——⁣⁣⁣ ⁣⁣⁣What do you think of this one?⁣⁣⁣ ⁣⁣⁣——⁣⁣⁣ ⁣⁣⁣Need to communicate with your audience, clients or customers visually? Need a logo or full branding? Hit the email at my bio or DM me to create your visual story.⁣⁣⁣ ⁣⁣⁣@wirsindbaerenstark ⁣⁣⁣ ⁣⁣⁣⁣ ⁣⁣Are you looking for a new identity for your brand? Let’s talk! ?⁣⁣ ⁣⁣-⁣⁣ ⁣⁣-⁣⁣ ⁣⁣-⁣⁣ ⁣⁣-⁣⁣ ⁣⁣@welovebranding⁣⁣ ⁣⁣@thebrandidentity⁣⁣ ⁣⁣@branding_design⁣⁣ ⁣⁣@branding.mob⁣⁣ ⁣⁣@worldbranddesign⁣⁣ ⁣⁣@bestofpackaging⁣⁣ ⁣⁣@spruzzo.brand⁣⁣ ⁣⁣@the.branding⁣⁣ ⁣⁣@landorlondon⁣⁣ ⁣⁣@uxgoodies⁣⁣ ⁣⁣-⁣⁣ ⁣⁣-⁣⁣ ⁣⁣-⁣⁣ ⁣⁣#branding #logo #graphicdesign #marketing #brand #behance #dribbble #logos #socialmedia #logodesigner #logotype #typography #business #graphicdesigner #logodesigns #designer #stylescapes #webdesign #brandidentity #advertising #entrepreneur #uidesign #ux #digitalmarketing #type #interior #lettering #decor #marketingdigital #handlettering

A post shared by Bärenstark (@wirsindbaerenstark) on

 

Goal: “Choose wisely my friend”

In the end, you are forced to commit to a stylescape and thus pave the way for the development of the brand identity (logo, font, colours, visual language, website, etc.).

An example of when stylescapes are used in the brand process can be found here in the Brand Case Study flecsable

Stylescape Wine-Store Key Word “Cultural + Modern”

Stylescape Wine-Store Key Word “Cultural + Modern”

Download a set of 10 handmade 3D animated Icons completely made within After Effects CC 2017 with the new Cinema 4d rendering. Cinema 4d as a separate program is NOT needed!

You are able to fully edit and render those items directly in After Effects CC 2017 and without the use of Maxon Cinema 4D.

Change the 3d camera view position, colors or size of the object, extrusion / depth or even the light position to get a look you like right in After Effects.

Read more

Portfolio Items