Webdesigner Depot

syndicated content powered by FeedBurner

...

Reset this favorite; show all Subscribe options

Subscribe Now!

...with web-based news readers. Click your choice below:

...with other readers:

(Choose Your Reader)FeedDemonNetNewsWireNewsFireNewsGator Outlook EditionRSSOwlShrookUniversal Subscription Mechanism (USM)

Get Webdesigner Depot delivered by email

View Feed XML

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

• 7 simple ways to build a buzz around your website

  Posted:Wed, 23 Apr 2014 08:15:24 GMT

  Your website looks slick, your products and services are amazing, and you’ve launched multiple marketing campaigns. So why isn’t your site producing the numbers you need?

  Getting buzz for your site isn’t always easy—but it’s necessary for your business to thrive. If you’re looking to ignite your audience and get them talking about your website, you need the right strategy…

  …these 7 tips will help get you there.

  1. Tell a compelling story

  Every business has a story. How did you get started? What do you do? What’s your value?

  You can translate all these elements into a compelling story that speaks to your audience and really gets people talking, or you can write a few dry sentences on each page, list your products and hope for some buzz—although it likely won’t happen.

  

   

  2. Offer incentives

  Nothing catches people’s attention like a promotion or a freebie. Offer contests with prizes that tie into your brand. Promote discounts. Provide a limited time offer to get word of mouth to spread.

  

   

  3. Provide dynamic content

  Read the content on your site. Is it engaging and eye-catching?

  If you’re not providing a fresh stream of content on your pages that’s worth talking about, people will pass you and your website by.

  

   

  4. Get feedback

  Want to get people talking about your website? Ask their opinions; post polls and questionnaires; inquire what users think of your products, your site interface, your new logo and other changes and announcements.

  People will have plenty to say about you and your website—and it’s a great opportunity to make improvements and evolve to match the needs of your market.

   

  5. Make some news

  If you want to promote excitement about your site, do something news-worthy!

  Send out press releases detailing changes in your business. Be sure to post news and announcements on your site as well. Keep people talking by shaking things up and showing that your company is evolving and keeping up with the latest consumer trends.

  

   

  6. Optimize your social media outlets

  You put up a Facebook page and you try to tweet a few times a week, and then wonder why the Web isn’t ablaze with talk of your site.

  Social outlets don’t work unless you engage people. Focus on groups that tie into your brand and then post interesting comments, videos and links. Actively converse with people, ask questions and strike up conversations—always an effective way to get people talking.

   

  7. Focus your marketing efforts

  Don’t just try to stir up buzz for buzz’s sake. Posting a video of a guy pulling off cool skateboard tricks might attract an audience—temporarily—but it won’t bring in targeted traffic or help your business in the long-run.

  Outline a marketing plan and structure a brand-awareness campaign that fits your business model and goals.

   

  Getting people talking about your website takes planning, strategy, and most of all, elements worth talking about. Follow these 7 tips, get site traffic buzzing and get your business humming!

   

  Featured image/thumbnail, social image via Shutterstock.

  
  
  

  100+ High-Quality Premium Themes & Templates – only $27!

  
  

  Source
  
  
  
  
  
  
  

• How to use the infinite scrolling trend, the right way

  Posted:Tue, 22 Apr 2014 08:15:03 GMT

  Infinite scrolling has became a common design pattern in recent years.

  With many high profile social networks adopting the solution, it’s come to be one of the most widely adopted patterns out there. Though however popular, every design pattern always has its own unique strengths and weaknesses we have to plan for.

  Done badly, and infinite scrolling will wreck your UX and guarantee total failure as users desert you in droves. Get it right, and you’ll have an intuitive, popular and successful site.

  Understanding why infinite scrolling drives engagement

  When implementing a design pattern, it’s always critical to evaluate the pros and cons for each unique scenario. What resulted in more user engagement for someone else, may actually result in less user engagement from your own users.

  For infinite scrolling in particular, it’s all about the type of content users are interacting with.

  Being able to determine what type of content goals you have for your users will be able to provide you with insight as to which design patterns will work best in your situation. This applies to any pattern, but especially to infinite scrolling.

  High engagement content

  Content that seeks to grab and keep the user’s interest for a prolonged period of time, or seeks to be interactive, is simply not an ideal candidate for typical infinite scrolling. If your goal is to have your users read, like, and share each individual post, giving them dozens to work through at a time may seem overwhelming.

  That being said, Medium has found a way to implement it successfully with content that wouldn’t typically benefit from infinite scrolling.

  Instead of presenting the user with the next ten or twenty posts, Medium provides a single recommendation at the end of each article. This stays true to the high engagement function, but offers the browsability benefit that infinite scrolling brings. So while high engagement may be your goal, don’t let that deter you from making a creative solution of your own.

  

  Low engagement content

  Infinite scrolling is at its best with content that requires low engagement. Sites like Twitter and Facebook are spectacular examples of this. The typical user of these sites simply scrolls down the list, consuming content but rarely actively interacting with it. While these type of situations don’t score high on user engagement, they do end up keeping users interested for longer periods of time.

  

  Uncontrollable variables in content type

  While it’s sometimes obvious what type of content your website may have, what about those that aren’t so black and white? Tumblr is a good example of this, with content that could have high or low user engagement goals depending upon what type of blogs the user follows. While these situations are rare, they do pose a problem in that infinite scrolling would be beneficial only to half of the users. Interestingly enough, the solution in this case is to minimize a user’s options of interaction with each individual post. This allows for the high engagement users to narrowly focus on individual posts, and low engagement users to consume much more content without being required to interact as much.

  It’s also worth noting that Tumblr does a fantastic job of allowing users to decide the value of content on an individual basis. Giving users the option to enable or disable infinite scrolling in their preferences provides further control over how they consume the content.

  

  Hybrid scrolling solutions

  Many places choose to implement a hybrid approach to infinite scrolling, prompting the user to load more content when they reach the end of a page. By doing so, they give back the control to the user to decide how much content to load – which is critical on mobile. This solution also helps with maintaining a consistent data load on the server. After automatically loading a predefined number of pages, a button would appear prompting the user to load more manually.

   

  When Infinite scrolling goes bad

  There are countless examples out there of websites using infinite scrolling, and more than a few do so to the detrement users. Dan Nguyen wrote an interesting article back when Etsy attempted to implement the feature. What ended up happening is Etsy went ahead with implementing it before testing their assumptions. Loading more search results, at a faster rate would seem to be a good thing at first… But when the content requires high user engagement—as is the case with shopping—things can quickly turn sour.

  In this particular case, users are actively searching for something of interest. Attempting to find the perfect product out of a sea of choices. So when the user is flooded with an seemingly infinite amount of choices, they give up and seek other avenues to find what they’re looking for.

   

  Best practices for infinite scrolling

  As with any design pattern, there are best practices that are usually good to follow. These aren’t the laws of using the pattern; rather they are what the majority of successful implementations do.

  • Have a graceful fallback: Ensure that users without JavaScript aren’t left out in the cold. Design for old fashioned pagination first, and then use JavaScript to hide it and implement infinite scrolling.
  • Give a visual indication of loading more content: Providing users with a loading animation informs them of what’s going on. Without it, the page will seem to have hit a dead end on slow connections.
  • Keep back button functionality: Although many implementations forget this major detail, make sure to keep basic browser functionality. If a user browses away from your website and then travels back, they typically don’t expect to reload back at the top of the page.
  • Keep navigation visible: While users will primarily want to consume your content, they’ll also want to browse to other areas of your website as well. If they’re forced to manually scroll back up through hundreds of posts… They may opt to leave instead.
  • Lazyload content ahead of the user: The whole point of implementing infinite scrolling is to have it seem like an endless stream of content. While it’s important to have some form of a loading indicator, users will hopefully rarely, if ever, see it.
  • Links should open in a new window: This is a highly debated practice; it forcefully chooses for the user, but with the intention of helping them. Forcing links to open in a new window or tab prevents users from accidentally navigating away from the infinitely loading list and losing their place.
  • Footers may get in the way: Often times implementing an infinite scrolling solution means giving up the option for a website footer. While it’s definitely annoying to try and “catch” a footer when you’re automatically loading more posts, there are other options. For example, using a hybrid loading solution would allow you to keep a footer well within users’ reach.

   

  In conclusion

  While infinite scrolling can be a trendy feature that gives the user endless content options… It has to be used correctly.

  While we want to expose the users to more content, we don’t want to detract from the value of each individual piece or have them feeling overwhelmed with information. After all, users are there for the content itself—not the fancy scrolling feature.

  As you can see, Infinite scrolling itself isn’t inherently good or bad. But rather, its use could result in better or worse user engagement depending upon the content type being presented. With that in mind, we can attempt to predict where implementing it will be beneficial.

   

  Featured image/thumbnail, escalator image via Shutterstock.

  
  
  

  100+ High-Quality Premium Themes & Templates – only $27!

  
  

  Source
  
  
  
  
  
  
  

• The best free WordPress plugins for May 2014

  Posted:Mon, 21 Apr 2014 08:15:20 GMT

  It’s that time again! Open up your local WordPress install (the one that you use for testing plugins)—everyone has one of those, right? It’s not just me?—and get ready for another month’s worth of WordPress community goodness.

  This month we’ve got a variety of plugins, useful for everything from managing accounts to adding extra content. Let’s jump in…

  Secondary Title

  As with most of these plugins, the name tells you most of what you need to know. Secondary Title gives you the option of including some extra text around the title area. Why would you want to do that? A great example is the current Digg site where sub-headings are used to add snarky observations.

  You can configure the sub-heading text to be shown before or after the title; or call it separately in your site’s theme.

   

  Style Buddy

  There are many different approaches to adding extra CSS or JavaScript to your site without touching the theme files themselves. If you find yourself wanting to use a lot of different custom code on specific posts or pages, this plugin is what you want.

  An extra input box for CSS, and one for JavaScript, is appended the edit screen for pages and posts, and that’s it. You’re good to go. I’d like to see some syntax highlighting and proper handling of indentation, though. That’d be cool.

  

   

  Post Feedback

  Post Feedback is a dead simple plugin for getting an idea of what your readers think. It places a drop-down list of 2-5 configurable options for users to choose from at the end of each blog post.

  The form appears only once for each viewer. The responses are shown in mini-graph form beside each post on the edit page, giving you an instant overview of public opinion on your posts.

  

   

  Better Email Validation

  If you have a large community, and you want to make sure they’re all more or less human, this one’s for you. Better Email Validation is best described in the words of its own author:

  [It] Provides better email validations to protect your blog from spam comments and bots creating accounts. It does deep validation to make sure the email account exists on the server. It requires fsockopen to be available and ability to connect to port 25.

   

  Project Manager by TPC

  Have you ever wanted a full project manager right in your WordPress install? Well, now you can have it. Project Manager allows you can create projects, task lists, assign tasks to specific users, the works.

  I just hope that the plugin’s creator decides to include some sort of timeline/time tracking feature later. I’d love to see that.

   

  Admin Bar Button

  Want access to the admin bar while you browse your WordPress blog, but don’t want it in the way? I usually take it out completely, but for those who’d rather have it there just in case, this plugin is a great option.

  Your admin bar gets turned into a button. Hover over it (sorry, Finger-tappers), and the rest of the bar will show up. Leave the bar alone for five seconds, and it goes away again.

   

  Article Directory Redux

  This plugin isn’t so much a new plugin as it is an updated version of the original, which seems as though it has been abandoned by its creator.

  Simply put, you install the plugin, call a function in your theme, and you have a category-based directory of all your posts. But more than that, you can make it a community affair with front-end post submission. So if you want to make a user-generated directory of… well, anything… this plugin does the job.

  

   

  Audio/Video Bonus Pack

  If you work with a lot of audio/video files, and you have ffmpeg on your server, this plugin will save you a bit of hassle. It’s feature-sparse at the moment, but that will change, and in the mean time, what it does is awesome: it converts all audio/video uploads to HTML5-friendly formats. Besides that, it can also generate HTML5 fallback code for your embeds.

  If one of our more daring readers would like to give this plugin a more thorough testing than I was able to manage, please let us know in the comments, I want to see just how much can be done with it.

   

  Disable User

  If you’re running a community site, you may want to place a temporary ban on someone until a given situation is resolved. Disable User is a very simple way of implementing this unpleasant but sometimes necessary task.

  Just pick a user, select “Disable”, and save. The affected user won’t be able to log in, and will be presented with a popup telling them as much.

  

   

  Muut

  Muut is a fantastic service that provides free (with paid upgrade options) forum and commenting solutions. Check out a few Muut-based forums, they are awesome!

  The Muut plugin allows you to embed your forum on your WordPress site. If you want a discussion board on your site, but don’t want to turn the whole site into a discussion board, this is a winner.

  

   

  TDP – Frontend User Manager

  This plugin can facilitate user registration and logins by allowing you to place login, sign-up, and password recovery forms on any post or page with a couple of shortcodes. That’s it!

  

  
  
  

  100+ High-Quality Premium Themes & Templates – only $27!

  
  

  Source
  
  
  
  
  
  
  

• Our favorite tweets of the week: April 14, 2014 – April 20, 2014

  Posted:Sun, 20 Apr 2014 09:58:03 GMT

  Every week we tweet a lot of interesting stuff highlighting great content that we find on the web that can be of interest to web designers.

  The best way to keep track of our tweets is simply to follow us on Twitter, however, in case you missed some here’s a quick and useful compilation of the best tweets that we sent out this past week.

  Note that this is only a very small selection of the links that we tweeted about, so don’t miss out.

  To keep up to date with all the cool links, simply follow us @DesignerDepot

  Go on an egg hunt with Saatchi & Saatchi http://depot.ly/vS3PX

  

   

  Interesting Wikipedia concept http://depot.ly/vS3IR  via @dribbble

  

   

  12 Little-Known CSS Facts http://depot.ly/vS391  *Good read via @sitepointdotcom

  

   

  #Typography is a practice: http://ow.ly/vS35i  via @BrushLovers

  

   

  Google Offers Sneak Peek At Latest Google Glass Software Update http://depot.ly/vQaJs  via @marketingland

  

   

  The beauty of Nick Meek’s photography http://depot.ly/vQaby  via @fubiz

  

   

  Nice tip: How to Add Audio to PowerPoint Presentations http://depot.ly/vQ9pW

  

   

  Google’s modular mobile could be with use within a year http://depot.ly/vQanS

  

   

  Want to build a website but don’t know where to start? Here are 59 tutorials to help you out http://depot.ly/vMIVs  via @CreativeBloq

  

   

  Good read: 12 ways to get the most from Behance http://depot.ly/vMIjN  via @tutsplus

  

   

  Google’s Dead-Simple Tool For Making UX Decisions: 2 Jars Of Marbles http://depot.ly/vJU7d

  

   

  A Beginner’s Guide to UX & UI Design http://depot.ly/vEunr  via @justcreative

  

   

  Get it Done: 35 Habits of the Most Productive People [Infographic] http://depot.ly/vEBzJ  via @EntMagazine

  

   

  Do’s and Don’ts of Using Light Typefaces http://depot.ly/vExnh

  

  Want more? No problem! Keep track of all our tweets by following us @DesignerDepot

  
  
  

  100+ High-Quality Premium Themes & Templates – only $27!

  
  

  Source
  
  
  
  
  
  
  

• Comics of the week #231

  Posted:Sat, 19 Apr 2014 09:26:40 GMT

  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…

  Tight squeeze

  

   

  Productive while working at home

  

   

  Send backup

  

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

  
  
  

  100+ High-Quality Premium Themes & Templates – only $27!

  
  

  Source
  
  
  
  
  
  
  

• Deal of the week: 50% off the amazing Typo-painter

  Posted:Fri, 18 Apr 2014 12:15:37 GMT

  Typographic art is all the rage, with everyone from politicians to pop-stars finding their speeches, lyrics and quotes transformed into portraits of themselves.

  The trouble is, the old saying that a picture is worth a thousand words tends to be true; it takes a lot of time to rearrange words and letters convincingly so that they form a realistic image. So we’re delighted that our sister-site, MightyDeals.com, has found a way to speed up the process by arranging a fantastic deal on Typo-Painter.

  Typo-painter is an amazing Photoshop plugin that will do all this hard work for you, leaving you to simply select your text and image.

  Typo-painter works with any image, and outputs in eps format, allowing you to easily move from Photoshop into a vector program. It also accepts any text at all, so you can say exactly what you wanted to say.

  Imagine Dr. Martin Luther King Jr’s “I have a dream” speech arranged into a portrait of his face, or the lyrics to “Born to Run” arranged into the face of Bruce Springsteen, the possibilities are endless!

  

  

  

  

  This incredible plugin normally retails for $10, but for a limited time you can get it at 50% off, just $5! Head over to MightyDeals right now to grab this offer while it lasts.

  
  
  

  100+ High-Quality Premium Themes & Templates – only $27!

  
  

  Source
  
  
  
  
  
  
  

• Perfect your website with 3 simple UX research methods

  Posted:Fri, 18 Apr 2014 08:15:56 GMT

  User testing doesn’t have to be difficult at all. I’m going to talk about three lean research methods that are neither extensive nor expensive to carry out but will in turn provide you with valuable feedback.

  The methods can be used for anything, test a landing page or test a whole mobile app. The important thing is to gather feedback: design for yourself, and only your point of view counts; design for others, and you need to hear their thoughts.

  Which method, or methods, you choose will have significant consequences for your design, and different methods are more suitable for different objectives.

  Experience sampling

  This technique is used to ask participants a single question throughout their day to note their experiences. Keep it very simple like “What events do you input into your calendar app?” The idea is to get a number of people answering at different times of the day to yield various responses. You then collect the answers into a spreadsheet and analyze.

  Results

  The results provide insight about what the user needs, identify pain points and delight, currently in your product. It can bring inspiration about new features—things currently missing in your current version.

  Preparations

  You’ll need to figure out a bunch of things in order to run the test. First, what question are you trying to find the answer to? How many times in the day will you ask it? How you’ll you be asking—email, text message, phone call, online survey? You need to decide how to collect this data. You’ll also need to figure out who will be in charge of collecting this data and analyzing it.

  You will also need to figure out who the participants are, how many of them will be in your study? Make sure that they can receive your question—not everyone has access to iMessage, so you can’t send it over from your computer. When it comes to the participants, you’ll need to make sure they are prepped themselves. Go over the test expectations, ie. the question will be asked 4 times through out the day. It’s also a good idea to run a practice test to make sure the participants can follow along throughout the test. This will wrinkle out any concerns or questions about it.

  Running the test

  It’s great to let the participants know they are doing well. You should be monitoring the answers as they come in and let the participants know if they have not answered the question correctly, they may have misread or misunderstood it. And of course, on conclusion thank them for their time.

   

  Card sorting

  This research method is meant to uncover the best way to structure information within your design. In the test, participants will group items into a sequence that is logical to them. If you are not sure about the navigation of your site, or the categories for your app, this test is perfect for you.

  Results

  What you can expect from this test is to figure out the way your target audience perceives your content. You’ll have a new way to think about terminology, the relationships between the items, and any missing features; all thanks to a dendrogram structure resulting from the test.

  Preparations

  This test can run in so many different ways! You’ll need to decide what content you want the participants to test, it can be current content or future content you’d like to create. You should not have more then 100 items to sort through; it can be quiet complex to sort things so the golden rule is less than 100.

  There are various ways in which the participants can partake in a card sorting test; you can organize it in person with index cards or create the test online and send out a link. If you do this online, analyzing results can be much easier. Some well know online tools include SimpleCardSort, Optimal Workshop, and UX Punk.

  There is more to consider: do you want the participants to preform the test individually or as a group of 3-4 people? Is the card sort going to be open or close sort? (Open sort means that you allow the participants to create and name the groups themselves, as many as they see if. A close sort means that you provide the categories and they’ll have to fit the items into them.)

  Running the test

  This only works if you are conducting the test in person, but you need to take notes. Write down when the users are confused about an item; if they are unsure help clarify, but don’t lead them with your own suggestions just explain what the item is—make a note that they were confused. If they seem to have trouble placing an item into a group where you see it jumping from one category to another, make a note of it.

   

  Usability testing

  This is a research method that gives you insight about how users use your product by observing their behavior. This testing is usually done one-on-one where you observe the users’ actions and listen to them comment as they go through the test.

  Results

  Usability testing points out the flaws and delights in your products. You’ll be able to take away things that currently work well, areas to improve upon, data about satisfaction, currently missing features and user input. It’s much more convincing to bring a quote from a user about a frustration point to your boss than just to say that the frustration point exists. Users are such a powerful motivator!

  Preparations

  A usability test is a walk-through your site. It usually tests a small portion, like the sign up process or maybe using the core feature of your site for the first time; if you were designing Facebook, it could be the process of signing up and adding a few friends in a couple of different ways.

  You’ll need to figure out a bunch more for this test then the previous two. First, what are you testing? What are the steps you want the participants to take? For example, ‘You want to add a friend by email.’ You should also have a bunch of warm up questions just to get the participant familiar.

  Additionally, you will be to figure out who will be taking the participant through the test and who will be taking notes. It’s impossible for one person to do both, as notes will be missed. It’s also recommended to record the session on top of that. Allow enough time for one participant to go through the test without rushing them before the next appointment is up; ideal test time is 30 min, so allow for a 45 min session.

  Running the test

  You should also provide a quick brief to the participant telling them why are they here and what they will be doing, you need to make them as comfortable as you can because being observed is not easy for most people. While the participants are going through the scenarios, insist they think out loud, that’s the only way you’ll be able to get access to their reaction, impression and thoughts; observing is not actually enough. Lastly, don’t help them out! Do not lead them; allow them to figure it out. It’s okay if they fail, or keep on failing. The point of the test is for you to find out where the participants trip up and not to get them from point A to B by holding their hand.

  
  
  

  100+ High-Quality Premium Themes & Templates – only $27!

  
  

  Source
  
  
  
  
  
  
  

• 5 fundamentals every web designer needs to understand

  Posted:Thu, 17 Apr 2014 08:15:20 GMT

  We all know intuitively what makes a website look bad: overused bevel effects, corny clip art, overcrowded layouts. These annoyances are easily corrected by developing with design fundamentals in mind—the same principles used by professional designers and artists alike.

  Great websites bring together form and function. In fact, well-designed websites are seen as more credible, according to a Stanford study and are actually easier to use (as studied by researcher Don Norman). So here are five fundamentals to help you keep quality design at the forefront of your practice.

  1) Follow the rules…mostly

  In design school, they’ll give you a list of principles to abide by that assign rules to beauty—elements like layout, order and symmetry. But as you advance, you’re then told to break the rules a bit to create places for a viewer’s eyes to look by employing elements like variety, tension or contrast.

  Here’s an example of a page I did in Edge Reflow CC. Can you spot the different design elements being employed, then played with?

   

  2) Use imagery and icons to communicate when possible

  There are some universal icons that people are trained to respond to. The magnifying glass (search), the house (home page) and floppy disk (save) are ingrained into your users already. Take advantage of those visual shortcuts; all those road signs should be immediately recognizable to you.

   

  3) Color as a design element, not as decoration

  Color makes all the difference, especially as our screens get better on our phones and tablets. It’s a facet of design that can be a really key part of the story your website wants to tell. Just use color to support content, not decorate a page. And often if you’re using a photo, the colors in the design should be sampled from the photos used so your design has a nice unified feel.

  I quite like pulling color examples with color swatches – and the Adobe Kuler Web app is a great way to play with different themes and then import them into your design tools. One of the best rules to go with is to use complimentary colors. Which is basically using warm colors and cool colors together to provide balance.

   

  4) Choose fonts that support content

  There are literally thousands of fonts to choose from.

  It’s up to you to mix and match – but remember that it’s best practice to use only up to three fonts at a time—a nice headline font, one for the main body of text, then one for any sort of call-out you might need. Often, that means using a sans-serif for the body copy, and for headlines you can get more interesting with either serif or sans-serif.

   

  5) Help from others

  All right, you’ve got your basic design elements, with pretty icons and pictures, with a sound color scheme and fun fonts. What’s next?

  Getting help from others, of course! And not just random people on the street, but constructive critique from people who really know their stuff, like other designers/developers. This can be instrumental to go from an OK website to one that really pops. If you’ve never used Behance to post a work-in-progess, I recommend giving it a try. The active community will do more than just tell you “to make the logo bigger” – but give you advice that can make the difference between a good website and a great one.

   

  To dive deeper into how to apply design elements to web development, check out my presentation from SXSW:

  
  
  

  100+ High-Quality Premium Themes & Templates – only $27!

  
  

  Source
  
  
  
  
  
  
  

• How to create mobile style slide-in navigation

  Posted:Wed, 16 Apr 2014 17:15:47 GMT

  In this tutorial we’ll look at the techniques needed to make a navigation menu that is hidden off screen until the user clicks on a menu icon, at which point the content slides over and darkens, and the menu slides in. The menu will also be responsive vertically, filling the height of the browser window on whatever size screen it’s being looked at in.

  To achieve this we will be using a couple different methods, one of which being flexbox, which is turning into a real ‘buzzword’ at the moment for being the holy grail of web layout methods. We will be using it to make the menu fit the height of the window. We’ll also be using jQuery for the actual functionality of the menu, making it slide out on a click event, and also providing a fallback for if the user doesn’t have JavaScript enabled in their browser (which we’ll detect with Modernizr).

  Here’s what it’ll look like when finished. And if you’d like to follow along with the full code you can download it here.

   

  Getting started with the markup

  Let’s first of all look at out index.html file that will be used in our demo, I’ll show you everything that’s in there and then we can run through piece by piece and look at the important parts:

  <!doctype html> <html class="no-js"> <head> <meta charset="utf-8"> <title>Full-height Off Screen Menu</title> <link href='http://fonts.googleapis.com/css?family=Montserrat:400,700|Open+Sans:400italic,400,700' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/styles.css"> <meta name="viewport" content="width=device-width, initial-scale=1"> <script src="js/modernizr.js"></script> <!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> </head> <body> <header class="cf"> <h1>Full Height Off Screen Menu</h1> <a href="#" id="navicon" class="closed">&#9776;</a> <ul id="fallback-nav"> <li><a href="#" class="current">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Work</a></li> <li><a href="#">Blog</a></li> <li><a href="#">Contact</a></li> </ul> </header> <nav id="main-nav"> <a href="#" class="current"><div>Home</div></a> <a href="#"><div>About</div></a> <a href="#"><div>Work</div></a> <a href="#"><div>Blog</div></a> <a href="#"><div>Contact</div></a> </nav> <div id="main-content"> <article> <h2><a href="#">Article Title</a></h2> <span class="date">Published 25th February 2014</span> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. <a href="#">Read more &rarr;</a></p> </article> <article> <h2><a href="#">Etc.</a></h2> <span class="date">Published 25th February 2014</span> <p>... <a href="#">Read more &rarr;</a></p> </article> <p><a href="#" class="older">&lt; Older Posts</a></p> </div> <div id="fade"></div> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script type="text/javascript" src="js/scripts.js"></script> </body> </html>

  Let’s dig in! The only thing to note in the <head> tag is that we’re calling in some Google Fonts. We’re also linking to our css file as well as a modernizr.js file which you can download from here which we’ll use to detect if the user’s browser has JavaScript enabled or not, so that we can provide a fallback (that’s why the html tag has a class of ‘no-js’ to begin with, to make a default page that will appear if there’s no JavaScript, if it is enabled, Modernizr will swap that class name for us).

  Next the only other real things of interest our the fallback navigation which is the <ul> with an id of ‘fallback-nav’ in the <header> as well as the link with an id of “navicon” that will be the main link used to create our effect. And then the <nav> with an id of “main-nav” which will be (as you can guess) our main navigation used in the effect. The only other element used in the effect is that last <div> with an ID of “fade” which will be our black cover that darkens the content when the menu icon is clicked.

  Finally we call in jQuery from Google and our own script file which is where we’ll be working in a bit. But first let’s go through the styles.

   

  Styling with CSS

  So we won’t be going through all of the CSS styles (if you want you can inspect or ‘view source’ on the demo) as they are in the most part used for the general styling of the page, which is not the goal of this article. We’ll be breaking it up and looking at a few chunks of code which are important to the effect. So, first of all:

  html.no-js #fallback-nav { display: block; } html.no-js .fade { display: none; } html.no-js #navicon { display: none; } html.js #fallback-nav { display: none; }

  We’ll kick things of by making sure that if the user’s browser does not have JavaScript available (that’s that class name on the HTML element that we saw earlier using Modernizr) then we’ll show the #fallback-nav in the header, and we’ll hide the #fade DIV as well as the navigation icon. This is our fallback solution so the fallback menu needs to be styled in a more traditional manner. We’re also hiding this solution if JavaScript is available, as you can see in the last line.

  #navicon { float: right; font-size: 2em; text-decoration: none; position: relative; z-index: 9; } #navicon.open { color: white; } #navicon.open:hover { color: #e6e6e6; } #fade { position: fixed; top: 0; right: 0; bottom: 0; left: 0; background: #000; opacity: 0.5; }

  So in this section we’re styling our menu icon in the header, it’s pretty simple, just giving it a relative position and a high z-index (which will be useful later when the rest of the content gets faded out it will stay on top). We’re also changing the color to white when it’s got a class of “open” which we’ll be adding and taking away using jQuery. We can also see that the single div with an id of “fade” stretches to fill the entire screen and filled with a solid black with a 50% transparency. If the user has no JavaScript then this black filter will be hidden, if not we’ll hide it with jQuery. Now let’s look at the menu itself:

  #main-nav { position: fixed; height: 100%; top: 0; right: -250px; background: #222; max-width: 250px; width: 100%; z-index: 5; text-align: center; display: flex; flex-direction: column; } #main-nav a { flex: 1; color: white; border-top: 1px solid #555; text-decoration: none; display: flex; flex-direction: column; justify-content: center; } #main-nav a:hover, #main-nav a.current { background: #3c3c3c; }

  So last but not least the main menu. I must add first of all that this is the simplified code that would need quite a few vendor prefixes before being cross-browser compatible. To achieve this I recommend using an awesome tool like Autoprefixer to add all the correct prefixes for you.

  So that being said, let’s look at what it entails: first of all it’s got fixed positioning at the top of that page and negative 250px to the right. This means that it’s there but just “off-screen” (as it has a max-width of 250px). The height is also 100%, so that it fills the whole window from top to bottom. The menu also needs a z-index between 0 and 9 (above the black filter). Then, here is when the magic happens, it has a display: flex; property, as well another linked property of ‘flex-direction’ (which we’ve set to “column” here instead of it’s default “row” which means the flex item children—the links in the menu—will fill the entire height of its parent in equal parts).

  So that’s all been targeting the menu holder #main-nav, next when styling the links we give them a flex value of 1. This is what makes the links fill the whole height equally. Then these links are also given a display value of ‘flex’ themselves, which means that any elements inside of the links will be affected by this. We make sure the flex-direction is still ‘column’ and then we add a property of “justify-content: center;”. This makes the text itself inside of the links centred vertically as well (this is why there are divs inside of the <a> tags of the #main-nav, which is not exactly semantic but is a very quick and easy way to vertically center items.)

  Now we can’t see anything we’ve just done quite yet, we now need to add our functionality with our own scripts.js file that we called earlier.

   

  Adding the functionality with jQuery

  The script for this effect is very small and simple, but I’ll put it all here first and then explain what’s happening:

  $(document).ready(function() { $('#fade').hide(); $('#navicon').click(function() { if($('#navicon').hasClass('closed')) { $('body').animate({left: "-250px"}, 400).css({"overflow":"hidden"}); $('#main-nav').animate({right: "0"}, 400); $(this).removeClass('closed').addClass('open').html('x'); $('#fade').fadeIn(); } else if($('#navicon').hasClass('open')) { $('body').animate({left: "0"}, 400).css({"overflow":"scroll"}); $('#main-nav').animate({right: "-250px"}, 400); $(this).removeClass('open').addClass('closed').html('☰'); $('#fade').fadeOut(); } }); });

  So first of all we hide the black filter. Then next all we do will be contained inside a function attached to a click event that is bound to the menu icon link. When that is clicked we have two different cases or situations; one is when the menu is already hidden (like the default state) or one when the menu is showing. So the menu icon link has a class name of closed that we added, and we also styled for open. Our first “if” statement is that if the link is closed (therefore default). If that’s the case, then the whole <body> element is animated 250px to the left, and stops the scrolling of the page. The #main-nav div is also being animated into place, we’re changing it’s right value from -250px to 0. Then we’re removing the class of ‘closed’ from the link and adding one of ‘open’ as well as changing the html from the special character of three lines to an “x”. Finally we’re fading in our black filter to make the rest of the content dark. And that’s it! That gives us the open state of the menu.

  Now the “else if” statement is targeting the open class on the menu link. When it does we do the reverse of everything we did before, moving the body back into position, as well as moving the menu off-screen again. Removing the class of ‘open’ from the menu icon, adding ‘closed’ and changing the content back to the icon as well as fading out our #fade div. If everything goes according to plan this is what the functionality should look like:

  

   

  Conclusion

  So there we have it! That’s one way to make this cool effect which we’re seeing more and more now with the style of modern webdesign, especially on mobile designs. This effect is a nice and simple solution that doesn’t require any plugins and can be fully customised to the needs of each project. Also it’s been a chance to make use of flexbox as well as a few other useful tools. Let me know in the comments if there’s anything you would’ve done differently or just what you thought!

   

  Featured image/thumbnail, sliding door image via Shutterstock.

  
  
  

  100+ High-Quality Premium Themes & Templates – only $27!

  
  

  Source
  
  
  
  
  
  
  

• Japanese duo create interactive prints

  Posted:Wed, 16 Apr 2014 08:15:16 GMT

  Bookstores are closing, newspapers are folding and magazines are rushing to publish online. The stock of print media seems to be falling, but two Japanese designers are challenging that process with a newly released collection.

  Masahiko Sato and Tatsuya Saito’s exhibit, “Putting Finger,” examines how viewers needn’t be passive bystanders where print is concerned; instead, their illustrations allow the onlooker to have a hand, quite literally, in the finished product.

  The idea is simple, the illustrations don’t appear to be complete without the viewer’s interaction. Once you place your fingers on the appropriate ‘hit areas’ the illustrations take on new tensions and dynamics. The interaction is completed by the touch of the viewer; quite a unique approach to print.

  The series is on display at the DDD Gallery in Japan until April 26, 2014.

  

  

  

  

  
  
  

  100+ High-Quality Premium Themes & Templates – only $27!

  
  

  Source
  
  
  
  
  
  
  

• Sketch 3 has launched, is it time to switch?

  Posted:Wed, 16 Apr 2014 00:15:56 GMT

  The latest, highly anticipated version of Sketch by Bohemian Coding, has just been released. It’s an application that has promised much in the past, with many designers embracing it wholeheartedly. However, the previous two versions felt too immature for professional-grade work; the question is, has version 3 addressed those concerns, and is Sketch ready to be used as the go-to design app for creative studios?

  The first thing to note is that unlike some pretenders to Adobe’s crown, Bohemian Coding are a professional operation who’ve been working on the various iterations of Sketch for six years, which in Web years makes them old-hands. Sketch is a stable product with relatively few bugs and, as far as I can tell in the time since version 3′s release, the latest version is equally well made.

  Where Sketch really excells is creating UI graphics. It’s the market that Bohemian are aiming for. With Fireworks shuffling off in the direction of the trashcan and Photoshop being repurposed as a bloated 3D generator then there’s certainly a niche to fill.

  Drawing comparisons

  Sketch officianados almost invariably compare Sketch to Photoshop but it’s a comparison that doesn’t really hold water: the two applications are built for completely different purposes, a more appropriate comparison can be made between Sketch and Fireworks. And seemingly it’s from the Fireworks community that most Sketch fans originate.

  It would be naïve to pretend that direct comparisons between Photoshop and Sketch won’t continue to be made, but that is largely due to the ongoing (mis)use of Photoshop as a web graphic creation tool.

  Compare Sketch with Fireworks and you’ll quickly draw some interesting conclusions: firstly, Sketch’s GUI is far simpler than Fireworks’ and the improvements made to Sketch 3 only serve to widen that gap; secondly, Sketch is a contemporary web tool, it’s not running off assumptions made by Macromedia back in the 1990s; thirdly, Sketch offers a similar mindset to Fireworks, but with an ongoing commitment to development, whereas Fireworks—rightly or wrongly—is barely clinging to its slot in the Creative Cloud lineup.

   

  Exporting from Sketch

  One of the more popular features in Sketch is the @2x export option. This allows you to export a larger version of your image for retina displays. However, if you’re working in vectors, then you can export at any size from Photoshop, and if you’re working in bitmaps, then Sketch is no better off. However, I do like the simplicity of Sketch’s export options, even if I maintain that all vector art should be rendered as SVG (which by the way, Sketch can do).

  In order to make a direct comparison I drew a vector circle with a gradient fill in Sketch, Photoshop and Fireworks, exporting it twice from each application at 244 x 244px and 488 x 488px. The results were unexpected: Sketch’s two files came in at 53kb and 197kb; Photoshop’s were 44kb and 165kb; Fireworks’ were 8kb and 22kb. That, in the modern parlance, is known as a beating. Of course, the test was heavily skewed towards vector programs, and I wasn’t surprised that Fireworks did so well, I was a little surprised at Photoshop’s triumph however. Had I been saving a complex bitmap I’d expect Photoshop to have done even better.

  What’s more, whilst Sketch’s primary export option is slicing, Photoshop’s is now the generate feature, a process by which layers are exported live when altered. Given the iterative approach of most design processes, that’s something that Sketch is sadly lacking—perhaps in version 4.

  Sketch’s saving grace in this respect is that it allows direct access to CSS properties associated with elements, meaning you may not need images for your layouts at all.

   

  Embracing CSS logic

  The biggest success in Sketch is that Bohemian have embraced the logic of CSS. When Photoshop was first released CSS simply didn’t exist, even so, it’s hard to envisage how Adobe managed to settle upon such arbitrary settings—when people are releasing whole sites to help designers convert a Photoshop drop shadow to a CSS drop shadow, then someone at Adobe HQ should be able to spot the hole in their product. Fireworks performs a little better, but Sketch’s lack of baggage means that Bohemian have been able to build an app more in tune with how contemporary designers work.

  Certainly type aficionados will appreciate not having to pick one of Photoshop’s irrelevant anti-aliasing options.

  There is something to be said not just for the efficiency, but for the experience of using an application, and whilst it’s hard to be objective after so many years of Photoshop use, Sketch’s CSS approach certainly feels neater. The consistency with a front-end coding mindset is one of the great successes of Sketch. It just works.

   

  What’s wrong?

  There are unfortunately some questionable choices in Sketch 3. Why, for example, has such emphasis been placed on creating reflections of elements? Reflections are an intensely dated design crutch and aren’t worth a second thought (unless you’re part of the in-house team at Apple, in which case they’re part of your brand guidelines). I’m not so much questioning the inclusion of reflections, rather the decision to make such a feature of them when they could have been tucked away somewhere inoffensive.

  Another let-down is Sketch Mirror, an additional purchase from the app store that allows you to preview your design live in your device—provided your device is an iPad or iPhone. Fans of Android will need to stick to Adobe’s Edge Inspect, which does the same job across multiple devices.

  Those issues pale into insignificance when set alongside the fact that industry adoption of Sketch isn’t yet widespread. For individual designers, particularly iOS designers, Sketch may be a personal preference you’re entitled to act upon; but for designers working within a team, or delivering content to clients for development elsewhere, Sketch’s integration with existing workflow is limited. For the time-being, PSDs are still the industry standard, and when PSDs are eventually rejected it will be for in-browser design, to the detriment of all design apps, Sketch included.

   

  Is it time to switch?

  Sketch isn’t a must-have tool. It doesn’t compete with Photoshop for bitmap editing, and I’m surprised at how badly it handled exporting a vector; compared to Fireworks, its performance is a little embarrassing. It doesn’t have drawing controls as sophisticated as Illustrator, and it won’t play nicely with the workflow of anyone but a one-man design and code shop. However, Sketch is substantially cheaper than any of Adobe’s offerings. There’s a 14 day trial which I’d encourage you to take, especially if you’re one of the many who are still bemoaning  the demise of Fireworks.

  All criticism aside, Sketch is a really fun tool to use. It’s really fast to create in, and the CSS logic means converting designs to pure CSS is blissfully easy.

  Most designers won’t be switching to Sketch as a primary tool just yet, but as a secondary prototyping tool it excells, and the idea of Sketch replacing Fireworks (or Photoshop) isn’t as strange as it seemed a year ago; if Sketch 4 makes the same kind of in-roads that Sketch 3 has made then Adobe will be taking a long nervous look over their shoulder.

  
  
  

  100+ High-Quality Premium Themes & Templates – only $27!

  
  

  Source
  
  
  
  
  
  
  

• Create a website using Startup Design Framework

  Posted:Tue, 15 Apr 2014 08:15:10 GMT

  Designmodo have just released their latest product, Startup Framework, designed to build sites for new startups and 9 months in the making, it’s built on a modular component basis, enabling you to rapidly combine its parts into hundreds of different combinations.

  Based on Twitter Bootstrap, the Startup Framework’s components use a single consistent style, and include Designmodo’s hugely popular Flat UI. What’s more, existing Flat UI Pro customers, can extend the framework by copying and pasting Flat UI Pro into the Flat UI Free folder. The framework’s code has been carefully constructed based on best-practices and is mobile-friendly right out of the box.

  As the name suggests, the Startup Framework will principally be of interest to startups that need a site fast and can’t afford the cost or time of a professional designer. To aid with this, Designmodo have also released Generator, their drag and drop website builder for Startup Framework. Generator allows you to create projects by dragging different components from its extensive list and dropping them into your work area. When you’re happy with your design you can export the design to HTML, CSS and Less. It’s a great solution for in-house design.

  When asked what inspired Startup Design Framework, Designmodo replied: 

  Startup Framework was a logical continuation of all our previous products. We were inspired by the desire to make something new, very beautiful and useful. That’s why we developed the concept of website creation in blocks, and not in website elements. We believe it is more efficient, without altering the overall design of the page and final website.

  Designmodo are also keen to increase the number of components in the framework:

  We are already preparing new blocks and new samples to be implemented in Startup Framework. We will continue developing new designs and improve old ones so Startup Framework will stay up-to-date and on-trend.

  And the future sounds bright, with Designmodo planning future revisions:

  I won’t disclose all our plans, but we are going to make something unprecedented in terms of the framework’s functioning. Designers and developers will like that innovation, and it will make project customization even easier.

  Plenty of designers are already using Startup Framework with Generator to produce some fantastic websites. Just take a look at what’s possible:

  

  

  

  

  Included in Startup Framework are 25 design samples, which are actually Bootstrap templates. You’re free to use these ‘as is’ or, more usefully, as the basis for fast-tracking your own design. A demo version has also been produced that uses eleven components and two samples, Designmodo have even included a couple of Apple product shots, a Macbook image and an iPad image; ideal for showing off your application to prospective customers—it’s a great way to learn the framework quickly.

  Designmodo have created a coupon code for WebdesignerDepot readers, just enter wddepot20 at the checkout for a 20% discount.

   

  [-- This is a sponsored post for Designmodo --] 

  
  
  

  Designed To Sell: The Unconventional Guide to Creative Freedom – 50% off!

  
  

  Source
  
  
  
  
  
  
  

• What’s new for designers, April 2014

  Posted:Mon, 14 Apr 2014 08:15:32 GMT

  The April edition of what’s new for web designers and developers includes new web apps, Photoshop extensions, game frameworks, educational resources, mobile frameworks, jQuery plugins, and some really great new fonts.

  Many of the resources below are free or very low cost, and are sure to be useful to a lot of designers and developers out there.

  As always, if we’ve missed something you think should have been included, please let us know in the comments. And if you have an app or other resource you’d like to see included next month, tweet it to @cameron_chapman for consideration.

  Untrusted

  Want to practice your JavaScript skills? Untrusted is an addictive video game that is played by tweaking and rewriting JavaScript code.

  

   

  TypeGame

  TypeGame lets you easily build mobile-friendly online games using a drag and drop builder. Combined with ActionScript 3.0, it lets you create powerful games in just minutes.

  

   

  Typeform

  Typeform is an easy way to set up forms that ask questions one at a time, much like a human conversation. It has a beautiful interface and is easy to set up.

  

   

  Dropr

  Dropr is an easy to set up portfolio for creatives. It’s responsive, looks the same (awesome) on every device, and it’s free.

  

   

  GetTemplate

  GetTemplate offers up responsive HTML5 and CSS3 templates for rapid web development. There are single-page templates, business templates, and more, with new ones added all the time.

  

   

  Framework7

  Framework7 is a full-featured HTML framework for building hybrid and web-based iOS7 apps with native features. It’s also great for prototyping functioning apps.

  

   

  Nasty Icons

  Nasty Icons is a set of edgy icons that can add some real interest to your designs. There are icons for plane crashes, vehicle fires, a head being stabbed in the eye, a stripper, a hangman, and much more.

  

   

  Bootflat

  Bootflat is an open source flat UI kit based on Bootstrap 3.1.1. It uses HTML5 and CSS3, is lightweight, and mobile first.

  

   

  Fluidity

  Fluidity takes the little bit of HTML that isn’t responsive right out of the box and fixes it. It’s only 115 bytes, and does things like make images and tables responsive.

  

   

  UberVU Grid

  UberVU Grid is a drag and drop library for 2D, resizable, responsive lists. It currently works as a horizontal grid, so you can configure the number of rows, while the columns will extend dynamically based on the items in the grid.

  

   

  IxD Checklist

  IxD Checklist is a handy checklist for making sure that your interaction designs are working as they should. It includes sections on affordance, feedback, simplicity, structure, and more.

  

   

  Velositey

  Velositey is a Photoshop extension for prototyping your designs in seconds. It makes it easy to set up the basics of your design, including layout and styles, based on an 1170px grid.

  

   

  Really Good Emails

  Need some HTML email design inspiration? Really Good Emails is a gallery of the best email designs out there, which you can browse based on type (alert, product sale, product update, etc.).

  

   

  Badass Lady Creatives

  Badass Lady Creatives is a site dedicated to featuring creative women from a variety of disciplines. It includes work from each to further inspire you.

  

   

  Pixelcasts

  Pixelcasts is a monthly video showing how real designers create things. It includes source downloads along with the videos, and every lesson you purchase is saved in your account for future reference.

  

   

  Brick

  Brick provides webfonts that actually look good. It’s completely open source, and fonts are served through Fastly’s industry-leading CDN.

  

   

  Iconion

  Iconion is an icon generator that lets you convert any icon font into PNG icons. You can add color, shadows, backgrounds, gradients, and more.

  

   

  Mockuuups

  Mockuuups is a set of four free hi-res iPhone 5S mockups. They have a fully adjustable background and display images.

  

   

  MixItUp 2

  MixItUp 2 is a jQuery plugin for animated filtering and sorting. It’s great for things like portfolios, galleries, and blogs.

  

   

  Metalsmith

  Metalsmith is a pluggable static site generator. All of the logic is handled by plugins that you simply chain together.

  

   

  jQuery lightGallery

  jQuery lightGallery is a lightweight lightbox gallery that works with both still images and video. It works with modern browsers, offers support for fade and slide effects, and you can put multiple sliders on a single page.

  

   

  Triangly

  Triangly lets you build a portfolio for your work just by adding your files to Dropbox, with no limits on how many projects you can include, and with the ability to present your images separately or in sets, among other features. It’s currently invitation only, but you can request an invite.

  

   

  Jolly UI

  Jolly UI is a set of over 200 hand-drawn vector UI elements to add personality to your projects. There’s a premium version for $29, and a free version that includes dozens of elements for web pages and apps.

  

   

  JS Manners

  Want to evaluate a 3rd party script before you use it on your website? JS Manners is a tool for scoring those scripts, including questions about performance, stability, footprint, flexibility, security, and compliance.

  

   

  Slick

  Slick is a fully responsive carousel that scales with its container. It uses CSS3 when available but works fine without it, among other features.

  

   

  Comic Neue (free)

  Comic Neue is a greatly improved typeface inspired by Comic Sans. It comes in a variety of weights and faces that even typophiles will appreciate.

  

   

  Zona Pro ($10)

  Zona Pro is a geometric sans-serif type family that includes eight styles plus matching italics. It’s inspired by geometric typefaces from the 1920s, with clean, highly readable shapes.

  

   

  Marigny ($50+)

  Marigny is a casual typeface consisting of five weights, from thin to black. It also includes a full set of small caps, fancy swash caps, and more.

  

   

  Maritime Champion ($48)

  Maritime Champion is a seaworthy all-caps font thatcomes in six weights, along with a Shoreline style with an additional four weights.

  

   

  Laski Slab ($42+)

  Laski Slab is a suite of twenty fonts designed for editorial purposes, originally developed for an online children’s magazine.

  

   

  Science White ($10+)

  Science White is a companion font to Science Noire, without the spider web. It comes in 3 weights, plus italics.

  

   

  Lame Font (free)

  Lame Font is a display typeface with a decidedly art deco slant.

  

   

  Strato ($10)

  Strato is a layered, slightly humanist sans serif typeface inspired by the city of Rome. It’s proportionally based on classical Roman inscriptions, but with a modern twist.

  

   

  Wonderhand ($275)

  Wonderhand is an extensive family of scripts, in seven widths and three weights. It has a total of 63 fonts, with two sets of alternate characters and automatic features to better imitate handwriting.

  

   

  Ciao Bella ($10.50)

  Ciao Bella is a sophisticated, hand-drawn copperplate script that includes four ornament fonts. It uses OpenType features to create a more genuine hand-lettered look.

  

  
  
  

  1,075 Pixel-Perfect Vector Icons from Icons Solid – only $19!

  
  

  Source
  
  
  
  
  
  
  

• Our favorite tweets of the week: March 7, 2014 – April 13, 2014

  Posted:Sun, 13 Apr 2014 09:17:53 GMT

  Every week we tweet a lot of interesting stuff highlighting great content that we find on the web that can be of interest to web designers.

  The best way to keep track of our tweets is simply to follow us on Twitter, however, in case you missed some here’s a quick and useful compilation of the best tweets that we sent out this past week.

  Note that this is only a very small selection of the links that we tweeted about, so don’t miss out.

  To keep up to date with all the cool links, simply follow us @DesignerDepot

  Jerry LoFaro creates amazing illustrations http://depot.ly/vEvge http://ow.ly/i/5ctG2

  

   

  Graphic Designer Reinterprets The ABCs For Math Nerds http://depot.ly/vDQ6k  via @FastCoDesign

  

   

  Font Size Idea: px at the Root, rem for Components, em for Text Elements http://depot.ly/vEwQw  via @Real_CSS_Tricks

  

   

  Interview with Khajag Apelian: “Type Design Is Not Only About Drawing Letters” http://depot.ly/vEwJM

  

   

  How Tobias Frere-Jones discovered NYC’s lost neighborhood of #type – http://ow.ly/vDPX1  via @BrushLovers

  

   

  How emoji conquered the world: the story of the smiley face from the man who invented it http://depot.ly/vDOx8  via @verge

  

   

  “Night Walk in Marseille”, an interactive Google demo that lets you explore the sounds and the soul of the city http://depot.ly/vDOsi

  

   

  A guide to validating product ideas with quick and simple experiments http://depot.ly/vDNsR  #UX via @smashingmag

  

   

  How A Drexel Professor Created The World’s Biggest Game Of Tetris http://depot.ly/vBaJh

  

   

  10 Crucial Lessons From History’s Greatest Graphic Designers: http://depot.ly/vB9z6  via @FastCoDesign

  

   

  Advanced web typography: Justification & hyphenation http://depot.ly/vB93s  via @elliotjaystocks

  

   

  10 web apps every web designer should know of http://depot.ly/vyb1Q

  

   

  Interesting thought: Use a recorder to dictate your blog posts http://depot.ly/vvpSW  /@seanHodge

  

   

  Comic Neue – a font to write passive aggressive office memos http://comicneue.com

  

   

  A Game of Social Throne, by HootSuite http://depot.ly/vvoDU

   Want more? No problem! Keep track of all our tweets by following us @DesignerDepot

  
  
  

  Smarty Bundle: Crests Logo Templates and Badges – only $15!

  
  

  Source
  
  
  
  
  
  
  

• Comics of the week #230

  Posted:Sat, 12 Apr 2014 09:28:16 GMT

  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…

  Customer or suspect

  

   

  The walking print dead

  

   

  Compulsory financial planning

  

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

  
  
  

  Smarty Bundle: Crests Logo Templates and Badges – only $15!

  
  

  Source
  
  
  
  
  
  
  

• Deal of the week: Design websites faster with Pinegrow Web Designer

  Posted:Fri, 11 Apr 2014 17:15:58 GMT

  Working in Photoshop is no longer an option. The bloated behemoth just doesn’t provide a suitable interface for designing websites, especially not responsive websites. Designing in the browser is ideal, but it does require fluency in HTML and CSS to get anything done.

  Across the industry designers are crying out for a modern way of designing sites, and we think we’ve found one. What’s more, our sister-site MightyDeals.com has even managed to arrange a huge discount on it.

  Pinegrow Web Designer is a desktop app for Mac, Windows and Linux, that lets you design webpages fast. It builds pages using CSS & Less and supports frameworks including Twitter Bootstrap and Foundation.

  The simple drag-n-drop interface allows you to rapidly build your pages, and numerous contextual properties enable fine-tuning. Pinegrow works with standard HTML files. You can open up existing web projects and edit them right away, there’s no proprietary tie-in.

  What’s more, Pinegrow Web Designer allows you to build your own component library. Have an element that you use all the time, like a copyright notice, or a link to a particular site? Simply add it as a custom component and drag and drop it whenever you like. Pinegrow saves components as JavaScript files, so you can easily edit anything you create.

  Yet another time saving feature is the undo. How many times have you made a mistake in a CSS file and wished you had more than 1 level of undo? Well Pinegrow gives you 20!

  Most importantly, multi-page editing allows simple development of responsive sites. And this is the application’s main boon; nothing else will rapidly build responsive sites quite like this.

  The multi-page edit feature and page mirroring means you can style related pages at the same time, creating a sense of consistency so vital to professional design.

  

  Spend a week with Pinegrow Web Designer and you’ll never design a site in Photoshop again!

  This incredible application normally retails for $49.95—which is a bargain—but thanks to MightyDeals you can now get it for just $24, that’s a huge 52% discount. Head over to MightyDeals.com to grab this offer today.

  
  
  

  Glober Font Family with 18 Weights – only $19!

  
  

  Source
  
  
  
  
  
  
  

• Could switching fonts really save the US government $400 million?

  Posted:Fri, 11 Apr 2014 08:15:49 GMT

  Everyone loves saving money, especially the US government. But could it really be as simple as switching fonts? Last week the media was awash with the story of 14-year-old student Suvir Mirchandani, who claimed that if the United States Government switched from using Times New Roman to Garamond on printed documents, it could save as much as $400 million.

  The Pennsylvania student first began considering this idea while watching his school hand out multiple leaflets and trying to discern a way to save on the cost of ink when printing them. Then it was a natural leap to apply the same theory to not just his school, but the nation. Mirchandani posits that, due to the fact that Garamond is about 25% lighter and thinner than Times New Roman, it could save the US government $136 million in printing costs, and an additional $234 million could be saved if state governments also enacted this policy.

  “Ink is two times more expensive than French perfume by volume.” – Suvir Mirchandani, in an interview with CNN.

  But just how accurate is this estimate? Since Mirchandani’s theory has received international attention, it has been called into question by several typographers and design experts.

  According to one article by John Brownlee, the major flaw in Mirchandani’s research is that he measured Garamond at the wrong size—understandable, given that font measurement can be incredibly confusing.

  As Brownlee puts it in his article, “There is no guarantee that when you print out a font at 12-points that the letters will be 12-points tall. Only the line which the letters will be printed on will be 12-points tall.” If we were to switch to 12-point Garamond instead of Times New Roman, then, we would actually be sacrificing readability, as Garamond is the equivalent of a 10-point font rendered on a 12-point line. If the size were increased to improve readability, inevitably the cost of printing would increase to be comparable to the cost of printing Times New Roman.

  Other issues brought to light regarding Mirchandani’s study have been the lack of specificity regarding which version of Garamond he used (though logical assumption points to the Monotype version of Garamond typically bundled with Microsoft operating systems) and the antiquity of the study he referenced in his claim regarding the cost of printer ink.

  Mirchandani assumes that the ink for inkjet printers and the toner for laser printers (commonly used by government institutions) cost the same amount, when in reality toner is about half as expensive. Also, as noted by the aforementioned article by Mr. Brownlee, many US documents are still printed on a printing press, for which the price of printing is calculated not by ink used, but by the complexity of the page’s layout, and it is unlikely it costs as much as the $4,285 per liter assumed by Mirchandani.

  Whilst it’s encouraging to see young minds so interested in the practical application of typography, the lesson we really learnt here, is that the only real way to save on printing costs is to go paperless.

   

  Featured image/thumbnail, print image via Shutterstock.

  
  
  

  Glober Font Family with 18 Weights – only $19!

  
  

  Source
  
  
  
  
  
  
  

• 7 simple IA mistakes that could be undermining your conversions

  Posted:Thu, 10 Apr 2014 08:15:17 GMT

  Information Architecture (IA) is not just a buzz word. Information Architecture is the art of structuring information to offer better usability in a digital landscape. It is often used in companies developing complex information systems, but lately its use in web design has been made popular as well.

  It is actually an important factor of a successful website and if you’re not focusing on it, you’re probably making lots of mistakes that you don’t even realize—all of these mistakes are undermining your website and are decreasing your conversions.

  We all want our websites to be easy to use and today’s guide will teach you how to achieve this, as we take a look at common IA mistakes that make your website less usable.

  1. Misunderstanding your audience

  This is key to anything you do, but it is extremely important when speaking of IA, because not knowing who visits your website can’t help you create solutions for them. Understanding your audience is crucial in creating a good architecture because different people use sites in different ways; if you have an older audience, you might want to aid all the processes on your websites, as well as make it accessible for individuals not having that much experience on the web.

  You can only create good strategies when you know who you are creating strategies for.

  If you have a website right now, look at the data you have to get an insight into the audience. You can also run a data survey asking a few useful questions. Based on this, you can create a strategy that will offer your users a better experience. If you are starting from scratch, you can look at the intended target audience and take it as your starting point.

   

  2. Being inconsistent

  Users want to feel in control on a website; they don’t want you to save their credit card information, they want to know where they are and where they can go, they want to be able to find information quickly. All of these things give a sense of control and safety; get them right and your user will trust you.

  You will quickly confuse the user by having different types of navigation on different pages. You know the uneasiness you feel when your screen is suddenly bombarded with pop-up advertising that you don’t know how to close? That’s the effect your page is creating on your users if they get confused.

  Does the navigation look the same on all pages of your website? Do the headlines have the same color, spacing and size? Is the font for the body text the same? Are most basic elements similar on all pages? If not, make it so.

   

  3. Using difficult language

  Although it might not seem related to IA, the way you write your copy text is actually quite important for your users and the way they see your product. If you fill your website with jargon and internal language, visitors are less likely to understand it.

  You have to keep your copy text short and simple. When you think you’ve achieved the necessary simplicity, go back to your editor and simplify a bit more. Always ask the question “would a 10-year-old understand this?” If not, simplify more.

   

  4. Omitting a search function

  Now if you have a one-page website, you are excused . But if your website has some more content on it, you are most likely in need of a search feature.

  If your user is not familiar with your website and arrives there from Google, it will be just like being thrown in the middle of a city in Italy that he never heard of. Now he might speak Italian and be able to walk around for a while, but unless he knows where to head to, he will probably not find the police station too easily. It’s the same on a website.

  Many users look for the search bar first when they enter a site with a large amount of content.

   

  5. Using movable UI elements

  If on your website you have all kinds of objects and elements moving around, you are better off without them. They only distract the attention of the user and cause irritation. One of the worst things that I have seen is the “fixed social media bar” that sticks to the article you are reading as you scroll down.

  I don’t want to be manipulated into anything. I want to read the article and if it’s good, a simple share link at the bottom will be enough for me to act. I don’t need you to run after me continuously asking to share. I don’t want to share. I want to read.

   

  6. Not offering users feedback

  A website is most of the time a two-way system, with the user acting upon different elements and the system sending feedback in the form of opening another page, submitting a form or finishing the purchase of a product. You need to ensure that your website is good at giving feedback.

  If your visitor contacts you through a form, post a message saying something like “Your message has been sent. We will answer soon”. If your visitor adds a product to the shopping cart, make sure he knows that the product is in the shopping cart at all times.

  This can be quickly tested by asking a friend to perform specific tasks on your website. Watch him and ask some questions afterwards. Were there times when he didn’t know what happened? Were there things he was unaware of at times? If he has comments, you probably need to change something and be better at offering feedback to your end users.

   

  7. Leaving it in the users’ hands

  Visitors often make mistakes and the key to this is not making them feel stupid. Explain what went wrong and emphasize the fact that it’s not their fault, but rather something went wrong with the system. Always apologize and use understandable language. No, the user doesn’t know nor wants to know what a 404 is. Just tell him that the website couldn’t find what he searched for on the server. Offer the user the chance to navigate somewhere else and ensure that he is not confused or irritated by what happened.

  Take a look at all the error pages on your website and optimize them for your audience.

  Actively listen for feedback from your users. Some might be frustrated, some might be happy with a feature, some might be angry—make sure you listen. Guidelines and consistent elements mean a lot, but not more than the feedback from your users.

   

  Conclusion

  If you look over the principles above, you can see that none of this takes a lot of time to implement. Some of the things above can be done by yourself, so you only need to invest a bit of time. 

   

  Featured image/thumbnail, construction image via John Kinsella

  
  
  

  Bundle of Gorgeous Handmade Image Fonts – only $39!

  
  

  Source
  
  
  
  
  
  
  

• Comic Sans gets a facelift

  Posted:Wed, 09 Apr 2014 19:15:51 GMT

  Craig Rozynski may have taken on the mother of all type design challenges with his creation Comic Neue; a revival of the world’s most hated typeface.

  His first type design project, Rozynski’s Comic Neue loses the pretence of unevenness that the original Comic Sans employed. But Rosynski has succeeded at keeping Comic Neue friendly and approachable.

  Rozynski’s produced two variants, the second being Comic Neue Angular, which has angular terminals instead of round. With light, regular, and bold weights, as well obliques, there are currently a total of twelve faces. The complete family is free to download right now.

  

  As much as we love to rip poor Comic Sans, one of its greatest aesthetic offenses has little to do with its design. Our collective resentment—which extends well past the design community—has more to do with its misuse, which is why you may want to employ this new incarnation with restraint.

  Comic Sans isn’t the only typeface open to misuse of course; is anybody else feeling a growing unease about the proliferating use of otherwise-exquisite Gotham? It’s been spotted on U.S. movie trailers, Discovery Channel and Cartoon Network logos, every other movie poster, and Wendy’s fast food to-go bags. If you are as irked, you’ll appreciate what can happen to any typeface when it’s used without thought, and way too often.

  For one last dose of irony, this Wall Street Journal article reports that Comic Sans creator, Vincent Connare, produced his design in response to overuse of Times New Roman.

  It will be interesting to see how Comic Neue fares. Since it’s free, it has the potential to get around… but at least for now, it’s not shipping with a popular operating system. Still, as Rozynski says, Comic Neue remains “perfect as a display face, for marking up comments, and writing passive aggressive office memos.”

  Don’t miss the expert appraisal tweeted from Connare himself, near the bottom of the Comic Neue download page.

  
  
  

  Bundle of Gorgeous Handmade Image Fonts – only $39!

  
  

  Source
  
  
  
  
  
  
  

• 25+ free WordPress themes for April 2014

  Posted:Wed, 09 Apr 2014 08:15:35 GMT

  It’s been a busy month for theme designers & developers as a large number of new themes were released, making this a great time to update your site if it is in need of a new look. Some of the overall trends in web design are showing through in theme design as well: flat design and big photos rule.

  Every month we’ll be bringing you our pick of the best free WordPress themes released in the previous four weeks. Here are our favorites for April:

  Aadya

  This fully responsive, retina-ready theme is built on the Twitter Bootstrap framework and includes quite a few features often found only in premium themes. Some of the best options include 12 widget areas, multiple page layouts, a nice front page slider, custom logo and background options, multiple menu locations and comes “out of the box” search engine optimized.

  

   

  Cubby

  This fully responsive theme comes with an extensive admin panel with plenty of options to maximize your site and customize it. The theme is tested and works with most popular browsers. Plus, Cubby includes multiple social media icons that you can use in your overall site design and a nice homepage slider.

  

   

  RedPro

  Designed for business websites, RedPro is built on the Twitter Bootstrap framework and features a simple design. The theme includes three page layouts, is W3C validated and SEO friendly.

  

   

  MaxFlat Core

  This theme features fun styling effects with high color contrast and fun typography. The responsive theme allows for color and logo customization and includes a tool to see changes in real-time before you save. The theme is built on Zurb’s Foundation framework and would be a good blog option.

  

   

  Midnight City

  If you like options, then you will love Midnight City. This theme is packed with typography choices (including 220 Google fonts), one- or two-column layouts, two different header options, four different color schemes, multiple language translation and custom CSS options. The theme is also responsive and works in a variety of browser environments.

  

   

  Socialize Lite

  This lightweight theme is simple and would make a great fit for a blog or magazine-style website. Socialize Lite is responsive and features both top navigation and card-style posts and a sidebar area. As the name suggests, this theme is also packed with tools to help share posts on social media.

  

   

  Agency

  The free version of the Agency theme includes enough options to get started with a nice and clean website design. It includes a featured slideshow, multiple theme options, sidebars that can be used for widget areas, drop-down menus and threaded commenting. The theme also has a clean look, making it appropriate for a small business site.

  

   

  New Gamer

  This modern and masculine theme is designed just for video gamers, with a dark color scheme. Both the colors and layout are created to accommodate a game-based website. Neat Gamer also includes plenty of customization options and a widget area.

  

   

  SunRain

  SunRain is a powerful theme with a lot of extras, making it an option for almost any type of site from personal to business. The theme is easy to use and packed with customization options. SunRain also includes a multi-layer slider (a very popular option), widget areas, custom areas for menus and backgrounds, multiple page templates and “sticky” posts. The two-column format also features simple and modern type styles for a themed site that will stand out.

  

   

  TaraLi

  This simple responsive theme features locations for big images and plenty of text. The theme includes multiple sidebar options and complete customization of the header and home page. The SEO-friendly theme includes plenty of color and font options as well to help create a site that is your own.

  

   

  WPChimp Countdown

  Planning to launch a site soon? This is the countdown theme to use while you are putting the finishing touches on your final site. This simple counter tells visitors when the new site will go live and can help generate buzz for your product or site launch. The minimal and clean look has a modern feel and includes an email signup form.

  

   

  Athenea

  Athena is a fully responsive theme with a lot of different configurations for content. The theme also features a large main image area and header that collapses as users scroll down through the site. This theme is great for websites that will be viewed by international audiences as well with 25 language options.

  

   

  Capture

  While there aren’t that many free themes designed for photographers, Capture makes the most of showcasing images. The photo blogging theme features a full screen image slideshow tool and has lightweight code so that everything loads quickly. The design of the theme is super-simple, allowing the photos to stand out in the design.

  

   

  Catch Kathmandu

  You would not know from a quick look that Catch Kathmandu is a free theme, because it is packed with features that are often found in premium options. The theme is packed with customization options, is fully responsive and has plenty of space for text and visuals. This theme also includes a featured post slider; webmaster tools; custom favicon, header, footer, background and menu; and custom widgets. Plus Catch Kathmandu is WooCommerce ready and can be used for business websites.

  

   

  DW Timeline

  This theme makes the most of one of the big web design trends right now, blurred images behind a color overlay. This theme design can work for both blog and portfolio sites and supports six different post formats. The theme has customization options for the header image and background and call to action buttons.

  

   

  Graphy

  The top feature of Graphy is typography. This theme is made for bloggers who want to showcase their words with beautiful and elegant type and little else. The responsive design was developed using mobile-first thinking and includes five widget options.

  

   

  Hemingway

  Hemingway is a great theme for sites with impressive images or visuals. The two-column design features large image areas and multiple post formats. The theme is responsive and retina-ready, so your images will always look crisp and sharp. Available widget areas include feeds for video, Flickr and Dribbble, making this a good portfolio theme.

  

   

  Radiate

  Radiate is a great theme with a lot of modern extras. The theme includes a parallax header, customizable color options, customizable CSS, infinite scrolling, translation to several languages and supports the WordPress gallery. The header effect is especially nice with a hint of transparency. This is a robust package for a free theme with a modern look and feel featuring a flat design style.

  

   

  Skeleton

  Skeleton is a simple, responsive WordPress theme built on the “smpl” framework from Simple Themes. Skeleton features multiple widget locations—a popular element—multiple color palettes, multi-level navigation, SEO tools and Adobe Photoshop source files. The theme package also includes CSS customization options for more advanced users.

  

   

  Circumference Lite

  Circumference Lite is a clean, flexible and fully responsive theme for business websites, shops and organizations. The theme is built on the Twitter Bootstrap framework and comes with plenty of customization options for colors, layout and styling. This theme also includes multiple post formats.

  

   

  Split Me

  This super-simple theme features a split panel design for two types of content. In this design, you can pair text and an image, or navigation and posts, or an image and gallery. There are no bells and whistles here and very few options for customization, but the theme is clean, simple and ready to use.

  

   

  StartPoint

  This single-page theme has a super-clean layout and is made for simplicity. While it does not have a lot of customization options, users can download this theme and have a simple and easy to look at site online in just a few minutes. StartPoint is fully responsive and features full-width images.

  

   

  Infinite

  This responsive theme features a clean and simple design that could work for both business or personal portfolio websites. The theme is retina ready and includes a variety of customization options, including multiple color schemes. Infinite is built on the Twitter Bootstrap framework and uses the latest HTML5 and CSS3 tools for a great user interface.

  

   

  Lupercalia

  Lupercalia is made for social mavens. This theme includes tools for linking to a variety of social media sites, including Facebook, Flickr, Google+, Instagram, Pinterest, twitter, Vimeo and YouTube. It also includes plenty of customization options, sliders and featured posts. The overall look of the responsive theme is somewhat feminine but can be altered.

  

   

  Market

  This theme is designed with e-commerce in mind and is WooCommerce-ready. The theme is built in a minimalistic style and includes great spaces for images and some nice CSS3 animations. Market is fully responsive and if you like the look and don’t need the sales tools, it can be used without those plugins.

  

   

  Minima Lite

  This theme has a modern and flat design featuring a 12-column responsive layout. The free version of the theme includes a powerful appearance editor for changing color schemes, typography and layout options. Minima Lite also features a ton of blog elements such as short codes, custom widgets and is translation-ready.

  

  
  
  

  Bundle of Gorgeous Handmade Image Fonts – only $39!

  
  

  Source
  
  
  
  
  
  
  

• How to beat the “paradox of choice” in UI design

  Posted:Tue, 08 Apr 2014 08:15:07 GMT

  “Less is more” is one of the most important minimalistic design principles every designer learns: you read about it a lot, you know it’s really important, but still you might get it all wrong. The important thing is to come around, learn from it, and evolve. And so we did.

  With the release of Todoist Next in January of this year, we introduced a new design alongside new features. From the beginning, our focus was to modernize the app and improve the user experience across the board. Postponing tasks was one of the things we especially wanted to improve. But it wasn’t as easy as we expected…

  Out with the old

  The previous version of our app had only two options when it came to rescheduling tasks. Either you chose “Do it today” or “Postpone” (that could be either tomorrow or next occurrence for recurring tasks). Whenever you needed a bit more control you needed to use the full calendar, or type in a new date. On the Web and desktop clients, it’s really easy to type in a new date and time, since you have the physical keyboard and mouse. But on mobile, the experience was a bit broken. You could type in a new date but wasn’t very convenient, especially when you’re in the “one eyeball and one thumb” mode.

   

  In with the new

  Since the old system was so limited, we really wanted to give our users more options and make it much more visual so that it would be more flexible and easier to use on mobile devices, but also great on other platforms. At that precise moment, the choice was more.

  Since we wanted to make a great mobile experience, we used the “mobile first” approach in the development: if it works on mobile, it’s easier to make it work on desktop where you have more screen space and more precise input methods.

  With all this in mind, we started to explore how it could work and which direction would most help our users. We researched other solutions that were trying to address similar issues to our own, but we felt that most of them were limited and that we could improve upon them, although some of them are really good solutions.

  A “smart” scheduler was our big idea. A smart system that would look into your tasks and would suggest the best dates magically. For example, when you reschedule a task for next week, the system would look into your current tasks and select a day in the next week with no due tasks. And it would be awesome! For the user it would be a no brainer, with a really nice interface powered by a strong algorithm to fetch the best dates. For the team, it would be a great accomplishment that blended an awesome interface with solid coding into a solid product.

  

  Early stages of development: from circular menus to really complex sets of options with date suggestions marked on the calendar and additional feedback on tap.

  Everything was falling into place with the initial developments, and the first mockups were looking promising. We even started to come up with new ideas about how to make it even more powerful. We added an initial group of choices (today, tomorrow, next week, someday), a classic calendar view option, and “date suggestions” that would bring all the magic to the screen. We tried different layouts, even a circular menu, and iterated quickly on the options range (between 6 to 9 options on the screen at a time).

  Soon we started to think about how to cut interaction steps, how to increase choice options and reduce taps. One of the options would display the classic calendar but that seemed like an unnecessary extra tap, because we could fit everything into the same screen. And so we tested. And tested.

   

  The uh-oh moment

  One of the first problems we detected with the “magic” was the lack of feedback on the dates. If the user chose next week, the system added the date but the user had no say in it. Even if it was a free day, you might have wanted the task scheduled for another day. We needed a extra step to show the date that the user could then confirm.

  Another problem became obvious: we didn’t have enough information about the users to truly make the best possible suggestions. To do so would probably have required a lot of input from the user or, really, spying on everything they do. On top of it all, the coding of such a system was getting really complicated.

  Also, the interface was getting really cluttered with a lot of choices, and too many taps were required for some simple selections. At this point we had reached a “paradox of choice”—a term coined by Barry Schwartz—we had so many options that actually selecting one was a daunting task in itself.

  The first solution we started with was an algorithmic solution that would do calculations for you. The idea is smart on paper, but a nightmare to implement since we don’t have enough information to make it really smart. — Todoist founder, Amir Salihefendic.

  With the precious help of Khoi Vinh (amazing designer and UX guru), we started to realize that we weren’t achieving our goal of simplification, we were making the app more complicated.

   

  Finally overcoming the Paradox of Choice

  When developing an app, most of the time your imagination is the limit. This means that it’s easy to go completely overboard. We overselves fell into this trap. From there, we needed to take a step back and rethink the entire system.

  We strongly advocate simplicity in user interfaces, so our new visual scheduler couldn’t be complicated. Here, we started by using one of of Sheena Iyengar’s principles from “The art of choosing”: cut. The option set was restrained and date suggestions were removed altogether.

  

  Although Android and iOS versions work the same way, the UI was adjusted to better fit each platform. Although it’s the final layout, the options set would still be adjusted before the release.

  The layout was also simplified. The final solution is a 3×2 grid of options, with access to a full calendar as one of the options, so it’s easy to know what to expect at any point. Some of the other solutions might have been good choices, but after testing, we figured they were harder to use and required a steeper learning curve. Sometimes it’s just better to keep it simple.

  There was a lot of effort put into developing the system and, in the end, we decided on an easily understandable group of choices. All of this in order to offer a great user experience that actually helps the user make decisions about due dates, and ultimately get things done.

  
  
  

  Building A Niche Website From Scratch Video Course – only $19!

  
  

  Source
  
  
  
  
  
  
  

• How to build irresistible websites by designing for emotion

  Posted:Mon, 07 Apr 2014 08:15:38 GMT

  Good design has strong ties to emotion: this is something designers do know and understand. Unfortunately, in a world driven by SEO and the never-ending evolution of web tech, it’s a very easy thing to forget.

  Emotion is at the core of a solid business identity. The best logos and brands, the best printed and digital experiences, capture and express very specific feelings with very specific intent. Banks focus on optimism, confidence, and many are now exploring friendliness and approachability. Sports sites exude the excitement, the drama and the no-compromise determination we love about playing or watching. At as many levels as possible, we are seeking to create the connections that will help us sell, promote or enlighten. Emotion is the bridge, an essential messenger and touchpoint.

  Our emotional response to design, from its visual aesthetics to the experience it creates, is part physiology, part math and part mystery. That’s also true for our approach to design, and again: it informs more than the aesthetic aspects. Emotion is also present in the best of its structure and strategy.

  People ignore design that ignores people. – Frank Chimero

   

  How do you do emotion?

  You can come at emotion in design from a number of different directions:

  1. The company

  Identify and express the emotional qualities of the business you’re representing.

  2. The market

  Appeal to the driving emotions of your target customer, both those emotions around their needs (negatives, like frustration or fear, and positives, like anticipation or curiosity) and the emotions they’ll feel when their purchase satisfies those needs (research shows both approaches can work, but you should test).

  The iPod was not the first mp3 player, but it was the first to be delightful. – Tim Brown, CEO of IDEO

  3. You

  Make it personal. Rock star designers talk about working only with clients they like. Not-yet-rock-star designers often feel they haven’t arrived at a place where they can pick and choose, but it’s still possible to draw inspiration from the spark and connection between ourselves and our clients. Besides those with whom we especially click, we can seek out and focus on the qualities we admire in the person (or company) we’re designing for.

  All three of these directions are effective, because all three, when approached authentically, are intertwined. If one of these is missing, you are in danger of slipping from connection to manipulation.

  The only important thing about design is how it relates to people. – Victor Papanek

   

  Sex (or sentimentality) sells?

  Emotional manipulation may seem successful, but it is a short term success if your product or service can’t keep its promise. Gripped by fear that the opposite sex will spurn them, even if fashion or fragrance buyers don’t quickly discover the item they bought was a dud, they will still move on to the next superficial fix.

  Designing a product is designing a relationship. – Steve Rogers

  It’s no different an experience from those you’ve had with manipulative people in your life. Sure, you can be fooled once, but over time you’ll discover who was just messing with your head. It may take a week or a couple of years, but in the end, you’ll leave. You’ll also warn your friends.

   

  Is emotion really so intangible?

  Let’s think about that…

  Do your homework

  Have you identified your target customer? (Yes, you even need to do this for your freelance portfolio site.) Not only do your customers and potential customers have feelings, but they have feelings which can’t be captured in a single word.

  Design is the search for a magical balance between business and art; art and craft; intuition and reason; concept and detail; playfulness and formality; client and designer; designer and printer; and printer and public. – Valerie Pettis

  For that reason, don’t stop at afraid, confident, loving, outraged, etc. You’ve got to dig deeper. If this were theater, we’d be going from the stage, where large and simple expressions must shout to the back of the hall, to film, where lingering close-ups reveal not just love (for, say, a dating site), but tenderness, protectiveness and the disorienting thrill of a brand new romance. The more detailed and specific you can get, the more profound and effective will be your communication, and the deeper the connection will be.

  If you’re interested in learning more about identifying target customers, research buyer personas and profiles. This indepth article from the marketing folks at Buyerology will help you dodge the imposters.

  The other E word

  It’s really difficult, maybe even impossible, to be both empathetic and cynical. When you’re developing ideas, send your inner cynic out for drinks. While they’re away, let yourself be moved by the concepts you’re exploring. Be as excited as your client about the potential of their new business (or new business phase).

  To return to the dating site example, forgive your ex long enough to remember your first amazing fling. For an even more challenging example, explore the emotional possibilities of that slightly-less-than-thrilling new time management app. My guess is, when you read that, you hit a brief “huh?” hitch, and then made the leap without any help from me. Still, your mobile device-wielding, busy and confident professional and/or harried, baby-wielding new parent could use at least five more defining qualities. Are they so busy they feel fractured? Do they have wild-eyed dreams of squeezing in a family road trip (or a ten minute shower)?

  Design is the fundamental soul of a human-made creation that ends up expressing itself in successive outer layers of the product or service. – Steve Jobs

   

  Conclusion

  While design is aesthetics with a plan and an intent, when the plan and intent eclipse the whole human picture, we lose sight of our role as designers and fail to make the connections we aimed for.

  In the face of the other demands that come with design and digital design work, we’ve got to carve out a large place for its emotional demands. Your personal investments in technical, marketing and business intelligence should definitely be part of your skillset, but to get to craftsmanship, your emotional intelligence will be indispensable.

  People think that design is styling. Design is not style. It’s not about giving shape to the shell and not giving a damn about the guts. Good design is a renaissance attitude that combines technology, cognitive science, human need, and beauty to produce something that the world didn’t know it was missing. – Paola Antonelli

  What can you do to make sure you are consciously and effectively factoring in emotions at key stages of your design process? For many of us, it’s unconscious, and a number of designers prefer to keep it that way. It certainly seems counter to its spirit to make it a checklist item.

  Still, if it’s not a natural part of your process, you’ll need to make the conscious choice to include it, and to give yourself reminders. Research the topics of emotional intelligence and emotion in design. Redefine it for yourself, and if it’s not already there, add it to your personal design “manifesto” (whatever form that takes).

  
  
  

  Building A Niche Website From Scratch Video Course – only $19!

  
  

  Source
  
  
  
  
  
  
  

• Our favorite tweets of the week: March 31, 2014 – April 6, 2014

  Posted:Sun, 06 Apr 2014 09:37:51 GMT

  Every week we tweet a lot of interesting stuff highlighting great content that we find on the web that can be of interest to web designers.

  The best way to keep track of our tweets is simply to follow us on Twitter, however, in case you missed some here’s a quick and useful compilation of the best tweets that we sent out this past week.

  Note that this is only a very small selection of the links that we tweeted about, so don’t miss out.

  To keep up to date with all the cool links, simply follow us @DesignerDepot

  The Top Five TED Talks to Inspire Your Small Business Marketing http://depot.ly/vqT7b

  

   

  Finally — Two Harvard Students Have Created a Service That Allows You to Unsend Emails http://depot.ly/vqTdM

  

   

  The woman behind MSFT’s Solitaire designs also did Apple’s early icons http://depot.ly/vqNt5  via @buildinternet

  

   

  Responsive Email Patterns: A collection of patterns & modules for responsive emails http://depot.ly/vqgmU

  

   

  The 15-Minute Social Media Audit Everyone Can Do http://depot.ly/vqcZ8  via @buffer

  

   

  After period of neglect Apple opens ip iAd to “filmmakers, small business owners” http://depot.ly/vnsw3

  

   

  The @IE team is now fully open about spec feature additions and runs a status page here: http://status.modern.ie/#/  via @codepo8

  

   

  Microsoft unveils Cortana Assistant at Build Conference http://depot.ly/vnsoi  via @marketingland

  

   

  April Fools’ Day 2014: The Best of the Brand Hoaxes http://depot.ly/vnrOa  via @Adweek

  

   

  ‘Dumb Ways to Die’ Creates a Lovably Lethal Greeting for April Fools’ http://depot.ly/vkb8x

  

   

  .@venturebeat may have just found the worst group of investors in the world http://depot.ly/vkaRm

  

   

  The Secret of Life from Steve Jobs in 46 Seconds http://depot.ly/vkaIo  via @brainpicker

  

   

  Google Fiber: Introducing Coffee-to-the-Home http://depot.ly/vkb23

  

   

  Nice tutorial about creating retro text effects with Illustrator’s Appearance Panel: http://depot.ly/vgRzf

  

   

  What your logo’s color says about your company [Infographic] http://depot.ly/vgVnt  via @FastCompany

  

   

  As a proof to the great password strength lie, see this ace explanation from @xkcd: http://depot.ly/vgRPG  via @speckyboy

  

   

  Adobe sneaks new infographics tool for Illustrator http://depot.ly/vgRit

  

   

  The Illustrated History of Twitter http://depot.ly/vbnlf

  Want more? No problem! Keep track of all our tweets by following us @DesignerDepot

  
  
  

  Improve Your Mac with Intego Washing Machine 2014 – only $17!

  
  

  Source
  
  
  
  
  
  
  

• Comics of the week #229

  Posted:Sat, 05 Apr 2014 09:13:22 GMT

  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…

  A bonding experience

  

   

  Misunderstood

  

   

  Model clients

  

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

  
  
  

  300+ Premium Photoshop Actions – only $9!

  
  

  Source
  
  
  
  
  
  
  

• Deal of the week: 6 professional iOS7 app design templates

  Posted:Fri, 04 Apr 2014 17:15:34 GMT

  It seems like the whole world’s got an idea for an app, the really tricky part is converting that idea into a real app that makes sales on the App Store.

  If you’re looking to produce an app that is commercially viable, solidly built and great looking, then you’re in the right place, because our sister-site, MightyDeals.com, has put together a staggering 95% discount on this amazing set of 6 iOS7 App Design Templates.

  Each template comes with the original Photoshop sources files, so you can edit the graphics any way you choose giving your application a bespoke look. All source code is written in native Objective-C, giving you the perfect base to build your own functionality on to. What’s more, each of these app templates is ready to go, if you don’t want to customize then get your content in and you’re good to go!

  The set includes a newsfeed style app, ideal for displaying frequently updating stories; a location app for locating taxis, restaurants and events; a food app for recipes; a social sharing app; a tap tag app, perfect for socialites who love to shop; and an activity style app, great for anyone building a fitness app.

  I have been looking for something like this for a long time. I will definitely be recommending your templates next time i am asked for design help. – Valerie

  First i ran a 99 designs contest, but no useable designs came from it. I was actually surprised. But I was recommended your templates. And have to say I’m really satisfied with what you’ve made! – Danielle

  These fantastic iOS7 App templates normally retail for $594, but for a limited time you can get all 6 for just $29, an incredible 95% off the regular price. Head over to MightyDeals right now to grab this offer today.

  
  
  

  300+ Premium Photoshop Actions – only $9!

  
  

  Source
  
  
  
  
  
  
  

FeedBurner delivers the world's subscriptions wherever they need to go. Publish a feed for text or podcasting?
You should try FeedBurner today.