articles on

iPhone X: Interface Guidelines

iPhone X: Interface Guidelines

Today we've witnessed the latest from Apple, whatever you feel it was amazing or not; they have released the new iPhone. It's here and it's what Apple think will be the future of the smartphone. Introducing the iPhone X, coming with a new size of 5.8-in with a "super" retina display. Wait! We are not going to go through its features but more into their human interface guidelines. Basically what has changed on the UI aspect of things that will probably affect our work somehow if you are in iOS Design. Let's dig! Apple also shared their UI Design Resources, how cool is that? They provided files for Photoshop, Sketch and Adobe XD where based on the iOS SDK, it's just a really good and reliable resource to dig through for your next project or just by curiosity. ...a large, high-resolution, rounded, edge-to-edge display that delivers an immersive, content-rich experience like never before. Image via Apple Developer Site Screen Size In Portrait, the iPhone X has the same width as its predecessors (iPhone 6, iPhone 7, and iPhone 8) but the display is actually higher of 20% on the vertical space for the content space. To be specific, it's 145pt taller. For our UI assets, they will have to be @3x to support its high-resolution display.   • Portrait Dimensions: 1125px × 2436px (375pt × 812pt @3x)   • Landscape Dimensions: 2436px × 1125px (812pt × 375pt @3x) Layout "Safe" Area There are many things to think about when designing for the iPhone X including the newly sensor housing on the front. Make sure to remember about the backgrounds to give a fully immersive full-screen experience to the edges of the display all the way to the bottom. Apple is advising us to design with a mindset of having the content centered, looks right with the different orientation and to stay away from the corners including the sensor's area. Please take a look at the different possible situations below. We gotta think about the aspect ratio as well especially how your UI will behave with auto-hiding for like playing videos or photo slideshows for example. Gestures Since Apple got rid of the "home button of the iPhone X, they had to rethink about the gestures. Just to add to the list, now we have home screen, app switcher, notification center, control center and also Face ID. Regarding iOS 11, I am not a huge fan of how you have 3 different ways to swipe down, from the home screen. We can leave these thoughts of the full release of the next iOS. Links on Apple Human Interface Guidelines Overview for iPhone X Apple UI Design Resources More Links Follow my tweets @aoirostudio Follow my pictures on Instagram Images via Apple Developer Site

Introducing the EPA Graphic Standards System

Introducing the EPA Graphic Standards System

The EPA Graphic Standards System was a guide to consolidate numerous US state offices with their graphic design and communications department. Back then, millions of dollars were being wasted annually due to non-standardized formats, inefficient processes, and almost everything being designed from scratch. 40 years later, creators of the NYCTA and NASA Graphics Standards Manual reissues are back in collaboration with the design firm that once worked on the EPA for a new edition. Currently live on Kickstarter is a collaboration from designers Hamish Smyth and Jesse Reed of Standards Manual partnered with AIGA and legendary design firm Chermayeff & Geismar & Haviv (responsible for Chase bank, NBC & PBS logos) to reissue the 1977 EPA Guide as a hardcover book. A portion of the proceeds will go to Earthjustice’s programmatic expenses in their mission to protect the environment and AIGA’s operational expenses for its Design Archives, which identify, preserve, and make collections of enduring value available to the public. Original Scans

Design guidelines: Studio Standards

Design guidelines: Studio Standards

Yesterday I posted the behind of scenes of a beautiful editorial design project for the TransWorld Surf Magazine. The work was done in 2011 but the style is very relevant to this day and will be in the near future. Today I would like to feature another project in the same realm. The project is the guidelines for Studio Standards and as you can see after the break, it's stunningly elegant and beautiful. Studio Standard create high-end, print-ready Adobe Indesign templates. You can learn more about their work at http://www.studio-standard.co/ The Studio Guidelines template is a 60 page Design Guidelines Indesign template available in both A4 and US letter sizes. It is thorough and finished to a very high standard. The preview images are shown in pink, however changing the colors is very simple using the color palette

Airbnb - Google Material

Airbnb - Google Material

Greek designer John Noussis was inspired by what google did with Material Design for Android and decided to recreate the same guideline preview for Airbnb. Check it out! For more from John Noussis visit behance.net/Ioannis_Noussis Image credits: Airbnb, Unsplash I really like what Google did with Material Design an Android L. So this is a case study of Airbnb and the guidelines Google gave for Material Design.

KYD Buro Visual Identity

KYD Buro Visual Identity

We love to post about visual identity and the creative process behind it because it shows the holistic approach of design. Creating guidelines and systems is the core of good design, it gives consistency and also flexibility to extend the brand without jeopardizing the visual language. The work of KYD Buro is an excellent example of a really well done visual identity and process. KYD Buro is a young architect team. The name is formed from the first letters of the founders: Kobets, Yankovskiy, Dubrovskiy. Company's services include architecture, complex projection, design and projects support. Teamwork is based on the following values: mathematics, logic, contemporaneity, openness, structuredness, consistency, simplicity and flexibility. They needed identity that would meet all of these requirements to create exact image of the company. The first step was establishing of relationships between brand values and their graphic expression. It helped to understand how logo should look like. After that there was the sketches stage. The decision was found in type transformable sign, consisting of three caps letters. Each letter is constructed by common grid and has the same dimensions. Letters' ends have universal form for variety connection with each other. Credits: design and art-direction — Pavel Emelyanov print production — F61 work room photography — Anatoly Vasiliev Via Behance

Logo Design Guidelines

Logo Design Guidelines

Design a logo and a visual identity goes way beyond the free form and artistic side of what most people think. There is all the rational part including proportions, scaleability optical adjustments and reproduction that has to be thought in order to create an efficient and well design logo. The visual design guidelines will provide this information to ensure that the brand is used correctly. In this post we want to illustrate the construction or guidelines of a logo. From VW to Twitter and Braun we hope these examples can inspire and instruct you for your next branding project.