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

• Is UX Really That Important?

  Posted:Fri, 23 Jun 2017 13:45:41 +0000

  One of the most oft-repeated criticisms of any design is that it’s “poor user experience”. UX is set up as the ultimate achievement for any design project. But is this an over-simplification of the designer’s role? Should everything be about user experience?

  To paraphrase Leonard Hofstadter: “UX is a ‘smart decision’; it is like a bran muffin—a thing that you’re choosing because it is good for you…But sometimes, you want things in your design to be a Cinnabon, you know? A strawberry Pop Tart. Something you’re excited about even though it could give you diabetes”.

  Today I’ve put together a list of sites that are rarely credited with good user experience, but that are still praise-worthy despite—or perhaps because of—that fact. We can admire their originality, their interactions, and their creative direction.

  1. Scrolling: parallax, long and infinite

  While scrolling, in all its hypostases, underlies a bunch of today’s websites—especially those that bring to life a storytelling experience—UX gurus find this technique “mauvais ton”. They consider it bad for many reasons:

  • users may not know what to do when first they stumble upon such a site;
  • users can feel confused and frustrated;
  • users often become bored after several minutes of constant moving;
  • there is no way out, whatsoever;
  • the navigation is not transparent and habitual;
  • relatively bad site performance;
  • in some cases, it does not work in mobile devices;
  • etc.

  However, we still eagerly click on a website that promises to take us on a long exciting adventure. Does the “comfort zone” matter? When all you need to do is to toy with a mouse scroll wheel and amuse yourself with some inventive tricks.

  

  What does the Bank of England do?

  

  Ivan Toro

  2. Experiments with Typography and Taglines

  As all we know, your message to the targeted audience should be as clean and clear as a little angel’s tear. Good contrast, optimal readability, and some other factors ensure the successful transmission of the company’s message. For example, Six Potatoes or Biron: their titles are pretty straightforward and plain. Without a doubt, this technique works: it is really hard to miss the tagline.

  

  Six Potatoes

  

  Biron

  However, what about the homepage of Bolden? Their “welcome” message is a true mess. Letters overlap each other looking much like the Venn diagram. The first thing that comes to mind “What a…?” Undoubtedly, such a peculiar solution evokes mixed feelings. Nevertheless, these feelings ignite our interest. Curiosity is our natural instinct that is truly powerful.

  What’s really hidden inside this tiny chaos? The team is managed to seize and hold our attention, and not only convey the message and reflect a creative thinking but also use our short memory span to their advantage.

  

  Bolden

  3. WebGL Experiments

  Can anyone call WebGL along with Chrome experiments an example of good UX? Absolutely, not. Some of them even do not work on the majority of browsers, so a lion share of online audience are simply unable to open them on their desktops, to say nothing about the tablets and mobile devices. But still, the upsurge of using high-end features and experimental libraries in building web applications is evident. Interland by Google, DEVX Experiments, 86 and half years—all these and many more concepts slowly but surely are earning their place in the sun. They are impressive, ingenious and intriguing; and if they open in your browser you will definitely forget about the comfort at least for 10-15 minutes.

  

  Welcome to Fillory

  

  Senso

  4. Original Navigation

  “Should I stay or should I go?”

  Navigation plays a decisive role in whether your users stay or leave. No one wants to fish in the dark. Navigation’s power to destroy user experience (or vice versa) take it to the next level. Good practice encourages us to make the main menu simple, handy, intuitive, but at the same time all-embracing. Everything should be on the surface, or at within easy clicks. The user should get answers to their questions quickly and without much pain.

  Plain top bars with nav links, hamburger menu buttons and of course, sticky nav bars that accompany us on our journey through the website are really popular these days. Staying conservative and pragmatic in choosing the navigation lets you provide your visitors with a Navigation GPS Unit rather than a map with descriptions written in Moon-letters. Nonetheless, to a certain degree these trivial solutions will take away all the fun and playfulness of your interface.

  Unexpected menus are creative, thought-provoking and captivating. Yes, they can be misleading, but when done right they are almost flawless masterpieces that pique our curiosity.

  

  Daniel Spatzek

  

  In The Box

  Conclusion

  Without a doubt, user experience is a vital aspect of a good web application whether it is just a plain blog, complex corporate portal, or huge e-commerce website. Along with such important things like mobile-friendliness or cross-browser compatibility it forms a safe and sound foundation that ensures success. However, sometimes, like in the real world, there are things that we find truly uncomfortable, like taking long trips in a sports car or wearing high heels, but still we admire them, want to possess them, they make us turn our heads.

  So, should everything be about UX? Should we all abandon the desire of going off the beaten track and follow the same old roads over and over? Is it possible to strike the balance between creativeness and pragmatism?

  100 Professional, Print-Ready Event Flyers – only $9!

  Source

• 6 Essential Open Source Tools for Web Designers

  Posted:Thu, 22 Jun 2017 10:45:21 +0000

  The web runs on open source software. Most of it is in the back end, with most of the world’s servers running on some form of Unix or Linux. Those servers run hundreds, if not thousands, of open source utilities, script interpreters, and so on. Once in a while, though, the open source stuff gets all the way to the browser, where the user can see it.

  Okay, that happens a lot. Case in point: WordPress; you’re seeing it now. But the conversation, when it comes to the tools of web design, is often dominated by software you have to pay for: Photoshop, Adobe XD, Sketch, the Affinity suite, Sublime Text, and about two-thousand web-based prototyping apps. When we do talk about open source web design software, we talk about WordPress, and occasionally the GIMP…or something.

  In this article, I wanted to highlight some other open source projects that are active, lesser-known, and rather promising. I expect great things from each of these projects, if only we can get people looking at them:

  1. Krita

  Krita is a powerful graphics editor with a heavy focus on illustration and digital painting. The Internet is awash with illustration. More and more designers are choosing to use illustrations, and even digital paintings, to bring life to their web designs. Sure, most of it’s in vector format for reasons of SVG, but if you want a more traditional look to your graphics, Krita has your back.

  It also has most of the features you’d expect to find in a traditional graphics editor. I wouldn’t use it for designing mockups (though you could) simply because there are easier ways. 

  

  2. Visual Studio Code

  Once upon a time, it was weird to think of Microsoft having anything to do with open source software. Now, they have Ubuntu running in CLI mode on Windows, and they’re giving away a free text editor. Ever since Visual Studio Code launched, it has developed quite the fan base. And why not? It’s fast, it’s extensible, it works.

  Now, if you’re already entrenched with Sublime Text, Atom, or one of the other famous text editors, there’s not much reason to switch. This is especially true if you’re on a Mac, or running Linux. The big draw is VS Code’s integration with other Microsoft development tools. If you run Windows and code in ASP.Net, for example, you might see what this text editor has to offer you.

  

  3. UIkit

  If you like looking at front end frameworks for fun, or the “Big Two” aren’t cutting it for you, try out UIkit. It’s byte-conscious, and it’s modular, so you only have to use the bits you want. Their Github repo shows a fair bit of action. Most importantly, it looks pretty good by default, which is what most people want out of these frameworks.

  

  4. Pencil Project

  You may remember Pencil from the days when it was just a Firefox extension. Well, Pencil has since become a mature, stable wireframing/prototyping app in its own right. It lacks some of the extensive collaboration features of online apps in its category, but it’s great for anyone who needs or likes to work offline.

  With a large library of elements and stencils available, you should be able to pick it up and start prototyping fast. It’s still under development, with version 3.0 launching in February, and the latest bugfix release on May 11th.

  

  5. kodeWeave

  kodeWeave is a newer project that looks a lot like CodePen, because it basically serves the same purpose: experiment with bits of front-end code. The big difference is that in addition to using it as a web app, you can download it as a standalone app for Windows, Mac, Linux, ChromeOS, and Android.

  This is great for offline development, of course, but it’s also great for those projects where your client might prefer not to have project data and code experiments in the cloud. It also comes with comes with CSS preprocessors, and just about every framework you can name off the top of your head.

  Bonus: it can integrate with an app called WebDGap to export your code as a native desktop or mobile app, so it’s pretty great for prototyping.

  

  6. GrapesJS

  GrapesJS is a site builder. Well, it’s more of a site builder framework. You can open it up and edit your site designs online. It supports responsive design (of course), editing the code yourself (if you really want to), several preview modes, undo/redo and more. It also has a set of pre-defined page elements that you can drag and drop in.

  But really, GrapesJS meant to be dropped into other people’s projects. You can include it in a bigger app, such as a site builder service, an installable CMS, a newsletter managing app, or really anything that might need HTML/CSS templates that can be customized by the end user. And it is pretty easy to use. There’s a learning curve for anyone not familiar with web design, as there always will be, but it’s a quite capable page editor.

  

  Honorable mention

  Honorable mention goes to Synfig Studio, a 2D animation app. It doesn’t have a lot to do with web design, so it didn’t make it onto the list proper. However, it can be used to make content for the web, and has come a long way in the last year. The team deserve a shout out.

  Many other great OSS projects have come and gone. Some are even still being regularly developed in relative obscurity, used by only a handful of loyal, loving fans. And maybe Richard Stallman. Go have a look around Github, SourceForge, and other havens of OSS software. Something out there might find its way into your web design process, and maybe even into your he…

  …okay, I can’t finish that with a straight face.

  100 Professional, Print-Ready Event Flyers – only $9!

  Source

• The 10 Best WooCommerce Plugins For Boosting Your Revenue

  Posted:Wed, 21 Jun 2017 10:45:47 +0000

  Online sales climb higher year after year and now is the best time to get into the ecommerce game. If you’re looking for a platform to start with then WooCommerce is easy to setup, very secure, and it runs on WordPress which means it’s 100% free.

  But just launching WooCommerce is only the first step. You then have to setup a usable shop with features that actually encourage users to buy.

  That’s why we’ve curated this list of 10 great plugins you can use to boost your WooCommerce shop’s revenues and keep customers coming back for more.

  1. Product Enquiry

  You should do anything you can to ease customers towards a purchase. This might include adding tons of product photos, user reviews, or even adding a question box with the Product Enquiry plugin.

  This is a free plugin for WooCommerce that lets customers ask questions directly about a product they’re considering buying. It’s a great way to clear up any confusion on materials, sizing, shipping, or anything related to your products (physical or digital).

  Naturally you could just add a contact page on your site and tell users to message you there. But with Product Enquiry you can grab their attention right on the product page. It also lets you forward emails to different people and you can offer specific enquiry options based on the item.

  It’s definitely a subtle feature but for a newer shop this can go a long way towards building trust with hesitant customers.

  

  2. WPB Related Products Slider

  The popularity of “related posts” can be seen on every major blog and news site on the net. And with the Related Products Slider plugin you can add this feature to your ecommerce shop too.

  Related items work well to keep visitors on your site and possibly increase the size of their order. But adding related items manually is exceptionally tough, so it’s best to let an algorithm automate the process.

  This free plugin handles all the product selection based on tags, categories, and keywords.

  Each slider is fully interactive and responsive for all devices. It comes with two default themes but it’s also very dev-friendly so feel free to carve up a theme that matches the design of your site.

  3. Product FAQs

  If you’ve ever shopped on Amazon or eBay you’ve likely seen the “buyer question” areas. Customers often have specific questions about products before buying and this product FAQ plugin adds the same functionality to your WooCommerce store.

  Whenever a new question gets submitted you can be notified by email right away. This lets you answer questions promptly and even delete some that are duplicates or just don’t make sense.

  But if the customer has an account they can even get notified when you answer the question too.

  You can set certain FAQs to publish live on the site for everyone to see while others can be answered privately. This is best used as a public plugin since it benefits all of your customers.

  

  4. WPB Accordion Menu

  Larger ecommerce shops often have multi-level categories that don’t fit into traditional horizontal menus. But dropdown accordion menus solve this problem since they can be lengthy and they’re toggleable within any category.

  The WPB Accordion Menu plugin is totally free and perfect for all WooCommerce users.

  Once installed you can drag the accordion widget into your sidebar and setup the details. This lets you assign a menu along with ordering the items and certain display properties. It even comes with built-in icon support if you want to add custom icons onto each category in your list.

  This is a freemium plugin with some options to go pro. But for most users I think the free option is more than enough.

  To see this in action take a peek at the plugin’s demo video.

  

  5. Order Delivery Date

  If you’re selling physical products then delivery dates are always a concern. With some ecommerce shops guaranteeing 1-day or 2-day delivery it’s good to support your customers as much as possible.

  That’s why the Order Delivery Date plugin is an excellent addition to any checkout process. This adds a custom date picker into the form so your customers can select when they’d prefer to have the item delivered.

  You have full control over the calendar’s settings including which dates are excluded(for example weekends). This plugin even counts the total number of deliveries per day so you can limit the amount to a reasonable number.

  I think this works best for companies that offer services or direct consultations along with products. This way you’re physically in charge of the delivery and not reliant on a mail carrier to match your deadlines.

  

  6. WooCommerce Image Zoom

  Almost every ecommerce site you visit will have the hover-to-zoom feature for product photos. Whenever the customer needs a closer look at any product they can just hover to get a close-up shot.

  This requires high-resolution pictures and a plugin like WooCommerce Image Zoom. With a one-click install this plugin is ready to go right after you click “activate”. The default settings work perfectly and it’s extremely lightweight.

  The entire zooming feature runs on a jQuery plugin called Elevate Zoom. This means it does require jQuery, but WordPress typically includes this by default in most themes.

  If you’re looking for more customizable features this does have a pro version too. But for any simple WooCommerce website I would recommend sticking to the free version, especially when first testing it out.

  

  7. My Account Widget

  To build your email list and increase sales you should encourage user signups. Once a user has an account on your site they’ll have an easier time buying something and feel more comfortable with the process.

  By adding the WooCommerce My Account Widget into your layout you can add a personal touch to the user account setup. Once the user logs into their account they should have access to their cart, their current orders, and any unpaid orders currently pending shipment.

  It’s a wonderfully well-designed plugin and it should blend into just about any website. By default it has a pretty bland style but it’s also incredibly simple to redesign. And the user account links are genuinely helpful which can ultimately increase time on site and overall sales volume.

  8. Product Slider

  The first step of a sale is getting the user’s attention and showcasing some products. And by adding a custom slideshow you can immediately grab attention while showing off a bunch of products at once!

  WPB’s free Product Slider plugin can fit anywhere on your site with tons of customizable settings. You can add pretty much any products you like regardless of style or photo size.

  This also comes with a simple flat design that’s fully responsive and easy to re-style as needed.

  On the settings page you can change the rotation speed, pagination style, total products on display and many other minor features. This is by far the best free product slideshow plugin for WooCommerce and it’s a cinch to setup.

  

  9. Wishlist Plugin

  When customers see your site as a brand they’ll be more likely to use their profile frequently. That’s why the Wishlist Plugin is such a valuable asset for more established ecommerce shops.

  If someone has an account on your site they’ll see a button next to each product to add that item into their wishlist. Potential customers can bookmark products they like and keep them all saved in one handy location.

  On this page the user can add certain items into their shopping cart, view total inventory, and even check when certain items go on sale.

  This comes with a very simple design but you also have access to edit the CSS and customize the layout yourself. It’s definitely a top-notch plugin to keep people coming back for more.

  

  10. WooCommerce Cart Tab

  The WooCommerce Cart Tab plugin offers one incredibly valuable feature: a shopping cart flyout menu.

  When customers add items into their cart they usually need to click onto a new page just to view everything. Most of the time this is fine. But why not give them easier access when possible?

  Once you install this plugin you can choose how it displays and what features should be included. It is definitely one of the cooler plugins in this list and it’s a feature most online shoppers appreciate when available.

  But think of combining this plugin with a few others from this guide to really improve usability and ultimately increase sales.

  

  100 Professional, Print-Ready Event Flyers – only $9!

  Source

• 4 Ways Vibrant Colors Boost UI Design

  Posted:Tue, 20 Jun 2017 10:45:57 +0000

  Color is one of the most powerful tools in the designer’s toolkit. It can draw attention, set a mood, influence users’ emotions, perceptions and actions. With the lingering presence of Flat and Material Design, color holds even more prominence in UI design today. Bright colors are equally well suited for both playfully cartoonish designs focussed on entertainment and for the elegantly minimalist styles focussed on business solutions. This versatility makes vibrant colors one of the biggest UI design trends of 2017.

  The appeal of the vibrant color trend is that it can be applied in many different ways and styles to design. In this article we are going to look further into four color scheme trends and discuss some inspiring examples which implement them highly effectively.

  1. Monotone

  One of the most popular ways to use vibrant colors in your design is a technique called monotone. Monotone palettes include a single color with a mixture of shades and tints. Monotone is fairly easy to create: Think about the color that best works with your message and consider the amount of variance you want between tones.

  Improve Readability

  Monotone helps establish a solid foundation for foreground content, taking care of readability. Paired with dramatic typography, monotone color schemes are able to create truly memorable experience.

  

  Sydneystockhom uses bold color to create a memorable look in a very simple way

  2. Duotone

  As the name suggests, duotone is an image made up of two colors. This can be two shades of the same color, or two contrasting colors. The technique that was once a print staple has found new life online. Thanks to Spotify, duotone is growing in popularity almost every day.

  Create an Atmosphere

  Duotones allows you to inject any image with the emotional attributes of any color. Remember, that different colors evoke different emotions. Soft and modest combination of colors is able to create a serious atmosphere. For example, in Holm Marcher & Co example every detail tries to contribute to the businesslike atmosphere, and background images are no exception.

  

  While a combination of bright colors is able to create a sense of happiness.The main visual for New Deal Design is striking thanks to a bold color choice. They create friendly atmosphere and set a positive mood.

  

  Increase Readability

  Duotone is able to give the text plenty of contrast. It adjusts color variations in an image so that text can be placed using a single color almost anywhere on the image.

  

  3. Gradients

  Gradients have made their way back into GUIs, this time using high-contrast complementary colors. Modern gradients might include multiple colors, radiate from the center, come from a corner or fall horizontally.

  Create a Modern Look

  Gradients made a comeback and breathe new life into the bright color trend. Paired with flat color palette they can evoke feelings of modernism. With only one color, Zample uses a gradient effect on its background without falling into dull tones.

  

  By using one of the bright, saturated colors associated with Material Design, you can evoke feelings of modernism.

  Make Layout Easy on the Eyes

  Gradients can improve visual communication. The transition from orange to pink in Symodd’s example below gives depth and contrast to the interface, and creates some eye-catching visual effects. The shift from light to dark follows natural human eye scanning patterns that move from the top left of the page to the bottom right.

  

  Symodd’s homepage features a full gradient background from orange to pink. It’s a subtle gradient as the two hues aren’t too different from each other making this easy on the eyes.

  Use it as an Accent

  While gradient is often used as backgrounds for pages, they can work in smaller places as well. Consider using gradients as an accent in the navigation, for secondary images or for specific types of content. What’s nice about smaller areas of gradient is that you have more freedom to play with this technique. And when used in smaller spaces, it can be visually interesting to play with multiple color pairs, just like Bloomberg did in example below.

  

  Bloomberg uses gradient for the ticker Latest News.

  4. Overlays

  Overlaying is filtering an image through a colored “lens”. Images with color overlays have been a popular design choice for a long time because it’s fairly easy to create this effect: you simply cover an image or video with a semi-transparent colored box.

   

  Focus User Attention

  Overlaying effects can help focus users on certain design elements. However, when using a single color as an overlay, think about the degree of saturation and transparency of the color. Heavy color combinations (less transparency and more saturation) put more focus on the color itself:

  

   

  Color overlay used by Outlines puts more focus on the image

  Conclusion

  It’s hard to find a design technique that’s more fun to play with than color. Color effects can be dramatic, impressive and even serene. Don’t be afraid to go outside your comfort zone when it comes to working with colors. Whether you are a fan of bright, bold hues or prefer a more minimalist black and white, the one thing you need to remember: there are no wrong colors, what matters most is how you use them.

  100 Professional, Print-Ready Event Flyers – only $9!

  Source

• What’s New for Designers, June 2017

  Posted:Mon, 19 Jun 2017 10:45:44 +0000

  There’s a mix of function and fun in new design and development tools this month. From adding emojis to links, to fonts that wow, to CSS tricks, there’s a little something for everyone in this collection. Plus, almost everything on the list this month is free, except for a couple typefaces and tools. They’re sure to be useful to designers and developers, from beginners to experts.

  If we’ve missed something that you think should have been on the list, let us know in the comments. And if you know of a new app or resource that should be featured next month, tweet it to @carriecousins to be considered!

  Vectr

  Vectr is a free graphics tool that lets users create vector elements online (or using the desktop tool). Use it for logos, website mockups, presentations or print design needs for anything that requires a scalable image. The tool syncs between online and desktop versions to help you pick up projects from anywhere. Plus, Vectr includes collaboration tools so you can design and edit with others in real-time.

  

  Data Gif Maker

  Google’s new project allows you to create an easy gif comparing two elements by filling out a simple form. Pick the content, add data points and choose a quick color scheme and you have a highly visual data element to embed in web projects.

  

  Emojify

  Add an emoji option to web links with this nifty link shortener. It makes tough URLs easy to manage and is a fun element to add to social media link share posts.

  

  Authentiq

  Add multi-factor and authentication that doesn’t require passwords to your website with this tool. Authentiq Connect lets users decide when to step up their security, and whether to use a second factor, or go passwordless. It is compatible with OAuth 2.0 and OpenID Connect.

  

  Better Font Finder

  Did you ever wish that you could find the perfect set of Google Fonts by grouping them visually? This tool does just that. Using filters and character types, the project allows you to see groups of options with similar characteristics so that you don’t get stuck browsing for hours on end.

  

  Minimalist Phone Mockups

  The free phone mockup includes Sketch and Photoshop versions to help showcase design projects. It comes with an oversized (6,962 by 4,350 pixel) canvas with changeable colors for the background or devices.

  

  Gradient Buttons

  For designers that are sick of flat-style buttons, Colorion’s Gradient Buttons are the solution. The gallery of buttons comes with a variety of graduated options—single and multi-color—with one-click CSS for use in website projects. You can ever search by color to find something that will match your palette in a jiffy.

  

  T-Scroll

  The reveal-on library contains elements with easy animations and options that have a variety of applications. The library uses ES6 rather than jQuery.

  

  OMG-IMG

  Insert icons directly into your HTML with code. It’s super simple: Just insert the tag and the Icons8 tool will find a matching icon and generate it in the right style, size and color.

  

  Buttercup

  Buttercup is a free and open source password manager for Windows, Mac and Linux. (You can also add it to Firefox.)

  

  Word Counter

  Word Counter calculates the number of characters, words, sentences, paragraphs or pages in real time. Just type in the box or paste type from somewhere else to get stats immediately. It can also be used to track text length against common web standards such as Twitter’s character count, Google’s meta description and Facebook’s average display length.

  

  Trendy CSS Text Shadows

  More design projects are getting away from flat styles with funky touches, such as the bold shadows featured in the Trendy CSS Text Shadows project. The collection of long text shadows includes font, color swatches and the CSS to use the concepts in your projects. Just scroll for bold headline inspiration.

  

  Docsify

  This tool is a documentation site generator made with no statically built HTML files. It is simple and lightweight and includes a smart full-text search plugin. It works with multiple themes.

  

  Harmony UI Kit

  The Harmony UI Kit is a Sketch tool that includes geolocation-based tools for mobile application design. The kit is for projects that use mapping with clean elements in a modern, material design inspired style with 10 iOS ready core screens in vector format.

  

  CSS Doodle

  The tool for Chrome and Safari generates a grid of divs painted by its own content. All you have to do is copy the copy for your website and the components are just like any other HTML elements and can be styled or controlled using CSS.

  

  CSS Neon Text

  Add an animated neon effect to your type with this pen.

  

  Framer Design

  Framer Design is a tool built to help create interaction projects. It’s billed as a “smart graphics” tool and code editor in one. The cloud-based tool allows users to do everything in a shareable workspace that’s made for working in teams.

  

  MakersMusic

  Tired of the same old playlists when working? Makers Music curates tunes just for designers and developers with new playlists each week.

  

  Cymbria

  Cymbria is a rough-style or rounded sans serif typeface. The free version includes six weights and has a fun, vintage feel.

  

  Idler Pro

  Idler Pro is an upgraded, refined, and greatly expanded version of the layered type family, Idler (2011). The Idler system is meant for big, bold headlines and allows the user to layer the various “weights” to create colorful, three-dimensional looks. It has a number of weights and a great collection of accented characters.

  

  Metrosant

  Metrosant is a geometric typeface – a quite trendy option – that’s bold and easy to read. It includes a full character set and plenty of additional glyphs.

  

  Miller Salt/Summer Paradise

  This pair of handwritten fonts have a brush style look that can work great for headline or display purposes. Miller Salt has a bold almost cursive style and Summer Paradise is more of a modern handwriting option. The font pair is a freebie with a Pixelbuddha subscription.

  

  Moare

  Moare is a decorative, fingerprint style typeface. It includes an upper- and lowercase character set and has a light feel.

  

  Montecantini

  Montecantini has a distinct old-school travel style look and feel. It could be a great display option for elegant applications.

  

  Quiet Streets

  Quite Streets is reminiscent of old movie posters with a sleek feel. It includes upper- and lowercase characters and numerals. The slab style includes alternating thick and thin strokes and is a nice display option.

  

  Wavehaus 1.005

  Wavehaus is a geometric sans serif typeface with multiple weights and upper-and lowercase character sets. It also includes numerals and common punctuation. It is easy to read and has a modern feel.

  

  100 Professional, Print-Ready Event Flyers – only $9!

  Source

• Popular Design News of the Week: June 12, 2017 – June 18, 2017

  Posted:Sun, 18 Jun 2017 10:45:39 +0000

  Every week users submit a lot of interesting stuff on our sister site Webdesigner News, highlighting great content from around the web that can be of interest to web designers. 

  The best way to keep track of all the great stories and news being posted is simply to check out the Webdesigner News site, however, in case you missed some here’s a quick and useful compilation of the most popular designer news that we curated from the past week.

  Note that this is only a very small selection of the links that were posted, so don’t miss out and subscribe to our newsletter and follow the site daily for all the news.

  RIP Web Forms – You will not Be Missed!

  

   

  10 Common Mistakes When You Create Website Buttons

  

   

  How 17 Lines of Code Improved Shopify.com Loading by 50%

  

   

  New & Improved Google Design

  

   

  The Web Designer’s Guide to Flexbox

  

   

  The App that Does Nothing is What your Smartphone Needs

  

   

  Nutella Uses an Algorithm to Design Millions of Unique Jars

  

   

  AmplitudeJS: The HTML5 Audio Player for the Modern Era

  

   

  iOS 11 Preview

  

   

  A Better Web Launch Checklist

  

   

  Houzz: A UX Case Study

  

   

  2017 Logo Trends

  

   

  10 Basic Principles of Visual Design

  

   

  Programming is not a Craft

  

   

  Crello: A Graphic Design Tool for Everyone

  

   

  Why Green Branding Needs to Die

  

   

  How to Create the Perfect Design Resumé

  

   

  Topol.io: Beautiful HTML E-mails Easily

  

   

  Why Scalable UX is the Next Revolution

  

   

  This Tool Reveals What WordPress Plugins & Tools Other Sites Use

  

   

  Binky – A Fake Social Media App that’s Better than the Real Thing

  

   

  The Perfect Paragraph – A Web Typography Learning Game

  

   

  25 Sites to Download Free Stock Images in 2017

  

   

  Results of the Ultimate CSS Survey 2017

  

   

  An Interesting Day 2017

  

   

  Want more? No problem! Keep track of top design news from around the web with Webdesigner News.

  100 Professional, Print-Ready Event Flyers – only $9!

  Source

• Comics of the Week #394

  Posted:Sat, 17 Jun 2017 10:28:23 +0000

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

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

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

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

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

  Job security, but…

  

  Designer simulator

  

   

  Insecure designer

  

   

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

  100 Professional, Print-Ready Event Flyers – only $9!

  Source

• Twitter Launches a Redesign

  Posted:Fri, 16 Jun 2017 12:45:13 +0000

  Twitter is launching a redesign of its iOS, Android, TweetDeck and Twitter Lite apps. The redesign is intended to make the service “feel lighter, faster, and easier to use” and features a number of changes that mean an update is pending for twitter.com too.

  As with any redesign, there’s some good, some bad, and some probably-ok-once-we-get-used-to-it.

  The new design is expected to start appearing worldwide over the coming days and weeks, although much of the update seems to be aimed at bringing iOS in line with Android meaning iOS users will likely notice the changes first.

  Twitter’s biggest UI fail still hasn’t been fixed

  Like Twitter for Android, Twitter for iOS now puts all your settings, profile, and access to additional accounts in one place, keeping the main UI focussed on the primary functions. Links now open in Safari viewer, so if you’re signed in to other services, your login will be carried over.

  iOS and Android versions now update live, so you can see your retweets, likes, and replies ticking up without refreshing.

  Typography has been refined across the board for greater consistency and bolder headlines. There are also improved accessibility options, including increased color contrast.

  

  Twitter’s biggest UI fail still hasn’t been fixed: Despite the fact that the majority of users tweet in a language that’s read top-to-bottom, the Twitter feed is still laid out chronologically from bottom-to-top. This means that new tweets are added above older tweets. The logic is then overturned by replies, which appear below the original tweet. This results in a series of awkward saccades as our eyes—and thumbs—flick up and down the feed.

  The most notable changes are the new icon set. The home icon now looks a lot less like a birdhouse; the notifications icon has lost its angle—and its character with it; the direct message icon has been distorted, it now fits the scale of the other icons, but consequently looks less like an envelope. These icons were already really well designed, and probably should have been retained.

  However, there is a huge positive change to the reply icon: the previous version was commonly misinterpreted as a back arrow, the new version is a speech bubble, indicating a conversation. Not only does this clarify the function, but it redefines the concept from ‘reply’ to ‘discuss’—a far more open and egalitarian action.

  

  100 Professional, Print-Ready Event Flyers – only $9!

  Source

• 4 Tips for Building a Standout Creative Résumé

  Posted:Fri, 16 Jun 2017 10:45:26 +0000

  Most of us are familiar with the saying, “Show, don’t tell.” For those of us working in creative industries, this should be your mantra when building up your résumé. With the rise of the gig-economy and freelance job platforms, which are now home to an abundance of talented freelance designers, illustrators and more, it’s essential when looking for work that you build a stand-out résumé.

  Before you start filling up the pages with every job you’ve ever had, it’s important to consider the various factors that make a great résumé. Whether you’re a writer, designer, or content marketer, a good résumé has to showcase your best work in a professional, inventive manner. For creative types, a great résumé is like telling a story. So before you hit the ground running, here are 4 tips for building a standout creative résumé that will help you along the way.

  1. Invest in a Portfolio

  When it comes to applying for jobs and projects within the creative industries, having a portfolio is a must. This is especially important if your work is primarily visual. For example, even if they already have a perfect résumé, the majority of designers today compliment their CV’s with an online portfolio. And, thanks to the likes of user-friendly platforms like Squarespace, Wix, and WordPress, it’s pretty easy these days to get your site up and running in no time.

  No matter your expertise, it’s vital that your portfolio makes a great first impression. Ensuring that your portfolio is user-friendly, will allow potential clients and employers to get a sense of your skills right off the bat. So when you are ready to send over your résumé, remember to include a link to your portfolio in the contact information.

  2. Do Not Show Off Just Yet

  While developing your résumé, it’s important to not show off too much. Save the bulk of your creative energy for when you actually get the job. Striking a balance between eye-catching material and a professional format is key when still in the application process. If you are a designer or an illustrator you may certainly be tempted to jazz up your CV, but in most cases, it’s better to keep it simple. If your work is dependent on visual content, make sure you stick to just a few examples of your best work.

  Again, having a digital portfolio will be where you’ll place the bulk of your visual work, letting your CV act as a foundation.

  3. Content is Key

  You don’t have to be a professional writer to ensure that your résumé has great content. If you struggle with expressing yourself through the written word, you can start off by making a list of the most important elements of the work you want to add to your résumé. If you have exhibited work for example or contributed to multiple freelance projects, make sure to stay bare bones. There is no need to write an essay about each project, even if it might be tempting. Better to stick with the “who, what, when, where, and if relevant, maybe give a couple of sentences highlighting “why”.

  After you’ve finished writing, don’t forget to proofread your CV! It may sound obvious, but a surprising amount of résumés are still submitted with typos. It’s always a good idea to print out your résumé, read it aloud, and make sure you cross your t’s and dot your i’s.

  4. Tell a Story

  There was a time when résumés were expected to follow strict guidelines, asking potential employees to give information about education, previous work experience, and additional skills. But that was also a time when people had way fewer jobs during their working years. Today, especially if you’re freelancing, you may have more jobs in the last 6 months than some people will have in their entire lifetime.

  Instead of overwhelming your potential employer with superfluous details from each and every project you’ve ever worked on, focus on your more interesting work. Imagining your résumé is like telling a story, where your best work represents the milestones of your experience. Again, this is the story of your work life, so make sure it’s one that keeps your audience enthralled.

  100 Professional, Print-Ready Event Flyers – only $9!

  Source

• Supercharge Your Site With a CDN

  Posted:Thu, 15 Jun 2017 10:45:36 +0000

  As a web designer, you already know that great design is essential for a website—it’s the concept of design you trust, unless a website looks absolutely amazing, it’s going to be hard for new visitors to trust that site. That’s how essential great design is to a website.

  However, there’s another essential part of having a trustworthy website, the positive UX which comes with a fast, snappy website.

  After great design, speed is one of the most important factors which contribute to the success of a website.

  But Why is Speed so Important?

  The importance of a fast website has been researched over and over again.

  Sites which are not fast enough create a negative perception, with the actual loading time of a site significantly affecting the conversion rates of websites.

  As the loading time gets higher and higher, the conversion rate goes down significantly, with the optimum conversion rate happening at a page load time of 2.4 seconds.

  What is a CDN and How Can it Help Speed Up My Sites?

  Whilst there are many benefits to using a CDN which we will discuss shortly, there is one basic premise of how a CDN makes your site faster.

  Simply put, a CDN is much better equipped as a network to handle the traffic of a website than most hosting services.

  Shared hosting is typically optimized towards delivering a stable environment where your website can run PHP or other popular hosting environments.

  It’s not geared towards optimizing for speed most times.

  On the other hand, a CDN’s primary aim, and actual infrastructure setup is geared towards helping deliver a lightning fast website.

  But how does a CDN actually speed up my site?

  How a CDN’s Infrastructure Speeds Up Your Site

  There are a few reasons why your website could be slow:

  • your shared hosting server is overwhelmed and responds slowly;
  • the images and content of your site are large and take a lot of time to download;
  • your website is using too many different scripts and images which are not optimized for a fast loading website;
  • the server location of your site is in a geographically different region than the visitors of your website.

  There are other reasons, but these are the major ones.

  You can address each and every one of these individually, we’ll focus mostly on the latter two here…

  Your Shared Hosting Server is Overwhelmed and Responds Slowly

  Shared hosting servers are not meant to be fast. They are meant to be affordable.

  The economics of shared hosting means that to drive down the costs, the number of different websites hosted on the same server is significantly high.

  That means, each time somebody visits your website, the hosting server is competing for resources with ALL of the websites hosted on the site, which means it typically takes more than a second to start serving your website.

  Now, when we’re talking about making a website, a penalty of a second before we start doing any optimizations is a terrible way to start.

  So a couple of recommendations:

  1. If your website is hosted with WordPress, you need to find a reliable WordPress hosting company, with great reviews, which is not cheap.
  2. Opt for a higher payment plan, ideally a VPS, such that your site will have enough resources and won’t be competing with hundreds of other sites

  The Images of Your Site are Large

  One of the largest impacts your site can have in terms of loading time, typically comes from the images hosted on your site.

  You’ll find plenty of blogs touting the value of using images in your website and blog, and of course, this is excellent advice.

  Images are necessary to break up large chunks of text and make for better readability.

  Who also hasn’t heard of the phrase: “An image is worth a thousand words”

  Yes, images are vital to the success of your site.

  Yet, they have a drawback.

  Unoptimized images can kill the loading time of your site.

  Now, in an ideal world, we’d take the recommended approach of saving each file in a web-friendly format, optimizing large images and compressing them to a size which is acceptable without losing any of the quality.

  Yet in reality, we simply don’t have the time or the inclination to go through an optimization process for each and every image.

  But, there is a solution. Automation.

  Once, again, CDNs come to the rescue. Image compression and optimization is typically a built-in feature of a CDN.

  In essence, you go about your business of creating a great-looking website with awesome imagery, the CDN will handle the compression and optimization of the images.

  Your Website Uses a Lot of Scripts

  This is another speed killer.

  When we are just starting out as web designers, we enjoy discovering new plugins and testing them out and installing them on our website, never realising what the impact of the plugins will be.

  Even established web designers tend to fall into this trap. Using tens of plugins to make sure the functionality required by the customer is delivered has its side effects.

  In reality, each plugin you install on your site adds Javascript files, CSS files and requires more performance from your site.

  You’ll see that in the form of a lot of requests on performance testing sites and a very-long loading time.

  Again, a few recommendations:

  1. Keep your site as lean as possible from plugins, less is more
  2. Combine, compress and minify scripts
  3. Enable HTTP/2

  Whilst a CDN won’t help you decide which plugins to keep and which plugins to dump, a CDN is able to actually perform on-the-fly compression and minification of scripts, to make the total size of the content of your site smaller, and thus faster.

  The third and very important recommendation is the setting of HTTP/2 – we’re not going to go into much detail, because we’ve already discussed HTTP/2 extensively, both on this site and elsewhere.

  HTTP/2 has been written specifically to optimize the loading time of websites, particularly those websites which have a lot of different resources to serve.

  Most CDN services allow you to quickly and easily enable HTTP/2 on your website giving your site an instant speed boost.

  Even if you’ve done all of the above optimizations, there’s still one thing which can totally kill the speed of your website.

  How do you fix that?

  The Location of Your Website Server

  Ok, if you’ve followed our advice your website should now be significantly faster than it was before.

  But, there is one thing which can kill your website’s loading speed.

  If your website is aimed at a local audience, your solution is simple: choose a good hosting service which is as physically close to your target location as possible.

  However, this is more difficult if your if your website is catering for an international audience.

  You simply can’t chose a server location which is physically close to all of your website visitors.

  You can do the next best thing and host in the visitor location which is the most popular, but there’s a 2nd, more effective solution.

  A CDN service is aimed specifically is fixing this problem.

  A CDN’s infrastructure is designed specifically to fix the problem which we have just described.

  CDN’s have a network of hundreds of servers in tens of locations around the globe. These servers called edge or caching servers will replicate your images and static resources such as Javascript and CSS files to these locations.

  When a user then hits your site, the heavy resources will get served from a location which is as physically close as possible to your visitor.

  This reduces significantly the problem of distance and gives your site a very significant advantage in terms of loading speed.

  How to Setup a Free CDN

  The great thing about using a CDN, is that you can easily boost the speed of your website without having to pay anything extra, particular if your website is still growing.

  Most CDN services offer a free plan, which will provide the essential caching functionality we discussed above. Typically, besides content optimization, you’ll also got a boost in your website’s security too, through the security mechanisms implemented by CDNs.

  As your website grows and the needs of the site grow, you’ll then be able to upgrade to a plan which suits your needs better.

  There are a couple of ways of setting up a CDN, this mostly depends on the actual CDN you will be using.

  Install a CDN Plugin

  The first way of setting up a CDN is by using a CDN plugin. When setting up your CDN, you will get a URL which will be the new location of the static images of your site.

  The CDN plugin will rewrite the URL of static resources such that they will be served from the CDN.

  https://www.example.com/images/logo-default.jpg

  is now rewritten as

  https://cdn.example.com/images/logo-default.jpg

  You’ll need to perform a few slight changes to the DNS entries of your site, such that cdn.example.com will resolve as the URL provided by your CDN.

  You can use the CDN Enabler plugin if you’re using URL rewriting service such as KeyCDN (the authors of this plugin),  MaxCDN or Incapsula.

  Once you’ve installed this plugin, the only thing you’ll need to do is enter the URL provided by your CDN service, and you should be good to go.

  Install a CDN as a Reverse Proxy

  Another, better way of installing a CDN is using a reverse proxy.

  This also requires minor changes to your DNS, which are typically specific to the CDN you will be installing.

  This implementation is advantageous because it removes a significant load from hitting your server directly.

  Are You Ready to Take Your Website to the Next Speed Level?

  As we’ve seen above, installing a CDN is not as prohibitive in terms of price as one may think. Besides that, the performance boost given to your site will be a significant UX improvement.

  If you’re looking to speed up your site quickly, a CDN is a must-have.

  100 Professional, Print-Ready Event Flyers – 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.