Webmasters Gallery

Completely free images can be very useful. Unfortunately, they’re hard to find as you’re often confronted with fees or abstruse licenses. If you don’t follow the license terms, you may get a cease and desist letter. That’s why, we searched the web for the best sources of completely free images which can be used without naming the author or source, being also suitable for commercial purposes, including customer projects. This is especially important for bloggers and writers as articles are almost unthinkable without images; at the same time, they don’t justify high follow-up costs. So, have a look at our list of images that are royalty-free and completely free of any charge or duty.

In a global marketplace with gazillions of website themes, app interfaces and print designs created by gifted artists, it is quite difficult to fight off the competition. Winning customers is becoming harder and harder. Impressing the online audience with a visually stimulating presentation that demonstrates an upcoming product in its natural surrounding displaying it for its intended use, is probably a way out. Here, highly realistic mockups that frame the design in a way that make it look like a professional photo shoot rule the roost, increasing the value of the work and inspiring the users on a purchase. That’s what part 7 of our Blast from the Past series is all about…

What is online marketing and how does it work? Our new series about online marketing explains the basics of this complex topic in easily digestible morsels. It’s not for nothing that single areas often are the work content of a whole agency. However, not every area fits every business sector. The reason for that and how a online marketing strategy may look like will be determined during this series. For that, we start with a definition and a short overview of the different instruments available.

Frequent readers know. Starting from January cartoons have found their place here at Noupe, too. Our series “If Web Designers Were …” has become popular quite quickly, and our readers keep submitting their favorite client situations. Thanks and keep going. Some of the submissions, while funny, cannot adequately be described in the format of “If Web Designers Were …”. That’s why we decided to add another series named “The Book Of Web Design: Clients’ Standard Quotes”. You are about to see the first cartoon of it.

Developing WordPress themes on your own is a great thing to do. I remember well how I worked on my first theme, and how much fun it was. Though afterwards, I was in a cold sweat, doing much reworking and bugfixing in order to make it through WordPress´s theme testing procedures. After all, I was very keen to present it to the whole world. Being kind of clueless about WordPress in general back then, all the little helpers out there were unbeknownst to me – helpers that make the work of developers so much easier. To spare you this kind of hardship, I have come up with a list covering the most important plugins and ressources for WordPress theme development known to me.

I must admit up front that I never hopped on board the Tumblr train during its meteoric rise these past few years. While I’ve taken a fair stab at setting up a few blogs, I could never quite get the app to stick with me in the same way that a personal WordPress site (or even Medium) has been able to do.

That being said, I think Tumblr is one of the coolest apps in the world right now with world-class design and an extremely polished end-product. The Tumblr website is a beautiful thing in and of itself, so be sure to check that out if you’re looking for web design inspiration.

But today’s post is all about Tumblr for iOS. At first glance I didn’t think I’d be able to find enough cleverness or creative patterns to compile a full post; I’ve come away pleasantly surprised and I’m excited to share this next chapter in the Design Details series with you!

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

As you’re scrolling through your feed on Tumblr, tapping the ‘Home’ icon in the tab bar will, as expected, return you to the top of the view. What Tumblr does here though, that I’ve never seen on any other app, is toggle the ‘Home’ icon with a new ‘Return to position’ icon. Tapping once more will scroll you back down to your previous place in the feed.

This is amazing. I honestly wish other apps would do this already – Twitter, Facebook and Instagram all come to mind as places where I might accidentally tap to the top of the feed only to have lost my previous position.

The springy animations that trigger when you tap the ‘Compose’ icon in the tab bar is great – it looks slick and provides some nice interactivity.

What I thought was cool is that this view also responds to the accelerometer in the iPhone providing a subtle panning movement as you tilt the device. There’s not really much to say for this in the way of usability, but I appreciate the fact that there are people out there paying attention to these small things (even if most people might not notice).

For some reason Tumblr lets you drag a blog’s profile picture around – similar to a Facebook chat head. I couldn’t quite figure out why this is supported, but hey – it’s fun, right?

I also really appreciated some of the subtle scaling transitions that happen to the body layer whenever you expand/hide the profile photo. The obvious solution here might have been to just enlarge/shrink the profile picture on top of a static view. In this case, however, the view responds to the interaction and fades out+back or in+forward depending on the input.

If you land on an empty view (in this case I went to view my non-existent favorites), Tumblr gently guides you in the right direction to begin exploring content. This is incredibly smart and something I haven’t actually seen too many other apps do. Guiding users to a desired behavior is good; guiding them when they’re potentially lost or confused – well, that’s just great.

This video captures the (almost) over-the-top animation and motion that accompanies a new following interaction. After a few times triggering this interaction I realized just how helpful this bit of feedback could be to new users, helping them to understand not only the navigation patterns of the app but also how to get value out of the app. Follow people, fill up your feed, like, repost…etc.

Any sort of ‘Like’ or ‘Favorite’ interaction on iOS is super low-hanging fruit for any designer/developer out there. Adding small touches of interactivity and feedback make the whole process so much more gratifying and fulfilling to users.

And if you’re smart, you’ll do this right and include a reverse animation for un-liking/favoriting!

If you’re going to reblog a piece of content, you can toggle the visibility of the attribution within the composer. As a non-seasoned user of Tumblr, I honestly don’t understand reblogging. When I saw the initial reblog window, I tapped the ( x ) to get rid of the attribution out of curiosity. That curiosity may have turned into frustration if the attribution had been completely removed, but instead it turned into a feeling of safety and flexibility once I knew that I could restore it with a tap.

Just another quick video to show the scale and grandeur that Tumblr gives to the following interaction. Moving an element across the entire view is dramatic and, I suspect, highly effective.

I spent a while playing around with the composer, trying to share different content types and seeing what was possible. My favorite interaction that came out of this whole process was the simplicity of reordering images in a gallery. Subtle movements give hints as to where your photo is going to go so that you can build a gallery exactly how you want it.

If you somehow manage to get to this empty dashboard view (trust me, it’s quite hard – Tumblr really never wants this view to be empty so they usually populate it with suggested content), Tumblr adds a nice animated splash. This one is cool to me because it’s so clear that someone put in the time and energy to make this view feel friendly and open, even with the understanding that it might never be seen.

Toggling the show/hide password field also opens/closes the little eye icon. I appreciate the subtlety of this one and that it breaks away from more tradition password visibility toggles!

In my longest-ever Design Details recording, I sign up for a new account with Tumblr to show off the onboarding flow. It’s insane how fast they get users to content so that they can start favoriting, sharing, etc.

About halfway through the video we see a nice tutorial view slide into view. That whole interaction is gorgeous, too – it’s unlike anything else I’ve seen in other app walkthroughs. I love the way it gently pushes the main view out of the way and back into the distance. The motion is buttery and builds up a certain feeling of trust and friendliness.

Some profiles on Tumblr interact with the bottom tab bar in a wonderful way with color and contrast. I found three profiles in this video that all change the color of the tab bar in one way or another, making users feel at-home while looking through vastly different types of content and profiles.

Tapping the little ‘x’ on a suggested card in the feed will slide it gently out of view. Interestingly, the cards will slide off to both the left and right (at random, I believe). This is another one of those details that might not feel like it matters. Will anyone really notice? Maybe, maybe not – but in my opinion this attention to detail breathes life and passion into the app for those who care to notice.

I stumbled across another walkthrough tip and managed to get a pretty clean video of the interactivity here.

Take a look at the micro-copy: how often do you see “Rad” being used as confirmation text? I’d venture a guess: never.

Tumblr adds these small splashes of personality and humanity into different parts of the app which made me feel oddly connected to the product on an emotional level. Mission accomplished.

This detail came through on Twitter – you can scrub along an animated gif to quickly skim or skip to a different section! More apps should have this – I’m looking at you, Reddit!

Another recommendation from Twitter, this is one I can’t believe I overlooked! If you tap + hold to reblog a post, we get this nice bubbly progress paired with an incrementing notes count. This is really great because it can actually save you a lot of time compared to the normal reblogging flow (which lets you edit the post).

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.

Only a couple of years ago, there was talk about email marketing’s heyday already being over. The rise of social media and mobile devices, the thinking went, would spell the end for email marketing since communicating via emails would become rare. But, as the saying goes, the report of the death of email marketing was an exaggeration – today, it is still one of the most important and most popular communication tools out there. Even in the age of „WhatsApp“ email stays one of the most used instruments.

Hero areas, ghost buttons, Material Design, parallax scrolling are the craze in 2015 and seamlessly combine with the ever-growing trend to responsive design. WordPress theme developers have taken the challenge and are constantly coming up with new and interesting interpretations of the latest design trends distilled into one heck of a theme. We have taken the challenge, too, and again curated another round of the latest free WordPress themes. Take them as inspiration or use them as they are. All you need is a self-hosted WordPress, and you’re good to go…

Material, grids, parallax, ghosts, heroes – it’s all there in our third iteration of 2015?s collections of free HTML, CSS, and PSD templates. These design elements will serve your next project perfectly no matter what. AS always we have roamed the web and came up with what we found the best resources in HTML, CSS, and PSD. Some of the following elements are templates for websites, others deliver more or less complete UI kits to build that great web (or native) app around. There should be something for everybody…