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