It is here! The most anticipated iOS that we've been waiting for a long time now. Is it worth the upgrade? Yes, definitely is. Overall, it's more or less the same but it's definitely an enhanced experience from its predecessor. I would say that is 2x the radical enhancement you will experience on the iPad, that's a nice move from Apple. For the review, we decided to change the formula of instead highlighting its new features. We'll be more focusing on useful features that you can use as a designer for your workflow. Let's dive into iOS 11! iOS 11 sets a new standard for what is already the world’s most advanced mobile operating system. It makes iPhone better than before. It makes iPad more capable than ever. And now it opens up both to amazing possibilities for augmented reality in games and apps. With iOS 11, iPhone and iPad are the most powerful, personal and intelligent devices they’ve ever been. iOS 11 Control Center Control Center Control Center gets the most attention from this update, just because it is totally different. I would say the UX approach is pretty close to what's been done on Android. Everything is easy to access, works like a toggle mostly and you can customize it. I heard that when you are turning off "Wifi" or "Bluetooth" for example, it doesn't entirely turn them off. That's for debate. One thing though, when clicking on the "Wifi" icon, the transition will work like a long press. I wish that very same transition could have worked for when you wanna go straight to your "Wifi" settings instead of going through the "Settings Icon". Overall for the day-to-day activity, the Control Center gives you what you actually want of your iPhone. Your browser does not support the video tag. Screen Recording If you stay aside from recording creepy videos off Snapchat. It's actually a really neat feature for us designers. I would see this feature working well for instructional videos or tech support. As you can see, it's pretty simple, you tap the "Record" button off the Control Center (with or without audio) and that's it! I would definitely see myself using "Screen Recording" to explain a user flow or transitions for example. That's pretty neat! SOS This might be off-topic but I think it's a nice feature that can actually save lives. Imagine yourself in a very unfortunate situation, you press quickly five times on the power button, you can "Auto Call" which will dial 911. To setup: Settings -> General -> Accessibility -> Call Audio Routing -> Auto-Answer Calls Your browser does not support the video tag. Editing Screenshots Another great feature to enhance your workflow, I've found myself in many situations where you would take screenshots and upload it through Instagram Stories to be able to use their editing tools. Well not anymore with IOS 11. I also love the fact that you don't have to go back to your "Camera Roll" and edit. Drag and Drop Feature Drag and Drop I gave it a try on the iPhone and sometimes it worked and vice-versa. It was definitely worth it on the iPad. The feature "Multi App Dragging" where you tap and hold an app until it wiggles so you can select multiple apps and then drag them all to a new screen or folder. It truly makes the iPad into a solid device more beyond than before. iOS 11 Gallery If you still haven't downloaded or upgraded your device yet, check out Apple's iOS 11 site. And give it a whirl yourself! More Links Follow my tweets @aoirostudio Follow my pictures on Instagram Images via Apple
Museums always provide us the chance to go back in time, learn about our past, our history. The diversity of things that museums offer to help us understand their exhibits, audio video tours and in this day in age, mobile apps is pretty incredible however there is room for opportunity. I am amazed that museums haven't really stepped up and created incredible experiences. Imagining VR for museums of the world, Marcin Nogal and Amplituda took a pass on redesigning the British Museum app for iOS. The result is quite elegant and definitely deserving of a feature here on Abduzeedo. One of the things I really liked about this project was the typography and beautiful imagery. The dark background works quite well, it makes the images pop. The view pager with the horizontal scroll and some of the transitions reminds me of some of the Material Design guidelines, which is not a bad thing. The British Museum, founded in 1753, is the first national public museum in the world. From day one entry was free and given to ‘all studious and curious Persons.' Free museum meant free access to knowledge, it opened a possibility for anyone to learn and innovate. We’ve challenged ourselves to reimagine the digital museum experience. To deepen the connections between museum and its visitors we designed a mobile experience around three main objectives: learn, discover and experience. For more information check out the Behance page Lead Designer: Marcin Nogal UI animation: Karol Nadolny Architecture photography: Aleksandra Kicka Intelectual Property belong to their rightful owners - British Museum This work is intended for personal use.
I know you might say that flat design is the new trend and that skeumorphism is past, however the talent behind the work is never over. It is important to understand the context to judge the design. For this post I would like to feature these two amazing icons created by CreativeDash Design Studio based in San Francisco, California. The details and craft behind the work is just mind blowing. Digital studio focused on enhancing your customers’ experience via incredibly attractive vivid graphics and engaging interface design. Final Donut
It's been some time since our last UI Design post, but I was saving some great looking applications for you guys! There are some crazy good looking apps with fantastic design being made right now. One of these apps is the Swing, a free music app for the iPhone. The designer responsible for this is Enes Danış, from Turkey. He's got an awesome portfolio which you should check! I hope you enjoy these, and if you got your own UI Designs, drop a comment! Cheers. ;)
This week we selected apps for sport, connect people, travel and discovery! With Avocado you can connect only with one person, the most important in your life. You'll see here Strava, a new option for track your running. For those from Netherlands, you should check 9292. Also take a look on the new StumbleUpon Android app! Check that out and stay tuned for the next week!You can keep sending me your suggestions via Twitter twitter.com/FabianoMeand include #abdz_apps in the message.Avocado - avocado.ioAvocado™ is the best way to stay connected with the most important person in your life. We understand the need for a fun, fast, reliable and private way to stay connected to your partner when you’re out and about. DOOO - figtreelabs.netWorld's Smartest Reminder & To-do Note. Not too SIMPLE, Not too COMPLEX. It's Easy and Clear. StumbleUpon! - stumbleupon.comWe'll help you discover great sites, videos and photos from around the Web. Just tell us what you're interested in, and start Stumbling. Strava - strava.comTrack your running and compete against friends Record all your runs, analyze your performance and see how you stack up against friends and locals. Set new personal records and beat your friends’ times! 9292 - 9292.nlWith the new app the 9292 travel planner has become even more mobile!
I have received quite a few emails asking me how to create that sort of linen texture effect we see in the iOS on iPads and iPhones. I like that effect but had never stopped to think about how I could do that in Photoshop, so last week I decided to give it a try. For my surprise it was much easier than I thought. So in this tutorial I will show you how to create the linen texture effect in Photoshop and also the metal/glass effect we see in the Apple logo in the iOS. Step 1 Open Photoshop and create a new document. I'm using 2560x1440 pixels for the size. After that fill the background layer with black. Step 2 Add a new layer and go fill it with white using the Paint Bucket Tool (G). After that make sure you have black and white for the background and foreground color, then go to Filter>Noise>Add Noise. Use 100% for the Amount, Gaussian for the Distribution and select Monochromatic. Duplicate this layer once. Step 3 Select one of the layers with the noise filter and then go to Filter>Blur>Motion Blur. Use 90º for the Angle and 50 pixels for the Distance. Step 4 Select the other layer with noise and go again to Filter>Blur>Motion Blur. Use 90º for the Angle and 50 pixels for the Distance. Step 5 You will have to layers with the blurry effect, one will be with a vertical texture and another with horizontal. Select the one that is on the top and change the Blend Mode to Multiply. Group the 2 layers into a folder and then change the opacity to 40%. Because we applied the motion blur, the edges get a bit transparent so select both layers and go to Edit>Transform>Scale. Increase a little bit the size of the layers so you can hide those edges. Step 6 Now import a symbol to use in your wallpaper. I'm using the Abduzeedo symbol. Place it in the middle of the document. Step 7 Go to Layer>Layer Styles>Gradient Overlay. Click on the gradient colors to open the Gradient Editor. Then use a color scheme like the image below. Step 8 Now back to the Gradient Overlay options, change the Style to Radial and increase the size to 150%. Then click on the symbol hold the button of the mouse and move it to move the gradient position. Use the image below for reference. Step 9 Select Bevel and Emboss. Use Inner Bevel for the Style, 150% for the Depth, Down for the Direction, 1 pixel for the Size and 2 pixels for the Soften. For the Shading use 103º for the Angle, 40º for the Altitude. For the Highlight Mode use Screen with white at 100% Opacity, then for the Shadow Mode use Multiply with black at 30%. Step 10 Select Inner Shadow. Use Screen for the Blend Mode with white for the color, -90º for the Angle, 5 pixels for the Distance, 25% for the Choke and 5 pixels for the Size. Step 11 Now select Drop Shadow. Use Multiply for the Blend Mode with black for the color. For the Angle use 90º with 5 pixels for the Distance, 0 % for the Spread and 15 pixels for the Size. Step 12 This is the effect you will have after these 12 steps. Step 13 Add a new layer on top of the symbol. Select the symbol area by clicking with the right button of the mouse over the thumbnail of the layer, then select the option Select Pixels. After that go to Layer>Layer Mask>Reveal Selection. Then with the Brush Tool (B) with a very soft brush and white for the color, paint in the center of the symbol. Also change the Opacity to 40%. The idea of this step is to create a reflection in the metal effect. Step 14 Now add a text, in my case I added the Abduzeedo logotype. Then go to Layer>Layer Styles. Use grey for the color with Multiply. Step 15 Then select Inner Shadow. Use Multiply for the Blend Mode with black for the color. For the Angle use 120º, 2 pixels for the Distance, 0% for the Choke and 2 pixels for the Size. Layers Order Conclusion Here is the final outcome of the tutorial. The idea of this tutorial was show you how to create the line texture but I decided to add the logo with an Apple style effect in it. The whole process is very straightforward and if you want to use different colors for the linen texture you will have to change the background color or the opacity of the 2 layers with noise/motion blur, the ones we created in the steps 2 to Darker Version Download the Photoshop File Click here to downlaod the Photoshop file used for this tutorial