|
|
Adobe celebrates the 25th birthday of Photoshop. The first version of the image editing program came into market in 1990 and marked the beginning of the worldwide success of the Californian company. Photoshop is in all likelihood still the most famous product of Adobe; being popular and in use by a broader clientele than just the design industry.
|
|
On February 10 this year a new creative design software was unveiled: Affinity Photo by Serif debuted in beta and is currently available for free, exclusively for Mac OS X. The app claims to be a pro-level challenger to Adobe Photoshop, the undisputable top dog and standard in the publishing industry. After the beta phase, Affinity Photo will be available at the Mac App Store, at an estimated price tag of £39.99 (€49.99/$49.99). So let´s have a look under the hood of this new software and check it against its overwhelming rival, Adobe Photoshop.
|
|
Logos, be it wordmarks or symbols, are rarely „timeless“. Instead, they are regularly adapted over time – sometimes tentatively, sometimes more radical. Apart from taking on style details such as gloss, 3D, and shadow effects which disappear with the fading of those design trends, there seems to be an underlying general direction in logo design: shapes get more simple, proportions more harmonious, and details disappear. When a company is founded, logos are often not created by professional designers, but rather quickly jotted down. Frequently, those logos do not correspond with the core principles needed for creating a distinct logo. Simplicity always plays an important part here. Wordmarks and symbols need to be quickly recognized and embraced.
|
|
The web is a place where you cannot only never reach the horizon but can’t even see it. Your life span is too short to be able to ever visit all the places there are today. Now consider that each day more new places arise than you could possibly visit even in that one day. In doing this, you’ll soon come to the conclusion that without some orientation, navigational helpers and other order systems you’ll get lost in the data stream. Fortunately, these helpers exist. One of which we will introduce you to today.
|
|
Sure, many designers scream that speculative work is bad. The major creative and design organizations have written articles out the whazoo about how bad it is for the industry and even have white papers, books and entire conference programs dedicated to the “NoSpec!” movement. Still, it’s increasing and guess who’s to blame? The very people it hurts!
Ah, Instagram. I’ll venture a guess that 99% of folks reading this have used Instagram at some point in their lives. It’s the app that changed the way we share photos with friends and followers and in a few short years has become a key tool in the app-arsenal of more than 300,000,000 people.
Instagram is one of the most beautifully designed apps in the world. That’s my opinion, of course, although it would be quite the challenge to argue against the product’s unrelenting focus on keeping it simple. Other apps in the photos space emphasize features and technology while Instagram just gets out of the way and lets you enjoy great pictures.
I had never really considered Instagram for a Design Details post for this exact reason: most of it is just obvious. Of course, obvious design is the hardest design, so that’s not a knock against the talented team working on Instagram (promise!). Instead, I mean that this feels like an app whose clarity and focus needs no further explanation.
Nonetheless, I decided to investigate. Buried among Instagram’s streams of beautiful photos I’ve scoured up a solid handful of wonderful details that add a next-level layer of polish to the entire product. Enjoy!
Follow me at @brian_lovin for tweets about design, startups and technology
Get emailed with future Design Details posts: Subscribe by Email
We have a podcast! Listen to the show with Bryn Jackson and yours truly at designdetails.fm
Let’s start nice and simple – this is probably one of my favorite pieces of the Instagram app. When you scroll the top menu bar gets out of the way, scaling nicely back into the distance.
I could see an argument both ways for adding the same treatment to the bottom tab bar, but I suppose a focus on UX might mean keeping the bar perma-present.
If you press + hold the search icon in the bottom toolbar it will spring you straight to the search input. It’s a nice way to save users an extra tap, but more importantly it means people don’t have to readjust their hands in order to tap the search bar. It’s the small things, everyone.
Don’t underestimate how far subtle touch responses can go to make a UI feel great. In this case the follow buttons bounce and scale ever so slightly on-press which gives users a nice tactile response and feeling of depth.
Of course, if you’re going to make certain buttons behave and interact with user touch in a certain way, you better make sure the pattern is consistent app-wide! Nice touch here!
I’d also like to mention that from a growth perspective, Instagram’s “Suggested” people to follow is insanely powerful. I’ve probably followed 100+ people through this rabbit hole of follow->discover->follow. It’s a crazy powerful loop – I wish they could share more about how impactful this design pattern has been for engagement!
Protip: If you tap + hold on a username in the comments thread it will open up a comment form pre-filled with that person’s username. This is one of the most subtle interaction patterns I’ve found. But once you find it there’s no going back to the old way of replying.
When you’re in the photo-taking mode you can either tap the video icon or swipe to the left to switch modes. I quite enjoy the way a shutter closes and expands during the transition here; while there are definitely benefits of having UI feedback like this, I also wonder if they had to do this for some technical reason – anyone know?
Super subtle, this detail. There’s a tiny flashing sliver of white on the progress bar when you’re not taking a photo. I think that this is a nod to old camcorders that would have a flashing “standby” circle on the screen. Nice touch!
If you try to tap the record button a tooltip pops up to guide you through the proper interaction: press + hold to record. I can see this being a tricky one because Instagram is trying to introduce a somewhat-counterintuitive design pattern here.
In the iOS camera, tapping the record button, well, records things. But here, Instagram is trying to show users that they can actually stitch together multiple clips together by pressing + holding at the right moments. I can’t quite remember if Insta has a walkthrough for this feature when you first use the app, but regardless it feels like the tooltip here does a fine job of helping users to adjust their expectations.
If you record a clip, the camera icon suddenly turns into a delete icon. It requires a second confirmation tap to actually delete the video, turning both the icon and the progress bar red as fair warning to the user.
I think at some point I’ll do a comparison post here of how different apps handle video recording (thinking Vine, Twitter and Instagram right off the bat). It would be cool to compare some of these subtle UX flows which can result in a totally different feeling during the recording process. It seems that different apps are arriving at different conclusions for how this style of video recording should work (Twitter’s is especially impressive).
Nothing too crazy here, but I do like the pulsing focus rings when you tap somewhere in the viewport while taking a photo! For whatever reason the pulsing ring feels slightly too fast for my taste – it seems to have an entirely different energy from every other transition/animation throughout the app. I wonder what it would feel like with a slightly more lethargic pulse?
If you press and hold on a photo while you’re editing and applying filters, you can quickly compare your current edits to the original shot. If you’re in a specific tool, in this case saturation, pressing and holding on the photo will compare your photo with and without that specific tool.
In one of the more recent updates Instagram introduced a way to reorder and hide different filters so that people could save time whenever they consistently use a handful of favorite filters. The interaction here is really nice and feels super crisp to use.
My only thought on ways to improve this would be to add some sort of feedback when hiding a filter: Where does it go? Can I get it back? Do I have to drag it exactly onto the ‘hide’ square, or is there breathing room?
Here’s a subtle one, but I think this adds a lot to the editing experience in Instagram: When you are customizing a photo with a specific tool or filter, it doesn’t instantly apply that change to the photo. Instead it quickly flashes your original and then animates the slider to offer a quick glimpse into the direction (and intensity) of change.
I had to sit here and watch this video about 20 times before I felt like I understood everything going on. There’s quite a lot of subtle motion going on here that adds a whole lot of life and interactivity to the tagging view on Instagram. The small things – like a semi-transparent background when searching for users, to the springy pop of a tag when it’s dismissed – all come together to make this feel so good; well done Instagram!
I was hesitant to even include this one here because I figured most people have used this feature before. But hey, +1 for thoroughness right?
When you’re about to publish a photo you can tap on the thumbnail in the composer to get one last look to make sure everything looks good. I use this feature every time I post something to Instagram as a last-second check to make sure I’m happy with the photo.
It’s 2015 and most apps are finally getting good at this, but I can’t stress enough: continuity in app navigation is crucial to helping people understand where they are and where they’re going within a set of views or flows. Instagram does a supreme job here of reversing their way through the photo editing flow if a user decides to backtrack.
Protip number two: press + hold on the camera icon to jump straight to your camera roll. I have to admit I only discovered this interaction this morning while hunting down different design details, but this will be my new default way of adding photos to Instagram. Save one tap and make a user feel clever in the process? That’s a win in my books.
When you’re logged out, the welcome view background slowly ebbs and shifts colors over time. This happens quite slowly, and I admittedly almost missed it the first time I was logging in/out.
Over the years I can recount at least 3 different Instagram welcome views – each one has had a completely different feel and style. This latest one is certainly playful, but for whatever reason it just doesn’t quite feel in line with Instagram’s overall aesthetic anywhere else in the app or on the web. If anyone at Instagram is up for sharing the decision behind this new color-blob-changer, I’d love to learn more!
The folks at Instagram pinged me about this little detail, and it’s a good one! If you import a clip longer than 15 seconds into the video editor, the app shows a bouncy scissors icon to indicate that your video has been clipped. You can then tap the scissors to edit the clip range. I love the subtle use of motion here to grab a person’s eyes and guide them towards an action!
That’s the end for now – I hope you’ve enjoyed the post! If you have any other details I may have missed, give a shout on Twitter.
|
|
Earlier today we introduced you to KeyCDN from Switzerland, a cogent new content delivery network (CDN). They offer a solid performance boost with their twenty (and counting) globally distributed server locations. If you are unsure whether a CDN would really speed up your website, read on. To complete our introduction of the world’s most price-worthy CDN, we convinced them to offer three accounts with one TB of traffic to our dear readers. All you need to do is answer a simple question. All you need to have is the luck of the draw…
|
|
Content Delivery Networks are an important component for all website operators with high website traffic. Highly fluctuating and globally diverse visitor rates can be elegantly cushioned and easily operated by CDN providers. Now, the Swiss KeyCDN (based in Winterthur) throws their hat in the ring. And what we can already say is that KeyCDN understands how to leave rivals behind in this highly competitive market.
|
|
People working in the web design and development industry need to become thick-skinned over the years if they intend to survive long term. I am in this business since web design got invented in the early Nineties, and I sure know what I’m talking about when it comes to the hidden secrets of client communication. My remedy these days is laughing. I refuse to get angry anymore. Instead, I make fun of the situations that only a few years ago made me want to hire a professional killer. There are quite a few people out there who are only still alive for the fact I couldn’t afford to pay one. Nah, just joking. As making fun of it all is the healthiest way to cope with it, we decided to start a new cartoon series titled “If Web Designers Were” here at Noupe. This is part six. Hope you enjoy it…
|
|
Good news for our readership. We already introduced you to TemplateMonster’s monstrous repository jam-packed with a wide variety of different templates for different purposes as well as different systems. Whether you are looking for HTML5 themes, Bootstrap themes, newsletter templates, PSD layouts, PrestoShop or WooCommerce templates and a lot more, TemplateMonster has you covered. Today we teamed up with them for a second time. While the first giveaway was all about WordPress themes, today ten winners can freely choose one theme each from the whole portfolio of TemplateMonster. Good luck and choose wisely…
