Archive

Archive for February, 2015

A Life Without Adobe: Possible, but Pointless (IMHO)

February 28th, 2015 No comments

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.

Categories: Others Tags:

Affinity Photo Beta: The First REAL Alternative to Photoshop?

February 27th, 2015 No comments

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.

Categories: Others Tags:

Logo Design According to Zeitgeist: Not Only the Times are Changing

February 26th, 2015 No comments

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.

Categories: Others Tags:

Top 10 Best WordPress Hosting Reviews Sort the Wheat from the Chaff

February 26th, 2015 No comments

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.

Categories: Others Tags:

The Hunger Games: Are Designers Cannibals?

February 25th, 2015 No comments

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!

Categories: Others Tags:

Design Details: Instagram for iOS

February 24th, 2015 No comments

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!

The following details are best-viewed on a Mac or PC in Chrome or Safari. I’m working on iPad + Firefox support as soon as possible!

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

1 Menu bar Tweet

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.

Hover + hold to play and loop the video Share this Detail: Tweet
2 Quick search Tweet

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.

Hover + hold to play and loop the video Share this Detail: Tweet
3 Bouncy buttons Tweet

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.

Hover + hold to play and loop the video Share this Detail: Tweet
4 Button consistency Tweet

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!

Hover + hold to play and loop the video Share this Detail: Tweet
5 Quick comment Tweet

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.

Hover + hold to play and loop the video Share this Detail: Tweet
6 Photo to video Tweet

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?

Hover + hold to play and loop the video Share this Detail: Tweet
7 Beep…beep Tweet

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!

Hover + hold to play and loop the video Share this Detail: Tweet
8 Tooltip Tweet

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.

Hover + hold to play and loop the video Share this Detail: Tweet
9 Deleting a video Tweet

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).

Hover + hold to play and loop the video Share this Detail: Tweet
10 Tap to focus Tweet

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?

Hover + hold to play and loop the video Share this Detail: Tweet
11 Toggle edits Tweet

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.

Hover + hold to play and loop the video Share this Detail: Tweet
12 Rearranging filters Tweet

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?

Hover + hold to play and loop the video Share this Detail: Tweet
13 Adding a filter Tweet

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.

Hover + hold to play and loop the video Share this Detail: Tweet
14 Tagging Tweet

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!

Hover + hold to play and loop the video Share this Detail: Tweet
15 Double-check Tweet

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.

Hover + hold to play and loop the video Share this Detail: Tweet
16 Reverse! Reverse! Tweet

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.

Hover + hold to play and loop the video Share this Detail: Tweet
17 Quick camera roll Tweet

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.

Hover + hold to play and loop the video Share this Detail: Tweet
18 Welcome view Tweet

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!

Hover + hold to play and loop the video Share this Detail: Tweet
19 Trimming Tweet

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!

Hover + hold to play and loop the video Share this Detail: Tweet

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.

Categories: Designing, Others Tags:

KeyCDN Giveaway: Win One of Three Accounts with 1 TB Traffic

February 24th, 2015 No comments

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…

Categories: Others Tags:

KeyCDN: Cogent New Content Delivery Network Made in Switzerland

February 24th, 2015 No comments

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.

Categories: Others Tags:

Cartoon: If Web Designers Were Sculptors… [006]

February 23rd, 2015 No comments

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…

Categories: Others Tags:

TemplateMonster Giveaway: 10 Templates for 10 Winners

February 23rd, 2015 No comments

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…

Categories: Others Tags: