Mercedes Benz Illustration - Side Car

Mercedes Benz Illustration by Romain Trystram

Mercedes Benz Illustration

During 2016, the german agency Realgestalt commissioned Romain Trystram to create another set of illustrations for Mercedes. As everyone knows, Mercedes Benz is one of the most valuable brand in the world, thank to their high-class vehicles. Probably also thank to the success scored by the company during the previous row of illustrations, they decided to go again with the talented illustrator from Morocco.

In his Behance presentation, Romain shared both flat illustrations and real applications on mobile devices. He shared examples of his work presented on iPads, websites and real paper magazine.
One of his keys characteristics are colors and perspective. In fact, he loves to play with city landscapes, specially during night. In this way, he is able to experiment as much as possible with lights and colors. Also looking at his previous work, we can see an extensive use of violet and cyan colors, which are generally supported by dark blues tones.

The Set

This set features five illustrations. Two of them contain a shiny Mercedez car as the main subject. Also the third features a car, but it is less noticeable, because it presents an air shot. The last one features a beautiful night-time landscape of a metropolis.
Both the first two illustrations feature an incredible Mercedes Benz Illustration, which looks almost real. The first one contains a side shot of the car, featuring a colorful outline, with stars that enrich the composition. The second illustration contains a frontal shot of the car with a semi-circular stripe positioned above the vehicle, which contains three icons. They represent some of the features that you can have with the car.

In the third illustration, Romain represented an aerial shot of a street during night-time, with a tiny car in the far right and two trucks around it.
The very last illustration, we have a beautiful landscape of a city at night, where you can see illuminated skyscrapers in the distance and a red-yellowish bridge in the foreground.

In Conclusion

Romain did an awesome job also for this set of illustrations. I wouldn’t be surprised to see a third set of illustrations made for Mercedes in the upcoming year. But the real challenge will be to come up with more creative solutions and scenes.
Designer: Romain Trystram
Source: Behance



10 Best UI UX Design of January 2017 - Braun

10 Best UI UX Design of January 2017

10 Best UI UX Design of January 2017

January has been a great month for UI-UX Designs. A lot of Agencies, Freelancers and also Independent Designers built incredible products.
In this article, we are going to list 10 best UI UX Design of January 2017.

Moximo. Recruiting app.

Art Lemon’s team built an incredible application to look for jobs. It features more than 500 UI elements, a clean interface and even incredible illustrations. The main colors used are green and orange. In their presentation, they featured all the steps that brought to the creation of the app, including the UX and final UI.

Lonely Planet HP – Marquee exploration

In this quick shot, Claudio showed some new animations introduced to the Lonely Planet website. They featured a very interesting opening screen, with a zoom-out on the photo and a quick appearance of the main elements. But the most interesting element that makes the animation pop even more is the presence of the lenses’ light particles, giving even more depth to the overall composition.
Designer: Claudio Guglieri
Source: Dribbble

Braun site exploration

Eddie created a concept for a possible Braun redesign, featuring a clean and simple design, but never trivial. In fact, he took a particular attention to the button’s shapes and the typography.
Designer: Eddie Lobanovskiy
Source: Dribbble

InVision’s 2016 Year in Review

InVision is one of the most loved tool by Designers, and in order to celebrate their success, they built a website that contains all their achievements from the past year. It features a clean UI supported by eye-catching colors and soft animations.

A new Dropbox.com

In January, Dropbox reinvented the way people collaborate with each other. They released a completely new Home page and two new products. You can read more about their new products in this article.

CroSpots

KREATIVA Studio produced an incredible design of a platform that allows people to discover and explore new places. It features a clean and minimalistic design, with some really interesting details, such as the big red circle placed in the top left corner.
Agency: KREATIVA Studio
Source: Dribbble

Dashboard Engie

AgenceMe shared a small part of a much larger project made for Engie. This small shot features everything a Designer would like to see: A great use of typography, colors and visuals.
Agency: AgenceMe
Source: Dribbble

IoT navigation for smart home product interaction

Fantasy is an incredible agency that has worked for some of the major brands in the world. Gleb is part of the team, and he always delight Dribbble’s users with incredible interactions. In this case, he showed an interaction for a smart home product, supported by two incredible transitions.
Designer: Gleb Kuznetsov
Source: Dribbble

serverstack

In this UI design, Fabio shared two screens of an iOS mobile application. It features a clean minimal UI, with both the light and dark side. The second one is the most unique, thank to the wired illustration that covers the entire bottom right part of the screen. It is indeed a good touch to make the screen pop and to fill a possible gap.
Designer: Fabio Basile
Source: Dribbble

Pricing

Last but not least, we have an incredible design built by Fireart Studio. They featured one of the most “battered” sections of a website, the Pricing section. Generally, it is composed by a couple cards that features the prices and features. In this case, they created a very creative design by adding unique illustrations.
Agency: Fireart Studio
Source: Dribbble



Beats Redesign - Cover

Beats by Dre Website

Beats by Dre Redesign

Beats is an iconic brand established in the music space. People instantly recognize the brand printed on their product, such as headphones, earphones and speakers. Dr. Dre, the famous music artist, founded the company in 2008 and then sold it to Apple for $2.5 Billions.

In this Beats website redesign, Andrew re-created Beats’ website, highlighting their products as much as possible. The hero section features a unique photo composed by famous artists and athletes, featuring a smudged background with red, black and grey stripes. Thank to their orientation, they give a dynamic and depth feel to the composition.
The following sections features the main products available for sale. Firstly, we have a split layout with headphones on the left and earphones on the right. Following along the website, there is a full page photo of Neymar Jr., sitting on a bench while listening to his music through a pair of Beats headphones. The very last section is most unique. It features all the products categories positioned with an extravagant layout. In order to make it even more creative, the cards feature the products photos half inside and half outside the container.

In his presentation, Andrew featured also other pages with a tiled layout and a lateral navigation bar. Again, throughout the entire website, images rule over any other type of content, also thank to the sponsored athletes that make the brand pop even more.
Andrew showed also an interested towards responsive design. In fact, thank to the tiled layout and use of photos, he was able to achieve a great experience also on tablets and smartphones.

In Conclusion

Andrew showed all of his skills in this website redesign. Although Beats’ current website already shows an incredible attention to Design, this concept could be a great solution too. It would have been interesting to see some more screens related to the products or even interactions.
Designer: Andrew Aden
Source: Behance



Behance redesign - Cover

Behance Redesign by Norah Park

Behance Redesign

Before the “flat” design revolution started by Apple, online portfolios weren’t so important and curated. In fact, the majority of creatives showed PDFs with their work, and only a few of them owned a website. In the last few years, portfolio’s websites literally exploded. Some of the best platforms available for designers and artists are Behance, Dribbble and DeviantArt. Each one of them solve a specific problem for a specific type of creative person.
In this case, we are going to dig into Behance, which is the eclectic leading platform for creative people.

Discover

The platform features a website and a mobile application, but what’s really missing is a desktop application. That’s what Norah Park thought. She built a desktop app concept of Behance, which could be a tremendous help for all of those people that browse it every day, looking for the right inspiration. The most unusual design elements are colors. There is the “Behance’s blue” tone, but the real change is the dark color scheme. In fact, behance features a light interface, opposed to this Behance redesign.

The App features a lateral expandable navigation bar, which contains all the most important links for browsing through categories, analytics, account management and personal profile. In the top bar, there is a a big search bar that covers the whole central area. On the top right corner, there are four important items: your profile’s photo, share option, notifications and message icons.
Obviously, as it should be, the content is the king in this situation. Because Behance is a platform built around photos and visual assets, the entire application is filled with projects. The “Discover” section features three navigation display options.
Regarding the UX, Norah placed the “Activity Feed” as a vertical bar in the very far right part of the application. She also shared an interesting interaction that shows longer comments.

Dashboard and Job Search

My Profile & Statistics screens feature a minimalistic and creative design. In the Dashboard, the real king is the chart, which cover the entire width of the app.
Another interesting screen is the Job & Creative search, where Norah featured a split screen. On the left she featured a list of creatives, and on the right she featured a map that shows all the creatives present in the selected area. The map addition is a really neat feature that could be added to the real Behance platform, giving a better feel to the research and to identify where people are located.

In conclusion

This Behance redesign is a brilliant example of a possible new product added to the Adobe family. It will indeed help creatives to find inspirations and maybe with some off-line features could be a game changer.
Designer: Norah Park
Source: Behance



Best Website Inspiration of January 2017 - Red One

10 Best Website Inspiration of January 2017

10 Best Website & Web Design of January 2017

Best Website Inspiration of January 2017 is a collection of all the best website inspiration and also Web Designs of January 2017.

In the first month of 2017, a lot of Freelancers, Independent Designers and also Agencies built awesome Websites.
Let’s take a look at all the creations!

Figtco Website

P.Motion agency built Figtco website, which is a Premium merchants of oil, gas and buildings in Kuwait. This website features a particularly creative look thank to the shapes used. In fact, they remember the fluidity of oil, and there is even a drop. As they mentioned, they used black and gold as the main colors to represent the oil’s color, but also because it is the “black gold”.
Agency: P.Motion
Designer: Denis Levchenko
Source: Behance

MARS – Landing Page

Minh Pham built an incredible landing page, rich of colorful illustrations and that tells a story. In fact, every section is connected to each other through various design elements. Thank also to the subtle animations, the design pop even more.
Designer: Minh Pham
Source: Behance

Red.One Website

Red One is a Design and marketing consultancy, which creates unique experiences for users. In their website, they wanted to show all of their creativity by approaching a minimalistic design but with unique layouts. They features some of their main clients, which include Beats, Nike and Douglas.

Femme Website

Ruslan built Femme’s new website, which is a luxury, life and also style directory. This magazine’s design is unique, thank to its minimalistic design and great use of typography. The main color is white with black serif fonts. Negative space is the real king in this design, which surround all the incredible images that makes the design pop and giving colors to the composition.
Designer: Ruslan Siiz
Source: Behance

Ortiz Leon Arquitectos

Rubén Sanchez built one of the best website inspiration of january 2017. This website features a horizontal, fixed navigation with also an abundance of architecture pictures. The entire design is based on a squared-tile pattern, which dictate the entire flow and also the transitions.
Designer: Rubén Sánchez
Source: Behance
Website: ortizleon.es

Bo-store

Slava Fedutik built an incredible e-commerce for Bo-Store. The website features an unique layout and transitions. In fact,  every product is positioned in the central part of the page with various models and even textures that float around it. It is indeed one of the best website inspiration of January 2017 thank to his layout, and also for showing a classy product in such a classy way.
Designer: Slava Fedutik
Source: Behance

UBER Analytics Platform

Awesomed built an eye-candy interface, featuring various analytics datas in a dashboard. Thank to its cleanliness and also to the awesome use of purple and teal colors, the design looks amazing.
Agency: Awesomed
Source: Behance

3Dsimo MINI – 3D Pen

Michael and Tomáš built an unique and creative experience for 3Dsimo MINI, a 3D Pen that allows people to draw, solder, burn and also cut. They built a colorful brand, featuring red, orange, green and purple tones. In order to make the design pop-out even more, they approached a diagonal style for transitions, and even colorful shapes surround elements and items, following the same angle.
Designers: Michael Čečetka – Tomáš Snop
Source: Behance

We3 Website

This is one of the best website inspiration of January 2017. Jam3 agency built an incredible experience for their new internship program. In fact, this website’s purpose is to hire new designers and developers, and to get them onboard in their agency. The website features an unique hero section, with fluid sand waves that animate the page and even follows your mouse cursor. The entire other part of the page is characterized by a slick design and parallax animations.
Agency: Jam3
Website: we3.jam3.com

Storytrail Website

Storytrail is an awesome website that helps people find city to explore. The design features colorful and animated illustrations for the introduction, but for the actual website it features cards of various cities. Unfortunately, the only one available at the moment is Rome, but it is enough to explain their concept. With an incredible use of animations and interactions, they built an awesome experience that tells a story about a city.
Designer: Burocratik
Website: storytrail.co



PepCity Super Bowl - Cover

PepCity Super Bowl

PepCity Super Bowl Illustration

The Super Bowl is one of the most famous event that happens every year in US. It is the annual championship game of the NFL, featuring only the best two teams of the league. It gathers millions of viewers from all the globe, generating records over records. In fact, in the last couple years, it generated over 100 Millions of viewers per event.
So, what’s a better place than that to share your brand and get eyes on your products?
This is what Pepsi Cola thought. They hired Alexis Marcou to create PepCity Super Bowl, an extraordinary set of illustrations made for 2016 Super Bowl event.

The set features two main illustrations, representing a NFL player. The real characteristic of these illustration is indeed their style. Throughout the years, Marcou developed a unique and also creative style, which allowed him to work for some of the biggest brands in the world.

Both the illustrations features a blue color scheme for the main look and golden-yellow tones for details. These colors obviously represent Pepsi’s colors, and so their brand too. Another important detail that characterize Marcou’s style is the visual representation of motion. In fact, both the players show dynamic positions. Dynamism is represented with lines and straight shapes, dictated by the player’s movements.

Work in Progress

Apart from the incredible final result, on the design perspective it is also interesting to see his creative process. In his project, he shared multiple photographies of his work in progress. He featured some hand drawn illustrations on paper and sketches on real photos, but the most interesting part includes transparent plastic sheets. In fact, he created all the splatter effects by painting stripes of white colors on plastic sheets and scratched them with spatulas. For the final touch, he captured “Newton Rings” by photographing glass surfaces and he applied them on the final artworks. In this way, he created more visual textures, fluidity and depth.

Applications

In his final part of the project, he also shared some real applications of his designs. They include billboards, TV screens, brochures, Pepsi’s app and even fabrics.
Artist: Alexis Marcou
Project: Behance



Opera Redesign - Cover

Opera Redesign by Anti

Opera Redesign

Opera is one of the most famous browsers in the world. Despite its low percentage of usage, which is between 2 and 5% of the entire market, it still has millions of users.
Opera’s USP is an unique technology that compress data with no quality loss, giving users more content for less data usage.
This is way their slogan is Do More. It reflects the company’s goals, allowing users to consume more informations with less data usage, anywhere and when you want it.

With this Opera redesign, their logo is no longer a simple typographical “O”. It now represents a portal where all the informations pass through. During the process, Opera’s USP compress all the informations. In this way, Opera releases all the datas for users with less weight.
Their new logo features Basis Grotesque as the main font. Red remains the primary color of their brand, supported by dark and light grey tones. It also features a double possible identity. In fact, the new version features a minimalistic and flat design, usable even with a single color.
However, they maintained the older and classic version too. It features red shades that create depth, and because of its realism, it is the version used for all the advertising and real world applications.

Visual Applications 

In their redesign, they also shared some possible brand identity solutions, like business cards and envelopes. Red tones and fluid streams of colors characterize the entire visual identity. These colorful beams represents all the informations that come through the O and get released for users.
Some of their visual designs represent billboards applications. They feature the new logo, colorful streams, “Do More” slogan and lots of elements. These items and people placed on one side of the advertising represent again the amount of data available for users.
Agency: Anti
Designers: Martine Strøm – Gaute Aase – Kristoffer Eidsnes
Project: Behance



mdls website design - Home page

F — mdls - Website Design

F — mdls Website Design

F — mdls is a model agency founded in 2012. Adencys agency built their new website, following a minimalistic and clean style. Their website is extremely simple and direct. In fact, you will not find a lot of written texts, because images fill almost the entire screen. Because of its purpose, the website shows pictures of models for hire that were posing for real photo shootings.

The navigation bar features a minimalistic and clean look, also by using an unusual layout. On the left side, there are 5 huge links that allow users to navigate through the pages. On the right side there are small links that highlight their social media and a search bar.

The home page features only two sections. The first is a slide that shows Collections available for sale, and the second shows informations regarding the agency.

The Models page features a list of all their models, alphabetically filtered from A to Z. Also this layout is really interesting and unique. It features written black texts, a single model’s photo on the bottom left corner and a lot of white space.  By clicking on the “more” link in the central bottom part of the page, you can access to the model’s page.

From here, you can see more informations about the model, such as the biography, height and agencies. Also this page’s layout is intriguing, because it features a big image that cover 3/5 of the screen with a huge H1 title which defines the model’s name. All the other informations are listed on a single column below the title. On the very far right side of the page, there is another slide that allows users to scroll through other photos of the model.

Mobile Version

Adencys also created a strong responsive design, which works perfectly on mobile devices. As they showed in their mockups, all the texts and images fits perfectly also on smaller screens. In this way, they were able to keep a consistency and brand identity through the various platforms.
Agency: Adencys
Project source: Behance



Facebook Redesign - Cover

Facebook Redesign - by Roland Hidvegi

Facebook Redesign by Roland Hidvegi

Facebook is the second most used website and first social network in the world. It has shaped billions of lives, allowing people to stay connected with each other or to meet people you haven’t seen in ages. We have seen a lot of redesigns, but this one caught our attention for its minimalistic and clean look. Obviously, Facebook has a huge and strong team of Designers that works on dozens of projects, but it’s always interesting to see what other people can do to improve a product.

As Roland says –

In this Facebook Redesign I tried to modify some minor things to provide a more delightful experience to the users. The avatars changed to circles following the common pattern. I used the similar layout for the person and pages with a ratio based flexible grid system (2, 5, 3). Finally I used the fresh colours and updated the typefaces as well.

As Roland mentioned in his brief description, he worked on multiple UI elements to improve User Experience. He built a new set of icons which feature an outlined style rather than a filled one. In this way, he managed to make the content cleaner and lighter.
Regarding colors, Roland used bright tones, such as Green, Blue, Orange and Red to emphasize particular elements. He had a particular attention for the icons, transforming the current skeuomorphism-style set to a flat one. In this way, there is more consistency on the platform, also given by the grey-only set of icons in the left navigation bar.

The current Facebook design lacks of readability for the comment sections, because there aren’t real visual divisors between the author, comment and actions. Every element seems too cluttered, which makes the content difficult to analyze and read. Unfortunately, Roland didn’t try to resolve this issue. It could have been interesting to see his take on this situation.

In Conclusion

Roland did an awesome job  in redesigning Facebook. He improved a lot of elements and sections of the social network, but he covered only the surface of it. Again, it could have been interesting to see more UI elements and further studies of this redesign. For now, we can treat it as a successful visual improvement with some interesting UX suggestions.
Author: Roland Hidvegi
Project source: Behance



A New Dropbox Redesign - Paper Project

A New Dropbox

A New Dropbox Redesign

With more than 500 Million users, it is one of the best platforms to use to share files with other people. Since its launch, it grew a lot, and it now has a strong Design team that support its products.

As they say –

In today’s workplace, people spend 61% of their time managing work rather than doing it. […]
We want to bring that 61% as close to zero as possible. So we’re building products that make it easier to find the information you need, stay up to date on projects, and work more seamlessly as a team. And today, we have the first of those products and features ready for you.
In January 2017, Dropbox’s Design team announced four completely new Product. They refreshed the Home Page, the web application and  launched two new Products.

A New Dropbox.com

The new Dropbox redesign starts with a strong and bold statement. They are reinventing how teamwork works. But how? By introducing two new products. The first is Dropbox Paper, which is a smarter way of building ideas and thinking around a concept. The second is Smart Sync, which is a way to organize and synchronize your files directly on your desk.
Following along the website, it now shows five strong features about their products and how you can benefit from them. Illustrations support every statement, featuring an unique outlined and shaky style.
Obviously, they also took their time to improve the mobile version which features all the elements displayed on a single column layout.

A New Dropbox Web App

Dropbox’s Web Application now features an extremely clean and minimalistic look. It is actually impressive to see a so clean design on a real and functioning product. It features a full screen – fluid layout divided in three columns layout. The first one contains the main navigation bar. The second contains your actual files. The third contains all the tools that you need to start using Dropbox.
It features AtlasGrotesk as the main and only one font, supported by soft colors, like light blue, light purple and grey tones.

Smart Sync

This new feature allows people to organize and choose which files will be downloaded on your computer or kept on the cloud. It is going to be extremely useful when it comes to manage your machine’s storage. In fact, every file that you store on your desktop presents an icon. If it’s a green checkmark, the file has been loaded on both the cloud and your computer. If it’s a cloud icon, it means that the file will be available only with internet connection, so it will not be stored on your machine and available offline. I can see a relation with the new Cloud sync feature introduced by Apple, which basically works in a similar way, but obviously with Apple’s Cloud.

Dropbox Paper

This new feature allows users to collaborate, share ideas and think about a project. It is a sort of a Google Docs, Invision’s Boards, a scheduling tool and obviously a sharing platform. In fact, with this tool you can write content, share images, videos and any other embeddable content. You can also write comments and start a conversation. You can even schedule and organize your team, like you will normally do on softwares like Trello, Asana or Wrike.
Regarding the Design, the tool features with a minimalistic and clean style. In fact, there aren’t shadows, colors or lines that divide the content. The only visual divisor is determined by the negative space and text hierarchy. It features a different look compared to the established Dropdown style. In fact, there aren’t any blue tone, but the real king is the grey. In order to make the content pop-out, the main body features grey tones. Only authors names present strong colors, such as violet, orange and blue.
Project Cover are a real change in their Design style. In fact, now every project will have a cover image which features a creative way of using geometric shapes and bright colors.

In Conclusion

Dropbox’s Design team improved a lot of UI elements, sections and pages with this Dropbox redesign, but the real game-changer are the new products. With Smart Sync and Dropbox Paper, you can now build board, sketch ideas, organize content, synch files on your desktop and obviously share them with other people, all from the same place. Could it be the final move to outdistance Google Drive from the race?