Webdesigner Depot

syndicated content powered by FeedBurner

FeedBurner makes it easy to receive content updates in My Yahoo!, Newsgator, Bloglines, and other news readers.

Learn more about syndication and FeedBurner...

Current Feed Content

AddThis Pro introduces new pro tools for website owners

Posted:Tue, 22 Jul 2014 08:15:09 +0000

We all know the importance of social media; content may be king, but it’s a king without a castle if no one is visiting your site.

What all website owners need is a way to encourage new traffic, and retain old users. Sure, Google can help a bit, but the real prize is success on social media, and for that you need something like the AddThis social sharing tool.

You’ll have seen AddThis on any number of sites, including this one where we’re currently testing it out, and the company are now releasing AddThis Pro, an enhanced set of tools designed to increase social media engagement and track your success.

It’s easy to be cynical about AddThis, there are countless tools online claiming to drive more traffic to your site, and they rarely pay off. However, in the case of AddThis Pro, there may be some truth to the bold claims: simply by switching to the Pro option, The Cool Rental Guide increased sharing by 140%; that’s an incredible return on investment, but they’re not alone: Merchtable achieved a 41% increase in pageviews and a 25% increase in sales; and Hijos Del Atomo reduced their bounce rate by 7.75% in just three weeks!

Our favourite feature of AddThis Pro is that it modifies the social media options it displays, dependent on the current site visitor. It’s a great way to show users that you care about them.

There’s only really two downsides to AddThis Pro: firstly the widespread use of the tool means that the default buttons will look pretty generic pretty quickly — fortunately the dashboard has a ton of customization options and if you want to mix in your own code you can do even more.

Secondly, AddThis Pro has a tendency to convince you to use all of its tools, on every page, which is hovering around the area of spamming your own users — on this front you just need to exercise some restraint, test which option works best for you and your users, and then focus on that.

All in all, a 50% higher clickthrough rate, which is what AddThis Pro claims to deliver, is a huge boost for any site.

Social sharing isn’t AddThis’ only strength, the web tool also features advanced reccomendations, that ensures that when users are finished with your content, they’ll keep reading instead of closing the browser tab and taking their attention elsewhere.

Analytics, dynamic recommendations, and engaging mobile-friendly social media sharing all combine to drive your content to new heights, and make AddThis Pro an great tool for anyone serious about their site’s performance.

Visit AddThis

15 Retro & Vintage Business Cards Collection – only $19!

Source
Can web animation save flat design?

Posted:Tue, 22 Jul 2014 08:15:04 +0000
As web designers, we need to make sure we keep our skills fresh and up-to-date. We don’t need to follow every trend that comes along (like long shadows) but we do need to keep learning and improving our skills as the web grows and matures.

One exciting new development that is beginning to gather steam in the web design industry is animation. More and more companies are looking to animation for their apps or websites as a way to delight their users, standout from competitors and improve the usability of their products.

Another reason animation is in high demand is because of the Web’s recent focus on flat design. Flat design, while overall a very positive thing, has a few problems that are driving people to look for ways to improve upon it.

Flat design has a few problems

Today, more and more companies are adopting the minimal “flat design” aesthetic. Websites are beginning to look very similar with not much to differentiate between brands. This opens up the opportunity for designers to explore other means of making their website engaging and exciting to their users.

This is where animation comes in. Animation is like salt on your fries; without it, they are a little bland and lacking flavor. By animating different elements of your design you can add a bit of excitement and delight your users with creative and helpful animations.

Another problem with flat design is that users can lose context of what will happen when they interact with a website/app. When buttons stop looking like buttons or other things like badges begin to look similar, people are confused about what will happen when they click on them.

We can solve this problem by designing different animations that occur when elements are hovered or clicked on, Colin Garven’s submit button for example:

Lastly, one final problem I want to touch on is informing the user when a change takes place. Today, many modern web apps are using powerful tools like AngularJs and Node.js to build “pageless, live-updating” apps. Think of Gmail: in order to get a new email you never have to refresh the page; it simply pops in when someone sends you a new email.

This can be a bit of a problem if users are not given some notification or clear sign that the page has changed or loaded new content. If the page is saved we need to see something that will let us know the app is working and has saved our work in the background.

Animation is a great way to inform users when different events occur.

Let’s say you have a list of registered people for your next meetup or conference. When new people register, you add them to the list in real-time with node.js so they never have to refresh the page. Great, that will be really useful for our users. But now how are people supposed to know when a new person registers?

What we need is a little animation to let people viewing know that a person has registered. What about dropping-in a little alert to the top of the page with a message letting you know they just registered? Or how about fading-in the new person to the list and giving them a little blue highlight so we can tell they are new?

All these things are subtle effects that can really make the difference between an okay product and something that really delights your users.

The Web is maturing

Remember the days of IE6 and Netscape? The days when we had to worry if everyone had JavaScript turned on and we built our sites with HTML tables?

We have come a long way since then with great HTML5 support, CSS3, and responsive design, and they’ve all combined to give us amazing options when it comes to animating the Web.

CSS3 animation

Today, every major browser supports most or all of the standard CSS3 features recommended by the W3C. This gives us, as designers, huge potential to create simple yet compelling animations that breath life into otherwise static websites.

Transitions: CSS Transitions give you the ability to perform a simple transition between two different states. Say you have a simple button that you want to change colors and push down slightly on hover, a transition would be perfect for this use-case.

Keyframe Animations: keyframes are a powerful CSS3 feature that allow you to create custom animation sequences. They allow you to control the timing and easing, the duration, any delay needed, how many times the duration repeats, which direction it animates and more. You can even declare multiple animations on an html element.

SVG graphics

One of the awesome new features of the “mature web” is SVG support. We can finally start using images that scale well for different size and resolution screens. Not only that, but SVG’s are way more powerful than png images because you can interact with them in CSS and JS. This gives us the ability to create impressive animations that were previously only able with animated gif’s or Flash.

Take a look at this animated gif that has been recreated in CSS and SVG:

One thing SVG animation can really be useful for is creating animated graphs and charts that can scale to any size. Checkout this simple example on JSFiddle:

The possibilities for SVGs are almost endless!

HTML5 canvas

Another exciting technology that has had full browser support for a while is HTML5 Canvas. The canvas element is used to draw graphics on the web.

It is similar to SVG but differs in several ways. First off, it is a raster format rather than vector. This means it performs better for more complex drawings and animations, but doesn’t scale well for high resolution screens.

One big downside of canvas is that it doesn’t have manipulatable DOM elements. This means every time you want to change the drawing or animate it, you need to redraw the image.

In spite of these downsides, canvas is still a great tool that can be used for more complex animations and drawings.

Javascript animation libraries

Even though CSS3 animations are becoming more and more powerful, there are still some cases for using Javascript animations.

More and more libraries appear all the time that give us amazing animation at a fraction of the resource cost we used to pay for Javascript animation.

Snap.svg: snap.svg is designed to make working with your SVG assets as easy as jQuery makes working with the DOM. It features a super rich animation library with easy event handling that helps you bring your SVG’s to life.

Greensock GSAP: gsap.js is a suite of professional tools for scripted, high-performance HTML5 animations that work in all major browsers. It is 20x faster than jQuery and even faster than CSS3 animations in some cases. Super-buttery 60fps here we come!

Transit: transit.js is a jQuery library that replaces the jQuery animation module with super-smooth CSS transitions & transforms. The great part is that is uses the same syntax as jQuery’s $(‘…’).animate.

Velocity: velocity.js is similar to Transit in that it uses the same syntax as jQuery so all you have to do is include the library and replace jQuery’s animate with .velocity().

scrollReveal: scrollReveal is an open-source js library that helps you create and maintain how page elements fade-in, triggered by when they enter the viewport.

Bounce.js: bounce.js is a new tool for generating exciting CSS3 powered keyframe animations.

Improved hardware in mobile devices

One final reason animation is really taking off is that today’s devices are getting more and more powerful with every new release.

The iPhone 5s, for example, has a super powered a7 chip in it.

According to Extreme Tech:, “The CPU is not just a gradual evolution of its Swift predecessor — it’s an entirely different beast that’s actually more akin to a “big core” Intel or AMD CPU than a conventional “small core” CPU.”

Also, with iOS8, Apple will release Metal, which is a very powerful 3d rending engine that will give you the ability to create desktop-like games that run on mobile devices.

Some Android phone companies like LG have even built devices with as much as 3gb of ram, the LG G3 being just one. I have a laptop from a few years back that barely has that much.

All this to say that not only can we create animations that run great on desktop computers, but the same animations will work great on phones, tablets and other mobile devices.

Animations are helpful to users

Animations can really help make your product, app or website more usable and accepted by your users. This is because:
- they give context to what is happening;
- they keep people engaged;
- they help your company standout;
- people enjoy them.
Think of Kickstarter – a great video explaining your campaign can be the difference between being wildly successful, and barely getting noticed. The best campaigns use powerful videos with a well-crafted story to generate excitement and build momentum for their product or campaign. Animation can do the same for your website or app. It can mean the difference between people being engaged and raving about your app, and another product landing in the app graveyard.

15 Retro & Vintage Business Cards Collection – only $19!

Source
How to design for mobile devices, when you don’t have one

Posted:Mon, 21 Jul 2014 08:15:29 +0000
Once upon a time, about an hour away from where I currently live, worked a web designer who loved his Photoshop comps and fixed-width layouts. And well, I don’t want to spoil the ending, but that designer was me.

Then, as I was minding my own business, the web-based creative community went berserk over this newfangled concept called “responsive design”. As any young, bright-eyed, bushy-tailed professional would do, I investigated. After all, the newest, latest thing should always be given at least a passing glance.

What I discovered, however, left me dismayed. An evil mastermind named Ethan Marcotte had unleashed a dastardly plan to make web designers work harder! His book left people ranting and raving about how we needed to “consider mobile users” and “make our websites work on as many platforms as possible”…the heathens.

Of course, I resisted as long as I could. I fought hard and bravely against this tide of good sense and smart business; but it was all for nothing. Then, I fell back on excuses: “But I don’t have any mobile devices to test with!” And that, dear reader, is the point. It turns out you don’t absolutely need one.

Over time, I’ve come up with a few basic guidelines that, should you find yourself without a mobile phone or a tablet, will help you design websites that make things look good on most mobile browsers anyway.

Disclaimer: you shouldn’t be listening to me if…

…you’re building anything bigger than a small, content-driven website. Large websites and application-driven sites should most definitely be tested on actual mobile platforms. I mean, sure, you could probably fake it, but I wouldn’t advise it.

When you’re working with unknown variables, your best option is to keep things stupidly simple. Yes, I’m invoking the almost clichéd KISS rule, because it works.

Do your research

Without a rack full of smartphones and so on, you need to rely on what other people know. Thankfully, lots of time and energy has been spent examining the capabilities of the more popular mobile browsers out there, and how they compare to each other.

Find out what your target audience is, and then find out what kind of browsers they’re using. As always, Google is your friend. Then, all you have to do is design for statistics.

If most of your mobile target market uses Android/iOS in one form or another, you’re in luck! Their default browsers (and most popular alternatives, such as Firefox) are modern for the most part. Advanced layout techniques, basic CSS3 effects, jQuery… these will all most likely render reasonably well.

If your target audience uses other platforms, however, you’ll need to do more specific research about them, and find out what they can and can’t do.

Now, what do you do if you have little to no information about your users? Try to at least figure out where they are. Most websites have, at the very least, a general region that most of their users hail from. Get the stats for that region.

Failing all of that, design for the worst case scenario.

Start here

To make your job a little bit easier, I found a website with a fairly detailed comparison of what the more popular mobile browsers do and don’t support. Check it out at mobilehtml5.org.

And of course, there’s the always popular caniuse.com

Consider using frameworks

I know some designers swear by creating custom code specific to each project, but when you’re working blind, so to speak, reinventing the wheel is not a practical option. Frameworks that have already been tested on mobile platforms take a lot of the guesswork out of the process.

Guesswork is bad. Avoid it.

Now, I obviously haven’t personally tried or tested every framework out there, so you’ll have to find one that does what you want it to do, and research it, comparing it against the capabilities of your intended mobile platform. Still, there are a few you could start with:

Kitchen-sink frameworks

These are the ones you can probably name off the top of your head. They are characterized by their sheer complexity. They bring layout systems, UI elements, and jQuery plugins together in one powerful package.

The most famous of these are Bootstrap and Foundation. I won’t bother comparing them here, so go ahead and Google “Bootstrap vs. Foundation” if you need more details. All you really need to know for now is that in each framework, each component has been extensively tested by a rather large fan-base and is mobile-ready.

Mid-range frameworks

These don’t try to do everything for you, but rather just give you enough to get started. This makes customizing things a bit easier, but the creation and/or styling of more complex UI elements is up to you.

This category includes Skeleton, LESS Framework 4 and so on…

Layout-only frameworks

This is actually my personal favorite category. I prefer to start with a blank screen and a layout system at the ready, which allows me to create the kind of website I want without having to overwrite a lot of CSS, or try to extract specific parts of any given framework.

UI element frameworks

These frameworks, for the most part, don’t seem to concern themselves with layout or page structure. They are designed to provide an easy way to add fancy, mobile-compatible application interface elements (read: widgets).

I’ve only ever tested one, but my research says that the three best (or at least, most popular) frameworks in this category are jQuery Mobile, KendoUI, and Wijmo.

Embrace accessibility

It turns out that accessibility is not just for the color-blind or the completely blind. A lot of the older mobile browsers are so limited in capabilities that it’s pretty much like browsing with all CSS and Javascript turned off.

Your best bet, in this case, is to make absolutely certain that your website is usable under these conditions. Turn all of those pretty things off, and make sure that it’s still possible for users to achieve the website’s goals without them.

Use emulators

Device emulators usually aren’t one hundred percent accurate, but you can test the most important things, like layout and so on. Bugs I’ve encountered are often smaller things, like web fonts not rendering. Don’t worry, they should work just fine on the actual hardware.

But which emulators should you be using?

Android SDK

This one works a bit slowly, but it works like a charm. You have to download the entire developer kit, but it’s well worth having a program that closely imitates not only the Android default browser, but the entire OS. Additionally, you can test your site on a variety of virtual “devices”.

Opera mobile emulator

Another one that works basically as advertised. You download it, pick your “device” and go.

Firefox options

Firefox has several options for testing your mobile content. The first is a simple emulator that mimics the rendering functionality of Mozilla’s mobile Firefox project, codename: Fennec.

It’s not overly complicated, providing you with a simple, resizable window, so it’s up to you to manually set the screen size you want to test.

The second option is an add-on for the desktop version of Firefox. Dubbed the Firefox OS Simulator, it provides you with a whole platform to play with, not just the browser (much like the Android SDK).

Windows phone

I was not able to test this emulator, as it requires installing a very large SDK, and the install was bugged, at least for me. Still, it’s out there for you to test at your own discretion.

Blackberry

Blackberry offers a number of simulators for BB10. Perhaps it’s me, but I haven’t had much success running any of them. I’d love to hear from anyone who manages to make them work.

iOS

Last, but certainly not least, Apple provide a free iOS simulator that can be used to test for Apple devices as part of Xcode. Unfortunately, because it’s part of Xcode, it’s Mac only.

One size fits all

If you’ve got the budget (or can test really quickly, as their free time is time-limited) you can’t go too far wrong with BrowserStack. They’ll allow you to test on many desktops and a huge variety of mobiles. Not as responsive as the real thing, they will show you issues with things like layout.

Final tips

Set the viewport size

Mobile browsers tend to play around with zoom settings, or so my experience has been. If you want your website to look the way it does when you shrink your browser window down to mobile sizes, use this beautiful piece of HTML in the head of your document:
```
<meta name="viewport" content="initial-scale=1.0; maximum-scale=1.0; width=device-width; ">
```
Learn to love the simplicity

Let me rephrase that: minimalism rocks on mobile. The minimalist aesthetic adapts well to smaller screen sizes with fewer tweaks and adjustments, saving me a lot of time. Maybe this seems like a no-brainer to some of you, but I cannot emphasize it enough.

Conclusion

This collage of information is only the tip of the iceberg, of course, and no match for actually testing your websites on real mobile hardware, but it should allow you to get started, and hopefully earning enough from mobile design to afford that device lab you so richly deserve.

Featured image/thumbnail, mobile device image via Shutterstock.

15 Retro & Vintage Business Cards Collection – only $19!

Source
Comics of the week #244

Posted:Sat, 19 Jul 2014 09:01:24 +0000

Every week we feature a set of comics created exclusively for WDD.

The content revolves around web design, blogging and funny situations that we encounter in our daily lives as designers.

These great cartoons are created by Jerry King, an award-winning cartoonist who’s one of the most published, prolific and versatile cartoonists in the world today.

So for a few moments, take a break from your daily routine, have a laugh and enjoy these funny cartoons.

Feel free to leave your comments and suggestions below as well as any related stories of your own…

Before Kim and Miley

Another point of view

Another banner ad failure

Can you relate to these situations? Please share your funny stories and comments below…

15 Retro & Vintage Business Cards Collection – only $19!

Source
The secret to Airbnb’s successful rebrand

Posted:Fri, 18 Jul 2014 20:15:44 +0000

Unless you’ve been abstaining from social media this week, it can hardly have escaped your notice that Airbnb, the global accommodation finder, has undergone a rebrand, including a brand new logo.

The official name for the logo mark is Bélo, and they’d like it to become “the universal symbol for belonging”. It’s an appealing notion, even if the cynic in me realizes that Nike would like their tick to become the universal symbol for running, and Apple would like their fruit to become the universal symbol for the Internet.

The new Airbnb logo

Designed by London-based design studio, DesignStudio, the new logo is undeniably a substantial improvement on the original—which looked like the lettering from a ’90s sega video game. Despite this, within minutes of its unveiling the new design had begun to be mocked across the twitterverse.

The new mark has been likened to everything from a bear’s nose, to a stealth bomber, to female genitalia. What’s interesting is that almost everyone has an opinion on the company’s branding — it’s not a new phenomenon, the same thing happened with Yahoo — from hipster wannabe to hippie used-to-be, the whole world seems to value being perceived as design-literate.

The original Airbnb logo

But if that’s the case, why did so many people begin by mocking the new mark? Well, the human eye is a strange device: rather than record what it sees, it records what it expects to see. That’s why devoutly religious people often see the image of a saint in their toast; it’s why people who watch too much porn saw Lisa Simpson doing something unspeakable in the London 2012 Olympics logo. We expect corporate logos to flop, because so many have before.

But if we’re objective, the new Airbnb logo looks no more like genitalia than a lowercase ‘d’, or (heaven forfend) a lowercase ‘a’.

I suspect the real reason most people began mocking the design is that it was simply fun. It’s irreverent, and carries with it a small victory for freedom over the power of the mighty corporation. And that, is exactly what Airbnb were aiming for.

With admirable self-assurance the marketing team at Airbnb have embraced the idea of a logo that can be altered, not just depending on what document it’s presented on, but everytime it’s used. They’ve even created a dedicated micro-site to help you create your own version of the Bélo. Renting out a lodge near Yellowstone park? Why not turn the logo into a bear’s face? Renting out rooms next to an airforce base? Why not turn the logo into a stealth bomber? There are probably apartments in Amsterdam mocking it up as genitalia right now.

My first thought when I saw the new design was that it looked like a map pointer; my second, was that it looked like someone providing shelter with their outstretched arms; thirdly, I felt it resembled the habitat logo that I’ve admired for years. I didn’t see the heart, or the keyhole, both of which are ‘official’ interpretations. But what matters to Airbnb, is that I had both a personal, and an emotional response: if I’m lost, they’ll point me in the right direction; if I need shelter, they’ll provide it; they’ve probably got some comfy bauhaus-style furniture.

Airbnb have recognized that every single member of their community is more than just a supplier; and that just as every room, apartment, town house, or lodge is unique; so too are the experiences they offer us. Airbnb’s rebrand provides a framework for each user to redefine the brand in their own way, without detracting from the overall identity.

The logo is so successful not because it represents the brand, but because it embodies the brand’s core values. It’s a design that is simultaneously intelligent, self-aware and brave.

15 Retro & Vintage Business Cards Collection – only $19!

Source
Deal of the week: 11 professional email templates from ChocoTemplates

Posted:Fri, 18 Jul 2014 08:15:59 +0000

One of the toughest tests any web designer is asked to undertake — and we all get asked at sometime or other — is to design an email.

Sure, we know what we want the email to look like, but how do you make it consistent across all the hundreds of email clients? And what’s this? Layouts built with tables?! Seriously, email design is a hugely difficult task for even the most seasoned of web designer.

So we’re delighted to announce that our sister-site, MightyDeals.com, has arranged a jaw-dropping 95% discount on these 11 professional grade email templates designed by ChocoTemplates.

There are over 100 color variations, so you can be sure to match your desired branding, and if you choose the PSD option with this deal you’ll get 528 layered PSD files, giving you complete freedom to customize any part of the design as you see fit.

All of the templates have been thoroughly tested in the leading email clients, so you can be sure your clients will see them as you intend. Most importantly of all, these templates are both MailChimp ready and CampaignMonitor ready; there really is no simpler way to branch out into email campaigns.

The regular retail price for these templates is $242, but for a limited time you can download all 11 for just $12, that’s a 95% discount! Or, get all 11 templates and their PSD source files for just $18 instead of the regular price of $352!

Head over to MightyDeals to grab this offer today.

15 Retro & Vintage Business Cards Collection – only $19!

Source
Free download: 100 repeating vector patterns from freepik.com

Posted:Thu, 17 Jul 2014 20:15:17 +0000

We all love flat design, but ‘flat’ doesn’t have to mean boring! If you’d like to enhance your projects with some of the coolest repeating patterns around then look no further, because our friends at freepik.com have provided 100 of them, absolutely free of charge, for WebdesignerDepot readers to download.

Whether you’re looking for retro-cool, nature-inspired, or on-trend geometric designs, this huge pack has you covered.

The collection provides the patterns in .ai, .eps, and .jpg formats, and the vector formats are fully editable. What’s even better is that they’re all free for personal and commercial use, all you have to do is credit freepik.com.

Download the files beneath the preview:

Pay with a Tweet

Download now

Please enter your email address below and click the download button. The download link will be sent to you by email, or if you have already subscribed, the download will begin immediately.

I agree to receive weekly newsletters from WebdesignerDepot.com. Unsubscribe at any time. Your email will not be sold/rented (unsubscribe at any time).

15 Retro & Vintage Business Cards Collection – only $19!

Source
11 websites that perfect UX by focusing on details

Posted:Thu, 17 Jul 2014 08:15:59 +0000

Charles Eames said, “The details are not the details. They make the design.” A website is a composite of details—and its content is communicated through them. Whether designed to provide information or serve as an app, a well-executed site is one that has turned a critical eye to everything, from the copy to images to layout.

Details matter in web design because positive impressions, sparked by a website’s overall presentation and usefulness, matter. To echo Eames, they make the design, and inattention to details can have precisely the opposite effect.

Here are a variety of details — some related to the interface, others to interaction — to consider during your next web-based project.

The speed of Basecamp’s password verification

Basecamp is a web-based tool for project management. Since its introduction, speed and efficiency were paramount.

For its verification interface, what is smartly spared is the need to press an “OK” button after entering one’s code. If the code is entered correctly, the default screen automatically displays. Tiny measures like these support Basecamp’s already fast performance.

Colophon practiced by Neoteric Design

Though colophons have been used in books since the 15th century, their purpose is applicable to the web. Neoteric Design shares the production notes of their website — what was used, from fonts to software to programming languages to the content management system. If a visitor wonders about how a site is created, a colophon is a tidy way to help satisfy this curiosity about certain specifics of a website’s build. It also testifies to the exploration of what aspects from printed communication can be made relevant to web-based communication.

Versatile typographic grid by Berger & Föhr

Pioneering designer Massimo Vignelli, who passed away in May 2014, championed the typographic grid, which he defined as “the underwear of the book” (from Brain Pickings’ post “Massimo Vignelli on the Secret of Great Book Design”). Minding the underlying grid is a seasoned means to keep the site neatly arranged.

A grid-based structure is evident in Berger & Föhr’s redesign of the site for the Boulder Museum of Contemporary Art. The apparent distinction is the extent to which the typographic grid is thoroughly applied to the site’s content: it is clearly consistent from the search form, to the navigational pull-down menus, to the calendar views, to the footer text and links. More so, the utility of the grid remains consistent in the site’s responsive states.

When rigorously used to organize content, whatever the type and scale, the typographic grid ultimately imbues an overarching sense of coherence.

Pride in place celebrated by Maker’s Row

There is an emerging practice in web design of proudly displaying the place where a website originated. This is commonly found in the footer marked by “Proudly made in…” Maker’s Row emphasizes their team’s roots by revealing their respective hometown as part of their Team page. More than acting as mere “location-based” information, sharing where each team member came from expresses a cherished sense of place.

Direct access by TWLOHA to social media

While it’s typical to display a string of icons linking to social-media destinations, TWLOHA uses the entire site name instead. The comprehension is immediate. One obvious benefit: no confusing the icons between “t” of Twitter and the “t” of Tumblr.

Desire by MINIMAL to connect

Often, websites include a page marked Contact. Design studio MINIMAL wants to Connect. A different word evokes a different tone (that could help make all the difference to invite an opportunity).

“Connect” sounds more inviting than “Contact.” More human, less perfunctory.

Nudges to access Draft

Because it’s a very spare form, a log-in/sign-up utilizes generous margins. Nathan Kontny, who made writing app Draft, inserted users’ endorsements alongside the form. They may steer a prospective user to try, even adopt, the tool.

From a business perspective, the lesson is: don’t be shy with showing positive impressions by actual users of your web-based app or service.

Colors of CreativeMornings

Adjacent to its location, each chapter of CreativeMornings is identified by a distinct color. This element thoughtfully persists throughout CreativeMornings’ site. It appears in the chapter pull-down menu. It accents edges, shapes, and other playful forms. It’s echoed as an animated strip when content is loading.

In substantial and subtle ways, CreativeMornings’ website is elegantly color-coordinated.

Ultra-lean sign-in of Pulley

Created by the same group who make creative marketplace, Big Cartel, for creative practitioners to showcase and sell their art and products, Pulley, is an eCommerce app to sell digital downloads.

Its sign-in requires only the password. This is a purposely trimmed case of web-based entry with highly reduced friction.

Project stories of Crush Lovely

To put a twist on conventional labels such as Case studies and Portfolio, creative studio Crush Lovely presents what they do as Project stories. This approach speaks to the narrative of the work. For a project is essentially a story, bracketed with a beginning (project’s inception) and end (project’s delivery), and bridged with a narrative thread (the process).

This outline is fleshed out after selecting a client example, of the Project stories series, in order to view it. Other labeling tweaks are noticed: as part of the introduction at the top, instead of the “objective,” it’s re-dubbed as “ambition”; as part of the conclusion at the bottom, instead of “see video,” users are invited to “meet the finished product.”

In total, these adjusted labels don’t point the website visitor to a dry description of the firm’s work. They help pique curiosity and point to a lovely story.

Side projects of Knoed Creative

An About us category relates the staple description of the whom and what of the company, which may include their mission/vision/purpose. Knoed Creative inserted a Beyond Nine to Five section that shares work they do on the side. It taps into the phenomenon (and necessity) of side projects. It also diversifies what an “About us” is expected to show.

Both aspects speak to a proactive character of creativity, extended beyond the regular work day and space.

15 Retro & Vintage Business Cards Collection – only $19!

Source
50 fantastic freebies for web designers, July 2014

Posted:Wed, 16 Jul 2014 08:15:57 +0000

New projects are being released all the time that make us excited, curious, inspired and sometimes a little bit jealous. Today we continue our monthly series of the very best free resources for web designers with a collection that includes cool scripts, awesome fonts, great ideas, and must-see experiments.

If this collection is anything to go by, July is shaping up to be a fantastic month. Whether you’re a designer, developer, or enthusiast we’re sure you’ll find something here to feed into your next project.

Draft

A Retro display font.

SCSS waves

An artistic sundown effect created with CSS.

Wafer

A unique 3D font for display text.

Single type

An abstract font based on a single continuous line.

Menu transition effects

Elegant transitions for sidebar menus.

Socket.io

Featuring the fastest real-time engine.

IMDb concept

Movie review page concept template.

Instajam

JavaScript wrapper for the Instagram API.

Turquoise rings

A seamless high resolution pattern.

Raindrop.io

A smart bookmarks manager.

Opal

A Ruby to JavaScript compiler.

Ouibounce

A library to help increase your conversion rates.

Card

A plugin to simplify credit card forms.

Motorcortex.js.

A library for creating and managing animations.

Cinematic text effect

A stunning 3D text effect, ideal for movie posters.

Atvice

An all caps medium contrast font for display text.

Baby mega pack

A nice set of retro baby themed badges.

Fudi

A multipurpose landing page PSD template.

Say two

An experimental 3D font.

Hi-res photo set

Almost 30 MB of high resolution photos for designers

SilverTrack

An extensible jQuery carousel plugin.

Poster mockup

An abstract design for posters.

Outdoor camping set

Another beautiful set of badges for camping related projects.

JS nice

Makes obfuscated JavaScript code readable.

Vintage logos

A set of 6 logos for vintage projects.

Rock font

A vector font for display text.

Maps UI

An interface with several elements for map creation.

Velositey

A Photoshop plugin for faster website layouts.

Leather textures

A pack with dozens of beautiful, seamless, leather textures.

Monarc

An all caps display typeface.

Flat flags

195 flags in flat format.

Compressor.io

A powerful online compression tool.

Vampirr

A gothic experimental font.

Maxmertkit

A fluid and customizable framework.

Buttons generator

An online HTML sharing buttons creator.

Scratchy

A collection of grunge brushes

Uni sans

An all caps display font.

One page

A template for a landing page with 3 color combinations.

Timber

A minimal PSD landing page template.

Summer lettering

A set of 12 retro summer logo templates.

3D Neon

A 3D render lettering pack.

Summer icons

50 vintage, flat, summer-themed icons

Social media icons

130 cubic social media icons.

Business card mockup

Photo-realistic mockup for business card presentation.

Ozarks

Rough handwritten font for display text.

PSD dashboard

A flat PSD dashboard for designers

Apple mockup

A set of popular Apple devices including smart objects.

Flat animals

An elegant, and cute, set of animals.

Blurred backgrounds

High-resolution backgrounds for all kinds of projects.

Bliss yeah

An experimental bubble-like font.

15 Retro & Vintage Business Cards Collection – only $19!

Source
The 10 commandments of documentation

Posted:Tue, 15 Jul 2014 08:15:05 +0000
Toyota is well-known as the most efficient organization on the planet outside of the human body, and one of their philosophies is to avoid documentation. Instead of making a “process” for when someone on the assembly line needs more bolts, they simply have 5 bins of bolts on their shelf and when one is empty they move it off the shelf and someone comes by every hour and refills all the shelves from the back. There’s no need to document anything, the process does it for you.

There was a recent article on Quartz which talked about Apple’s attention to checklists.

It turns out that the key to Apple’s creativity, speed, and adaptability is, on its surface, the exact opposite of the kind of free-wheeling creativity one might expect. It’s a checklist…a really long one.

Which got me thinking about what my philosophy about checklists is. There’s a lot wrong with checklists. They get out of date. They can be long and boring and repetitive. Like all metrics they can focus on the wrong things. But all of those things are true of skipping checklists too, right? I mean the third time you’ve made the same mistake it’s probably time to admit that following a checklist might have saved you time.

But checklists are only good if they apply and they’re updated often, and you’re still at the whim of a human who, let’s face it, aren’t built to be perfect all the time.

Real world problem

We have a standard Drupal install we start with for most clients who are on Drupal. This includes modules, settings, default users and our default test data. It used to be a checklist, but it was always out of date. Then someone went in and made it so specific that anyone even with limited knowledge of Drupal could do it, so all the die-hard Drupal people in the shop hated it, so we took that out, and then we couldn’t train anyone new on it and only senior Drupal devs could follow it, so then we started hard coding it in Drush.

Drush means that anyone with Drupal experience could run a couple of lines of code and everything would “happen” magically. No more “human error”, it’s a checklist, but instead of a messy human trying to follow a checklist, a computer followed it.

The problem with that was that even the simplest change needed a developer and every change had to be tested and so it fell apart pretty quickly.

Eventually we came across the obvious solution, which is something hard-coded in Drush, which made it somewhat hard to change.

Now we simply have a site called “clone me” or something like that and whenever we have a new client we just duplicate it. Changing it used to involve a programmer and lots of other work, now anyone with the password on our team can go and change something. If a designer wants different test data, they change it and it will automatically be in our next project. If a PM decides we need another default user for training purposes, they create one and it will be in our next project.

“The first time you do something just do it. The second time, do it and take notes. The third time, stop and see if it’s really the same. If it is make a process out of it because there will probably be a 4th, and 5th, and so on.” – Gavin Andresen, CTO Bitcoin

We were lucky enough to have Gavin here at Gravity Switch for a few years. He contributed quite a bit to our culture and our code, but his wisdom about when to “hack” things and when to proceduralize them is something that’s really changed how I approach documentation.

Gavin taught us that good code is self-documenting.

The 10 commandments of documentation
1. Thou shall not over-document — If it takes longer to document than to do, you’re over-documenting.
2. Thou shall automate before document — Take out the human factor whenever possible.
3. Thou shall not muddle through the same thing three times — If you’ve messed up or had to figure out the same thing twice, it’s time to proceduralize.
4. If it’s going to fail, make it fail big — The trickiest things are the things that you miss the first (and even the 10th) time you review them. If you have a choice between creating a process that will stop the assembly line or crash your site if it fails or one that will create a slight error, always choose “take down the site” because at least you’ll spot the problem first time.
5. Thou shall put the process where one must trip over it — because it needs to be found.
6. Own it — When following a process, keep in mind your job is to produce the best result. It’s not to follow the process. Always approach it with skepticism and look critically at the results.
7. Admit when it’s not working — Sometimes things might look the same, but they’re not. In our world, we always need standard test data, but the process for creating that in WordPress is completely different than creating it in Drupal, so we need completely different processes.
8. Fix it fast — If your process is out of date, don’t just ignore the issue and wing it, or pick and choose the parts you want to follow. Fix it as you go. It will only take you minutes longer to do in most cases, and those minutes will turn into hours next time you or someone else uses the process.
9. Pick your battles — Steve Krug (the master of usability) says you should test often. Find your biggest problem. Do the LEAST amount of work you can do so that it’s no longer your biggest problem and then repeat. You’re not trying to get any little kink out of the system, you’re trying to get the WHOLE system to run better.
10. Revisit — If you’ve used a process a dozen times and haven’t changed it, you should think about how you can make it more efficient or if you should just automate it.
15 Retro & Vintage Business Cards Collection – only $19!

Source