Wednesday, 30 November 2016

15+ Free Christmas Vector Graphics For Your Downloading Pleasure

15+ Free Christmas Vector Graphics For Your Downloading Pleasure

It's the Most Wonderful Time of the Year! Why not celebrate with some of our favorite free Christmas vectors from around the web? We've hand-selected some of the most festive and high-quality free vectors around...

The post 15+ Free Christmas Vector Graphics For Your Downloading Pleasure appeared first on Vandelay Design.

from Vandelay Design

How to Create a Rollover Effect in Adobe Muse

Muse For You - How to Add a Rollover Effect - Adobe Muse CC

Add a Rollover Effect to your Adobe Muse website. No Coding Skills Required.

 Muse For You - Adobe Muse CC Adobe Muse CC Logo

Subtle animations and rollovers can really make a website more dynamic. Whether you are showcasing a product or giving more information about an image, rollovers can be very effective.

Adobe Muse makes it really easy to create a rollover effect via their states panel. The states panel consists of four different states. They are:

  • Normal
  • Rollover
  • Mouse Down
  • Active

For each of the states you can change the color, border, and image for the state. This allows for a unique rollover effect when applying to images. Also with the later versions of Adobe Muse the transition dialog was introduced for more fluid rollovers and transitions. So rather than a quick change when rolling over the image, the image can now fade in and out of another image.

Adobe Muse CC also integrates seamlessly with Adobe Photoshop CC so you can take different layers in Photoshop and apply them to the different states via the states panel. An example of this would be taking one layer in Photoshop and applying it to the normal state, and then taking another layer in the same Photoshop file and applying it to the rollover state. This will give you a nice rollover effect in Adobe Muse all from the same Photoshop file.

Via the Adobe Creative Cloud you can add vectors from Adobe Illustrator CC to your Creative Cloud library. You can then drag and drop those vector images as SVG files into Adobe Muse. Placing these images in rectangles allows you to create rollover states in Adobe Muse.


Images being prepared Adobe Illustrator CC

Muse For You - How to Add a Rollover Effect - Adobe Muse CC

Images added to different states in Adobe Muse CC

The steps are as follows:

1. Create a rectangle in Adobe Muse.

2 . Fill the rectangle with an image for the normal state. The image can be added by going to the “Fill” option in the upper toolbar and then clicking on “Add Image.” You can select any image or a Photoshop file. If it is a Photoshop file you can select which layer you would like to add for the image. You can also select the fitting and position for the image within the “Fill” section.

3. With the rectangle selected go to the “States Panel” in the upper left hand corner of the Adobe Muse interface. Here click on “Normal” and select “Rollover.” You are now on the rollover state for the rectangle.

4. Fill the rectangle with an image or Photoshop file for the rollover state.

5. You can also add a “Mouse Down” state or an “Active State.”

6. Go to File > Preview Page in Browser to test and preview the rollover effect.

7. Done.

In the video above I go over how to create rollover states in Adobe Muse CC using Adobe Photoshop CC and Adobe Illustrator CC.

For more video tutorials and widgets for Adobe Muse visit Happy Musing :).

Read More at How to Create a Rollover Effect in Adobe Muse

from Web Design Ledger

Tuesday, 29 November 2016

How Web Designers Can Handle Adblock Users

How Web Designers Can Handle Adblock Users

The dramatic rise of adblockers continues to climb with no end in sight. Users have lost trust in many ad agencies based on tracking, autoplay videos, and malicious banners. Unfortunately, web publishers are often the ones to suffer from the misdoings of ad networks. And even though many websites do not run these kinds of […]

The post How Web Designers Can Handle Adblock Users appeared first on Vandelay Design.

from Vandelay Design

How Web Hosting Can Impact Page Load Speed

web hosting page load

Page load speed is a very important factor when it comes to the overall success of a business’s website or blog. And it is something that should not be taken lightly. It can affect almost everything; from your conversions, SEO and rankings, time on your site, bounce rate, and the entire user experience. If you dip in all of those areas, this could easily result in loss of revenue and customers. Today we will explore just how much page speed is impacted by certain web hosts and why you might want to reconsider using a cheap shared host.

Speed is a Ranking Factor

Google announced way back in 2010 that page load speed is a ranking factor. What that means is that sites with a faster page load speed could in turn rank higher in search engine results pages (SERPs). In Google’s Site Performance for Webmasters video, Developer Programs Tech Lead Maile Ohye, states that “two seconds is the threshold for e-commerce website acceptability. At Google, we aim for under a half-second.”

And fast forward to today and we now have Google launching the mobile-first index. This means that the ranking factor is also heavily looking at mobile optimization. You can almost guarantee that whatever weight they placed on the speed ranking factor before that it will be increasing. So you need to ensure that you have a fast responsive loading site, along with possibly an AMP implementation.

You can use free tools like Google PageSpeed Insights or Pingdom to test your website’s page load speed. They will inform you how fast your website is and offer suggestions on how to improve it, such as leveraging browser caching or minimizing redirects.

pingdom speed test

Page Load Speed Can Affect Conversions

A  slow page load speed can also affect your conversions and sales. For an e-commerce site, the last thing you need is to be losing revenue simply because your website is too slow. According to research from Kissmetrics,

“A 1-second delay in page response can result in a 7% reduction in conversions.”


Example: Let’s say your website loads in 3 seconds, and you have a product that sells for $200. On average you have 1000 conversions per week, equalling $200,000 in total sales. If you were to migrate to a faster web host and bring the page load speed down to 2 seconds, at 7%, that means you could potentially increase your weekly profits by over $14,000 a week!

Kyle Rush from the 2011 Obama for America campaign site showed through A/B testing that a 3-second page time reduction (from 5 seconds to 2 seconds) improved donations by 14%, resulting in an increase of over $34 million in contributions.

There have been countless studies proving that speed does affect your conversion rates.

Time On Site / Dwell Time

In Google Analytics, average time on site is a type of visitor report that provides data on the amount of time (in minutes or seconds) visitors have spent on your website. This is sometimes also referred to as “average session duration” or “dwell time.” The higher this number, generally the better.

average time on site

A couple ways to keep your time on site higher is to write better and more engaging content that will keep the visitor on your site. Another way to structure your site in an organized fashion so people kind find what they are looking for. But speed is definitely a huge factor in average time on site as well. If a visitor gets frustrated with how fast it is to navigate your site they will most likely leave immediately. Ensure not only your homepage is fast, but your entire site.

Bounce Rate

Bounce Rate is the percentage of single-page sessions (i.e. sessions in which the person left your site from the entrance page without interacting with the page). According to another study by Kissmetrics, a whopping 40% of people abandon a website that takes more than 3 seconds to load!

Here are some typical bounce rate averages according to types of content and industries:

  • 40-60% Content websites
  • 30-50% Lead generation sites
  • 70-98% Blogs
  • 20-40% Retail sites
  • 10-30% Service sites
  • 70-90% Landing pages

One of the easiest ways to keep people from hitting that back button in their browser is to simply ensure that it loads fast! This can include even diving into more advanced optimization methods such as improving your TTFB and initial HTTP request. A content delivery network (CDN) is a great way to improve TTFB as it will help cache your static assets closer to the visitor. But one of the primary factors in this is the configuration of your web host’s servers.

How Premium Hosts Stack Up Against Shared Hosts

There are countless ways to improve page load speed on your website, such as:

  1. Using a CDN to cache content closer to the user
  2. Improving TTFB
  3. Optimizing images
  4. Lazy loading content
  5. Caching
  6. Being smart with web fonts
  7. Optimize CSS code and delivery

But the number one factor that is going to drive the overall load times of your pages down is choosing a fast web hosting provider. And to be honest, it is one of the easiest. While it is great to save money, hosting is one area in which you should be very careful as choosing a bad provider could actually affect your revenue going forward. We recommend looking at hosting as an investment in your business/website and therefore skip the shared hosting route and go for a premium or managed host. You will be much happier in the long run.

Premium web hosts typically use a much faster technology stack based on the latest and greatest in the industry. Some things for 2017 that you will want to make sure they have are PHP 7 or HHVM, NGINX, MariaDB, HTTP/2, and premium DNS options. This combination has been shown to be very fast when it comes to loading any type of website, from a static site, to Drupal, and of course WordPress.

Speed Tests

To show you just how much web hosts differ when it comes to performance, we decided to run a few tests. Here is a comparison of Kinsta, a high-performance managed WordPress host, vs a 3rd party shared host. Both are configured in the exact same way and are approximately the same distance from Pingdom’s testing server.

Kinsta Speed Test

We did a fresh install of WordPress on Kinsta, nothing is configured other than SSL. It is running the default 2016 theme. We ran 5 speed tests on Pingdom and took the average. As you can see the fresh install clocked in at 386 ms, which according to Pingdom is 98% faster than all other tested sites.

kinsta fresh install page load speed

3rd Party Speed Test on Shared Host

We then replicated the exact same setup on a 3rd party shared host. We did a fresh install of WordPress and configured SSL. It was also setup with the default 2016 theme. We then ran 5-speed tests on Pingdom and took the average. As you can see the fresh install clocked in at 1.00 second.

shared host fresh install speed test

So in this scenario the premium host, Kinsta, had 61.4% faster page load speeds! Why is there such a large difference? Here are a few reasons:


Kinsta uses NGINX whereas the 3rd party shared host was using Apache. NGINX has been proven to be lightweight and fast. Chris Lea said, “Apache is like Microsoft Word. It has a million options but you only need six. NGINX does those six things, and it does five of them 50 times faster than Apache.”

Here is a quick look at the top million busiest websites (see below). As you can see in the trending graph, Apache is losing market share while NGINX is rapidly growing. Large websites like upwork, themeforest,,, and dropbox all use NGINX.

websites using nginx

Img src: NGINX vs Apache

Server-Level Caching

Kinsta, like many premium WordPress hosts, use server-level full page and object caching to deliver pages lightning fast. The shared host we were using had no such technology in place. We could fiddle with caching plugins but then you should be looking at time involved hassling with this. With premium hosts it is a lot easier to just install and go! Joe from Human Made did a great comparison of the Batcache caching plugin vs Varnish, a server-level caching approach. As you can see under heavy loads server-level caching won by a mile!

server level caching

Premium DNS

Kinsta had Amazon Route 53, which is a premium DNS provider. The shared host was simply using their free included DNS. DNS works like a phonebook for the internet, as it is a mapping of your domain to an IP address. There are slower and faster DNS providers out there. Amazon of course is one of the faster ones since they have an enormous infrastructure and network. Faster DNS lookup times can further increase the speed of your site.

And don’t forget DNS Doomsday, besides performance, a premium DNS provider is also important when it comes to reliability and uptime for your site.


HTTP/2 is a new protocol designed to speed up connections with better multiplexing, parallelism, HPACK compression with Huffman encoding, the ALPN extension, and server push. Because of browser support, SSL/TLS is required to utilize HTTP/2.

The performance of HTTP/2 is a lot better than that of HTTP/1.1. For example, with server push capability HTTP/2 allows servers to respond with a page’s full contents other than the information in the browser’s cache. Efficient compression of HTTP header files minimizes protocol overhead to improve performance with each browser request and server response.


In our tests above, Kinsta was utilizing HTTP/2 on their servers which the shared hosting provider was not. You can easily see this by checking the header requests in Chrome Devtools network panel (as seen below).

HTTP/2 Supported (Kinsta)

http/2 kinsta

HTTP/2 Not Supported – Still Running over HTTP/1.1 (Shared host)

http/2 not supported

HTTP/2 is simply a must now for secure connections!

Overcrowding Issue

Another issue with shared hosting is that they overcrowd their servers. Typically shared hosts don’t make any money on actual hosting customers, due to the overhead of support. For example, the shared hosting plan being tested above only cost us $10 a year!

crowded servers

They make most of their revenue on upsells and 3rd party add-ons such as domain registrations, SSL certificates, etc. Due to the fact they have very low margins they will tend to put as many customers on the same servers as they can until it starts to slow down. You can guarantee that at some point your site will be affected. And unless you have a performance monitoring tool running you will never know at what time it happens.

With premium hosts they normally go a different route. For example, with Kinsta above, they use Linux containers (LXC), and LXD to orchestrate them, on top of Google Cloud Platform which enables them to completely isolate each WordPress site. This is much more secure and when it comes to performance the Google Compute engines allow them to sale the sites automatically. The overcrowding and scaling issue is simply not an issue at all.


As you can see, page load speed is super important, as it can affect everything from your SEO, time on site, bounce rate, and conversions. Choosing a premium or managed hosting provider can be one of the smartest decisions you make for your business or blog; as it plays one of the biggest roles in improving your page load speeds. The old saying “You get what you pay for…” comes into play here. Think of hosting as an investment and choose wisely, as they greatly differ in terms of performance and technologies being offered.

Read More at How Web Hosting Can Impact Page Load Speed

from Web Design Ledger

Monday, 28 November 2016

Need Customized Shirts? The Best Brands for Designers

Need Customized Shirts? The Best Brands for Designers

T-shirts are extremely versatile; you can dress them up, and you can dress them down. Most importantly, they're one of the simplest ways to express yourself. A graphic tee can speak volumes about your personality, so if you're going to wear one, it's important to choose one that's high quality with vibrant images. You don't want to look sloppy!

If you can't find one out in the wild that fits your needs, however, you can simply create your own with one of the many T-shirt printing services available. But with so many options, which one should you choose? Look no further—we've got suggestions ranked below for the 10 best online T-shirt designers. Whether you're looking to make some extra pocket cash or need a cool new shirt, you're certain to find what you need...

The post Need Customized Shirts? The Best Brands for Designers appeared first on Vandelay Design.

from Vandelay Design

5 Things You Need to Know About WeTransfer’s Redesign

wetransfer redesign

The filesharing company WeTransfer has pulled out probably the best redesign we’ve seen this year.
To be completely honest, I’m a bit buyest when I say that, because WeTransfer is a product that amazes me through its simplicity.

WeTransfer is the kind of product that embraced simplicity at its core and built the whole user experience with the KISS rule in mind. (Keep It Simple Stupid) Sometimes, all it takes to disrupt an industry it’s simplicity and delivering a straightforward experience to the users. Creating a clutter free design is definitely a difficult process. It takes courage and a very good understanding of your audience to be able to sacrifice features, visual elements or conventional design “must do’s” to the detriment of what’s relevant to your user.
Companies like Teamweek, Medium and of course, WeTransfer, are leveraging their simple design for creating a tool tremendously accessible to the masses.

What WeTransfer did with its new redesign is to push the limits of simplicity even further and created an utterly intuitive file sharing platform that is suited both for their Plus customers and for the average one-time user.

I’ve asked WeTransfer’s Senior Designer, Thomas Schrijer, for a reason why the redesign makes WeTranfer the go-to platform when it comes to filesharing, and he gave me five. Enjoy.

1. We Optimized the transfer window.

Our biggest challenge was improving the iconic transfer window. We had a few things that our users (and ourselves) wanted improved. There was no good overview when you added a lot of files, multiple email addresses or a long message. We made the behavior within the box a lot smarter. The box will now grow to fit all the contents. When you write a long message for example, the field will expand so the overview remains.  wetransfer redesign

2. Clear navigation

We made massive improvements on the navigation side of things. In the previous version we had two labels attached to the left side of the box, which barely anyone noticed. Now we’ve put three main navigation items at the top right part of the screen which make it a lot easier to reach out for help, learn more about our service and manage your Plus account. All the information is presented in the panel, that covers the wallpaper. Because a piece of the wallpaper is always in sight, you’re able to go back from wherever you are. Wetransfer redesign

3. Our Plus users get way more attention on the new WeTransfer

There is now way more space to manage transfers and contacts. We’ve made a distinct section to personalize your wetransfer experience, under the label Profile. But this is just the start, we’re already thinking of ways to make our Plus users even happier. wetransfer redesgin


4. Brand refresh

With the new site also comes a new logo and identity. The focus is moving away from transferring, and towards we. We’ve collaborated with Paul van der Laan from Bold Monday to help us sharpen our ideas on the logo. Next to the logo we’ve introduced a new colour palette, updated typography and a visual language around particles.

wetransfer logo


5. Illustrations

When people interact with our service, they come across a few important moments. We’ve worked together with illustrators to mark these moments. Now when your transfer is done, you’ll get a thumbs up by a shark, or a cool pug smiling at you. We’ve added a level of emotion to our product by doing this. And it makes sense, because working with the creative community is a big part of our DNA.

wetransfer redesign



Read More at 5 Things You Need to Know About WeTransfer’s Redesign

from Web Design Ledger

Sunday, 27 November 2016

The Designer’s Guide To A Successful Rebranding Workflow

The Designer’s Guide To A Successful Rebranding Workflow

A company’s brand—or its allover feel and aesthetic—should connect with consumers in some way. Good branding should jump out and make a statement, whether it’s a text, logo, icon, mascot, or even simply the company’s name. But when rebranding a company, the creative process can get messy. You may look for ways to maintain solid branding […]

The post The Designer’s Guide To A Successful Rebranding Workflow appeared first on Vandelay Design.

from Vandelay Design

Friday, 25 November 2016

How To Draw A Diamond Heart Icon in Illustrator


In this tutorial, we’re going to learn how to draw a diamond heart icon in Adobe Illustrator.

Download Adobe Illustrator.

Read More at How To Draw A Diamond Heart Icon in Illustrator

from Web Design Ledger

40+ Beautiful Free Lightroom Presets to Enhance Your Photos

Free Lightroom Presets

Adobe Lightroom has been popular with photographers for several years, and in the past couple of years it has also increased in popularity with designers and hobbyist photographers. While Photoshop offers all kinds of possibilities for photo editing there are a few significant benefits of using Lightroom. Most significantly, Lightroom includes very useful features to help you keep your photos organized through its Library Module.

Professional photographers obviously have a large volume of photographs, so organization is critical. For designers and hobbyist photographers, its very easy to build up a large number of photos rather quickly. As you may have found, managing and organizing a growing number of photos can become quite cumbersome. Lightroom helps by allowing you to create catalogs and collections, use keywords, ratings, flags, and color labels to organize and sort your photos. While Lightroom's Develop Module is where you are likely to spend the majority of your time, the Library Module is really what separates it from Photoshop and other alternatives...

The post 40+ Beautiful Free Lightroom Presets to Enhance Your Photos appeared first on Vandelay Design.

from Vandelay Design

Thursday, 24 November 2016

45 Photoshop Editing Tutorials

45 Photoshop Editing Tutorials

Photoshop allows designers and photographers to improve photos in countless ways. Some photos are edited in a subtle way that the viewer may not even notice unless it is side-by-side with the original photo, and others are edited in more drastic ways. There are countless possibilities and multiple different ways to accomplish many things, which can make the process of learning a little bit intimidating.

The good news is that there is a tutorial for just about anything you would want to do in Photoshop, with just by following along with these tutorials you can learn some awesome techniques that will take your photography and photo editing to another level. Here you'll find a collection of 45 Photoshop editing tutorials that will help teach the art of photo editing...

The post 45 Photoshop Editing Tutorials appeared first on Vandelay Design.

from Vandelay Design

Page Loading: 4 Ways To Decrease Load Time

In the age of big data, data analytics has become a core business activity, with endless different metrics to monitor. These varied numbers help us track conversion rates by platform, measure employee performance through calling data, and determine if our content is performing to its highest potential. With so much data to sift through, it’s not surprising that some numbers, such as page load speed, slip through the cracks.

Why does something as small as page load speed matter for your business? A slow website is one of the surest ways to lose customers. Simply put, your clients aren’t going to wait around for your landing page to load.

According to Google resources, if your site takes more than 2 seconds to load, in the world of ecommerce, that’s too slow. Here’s what you can do to speed things up.

Check Your Pages

Your standard site analytics software may give you an average page load speed as part of its overall output, but don’t rely on that data alone. Instead, run your pages through a site analysis using Pingdom, Speedtest, Yslow, or one of the many other site speed testers. These sites will not only tell you how long it takes your website to load from both desktop and mobile platforms, but also make suggestions as to what you can change to make them load more quickly.

If your tests reveal that your mobile pages are especially slow, you might want to test out Google’s Accelerated Mobile Pages (AMP). AMP strips down websites to their necessities and these pages load 85% faster than standard mobile pages. Customers don’t need all the bells and whistles on a mobile page, they just need a site that functions well and quickly.


Ultimate List of HTML5 Resources for Web Designers and Developers


Boost Your Hosting

There are a lot of different options for hosting a website, and many people choose the cheapest option, a type of shared server plan. This can significantly slow down your website depending on the other sites sharing that server. To boost your page speed, switch to a dedicated server or to a virtual private server. This will help your page move much more quickly.

Weed Your Website

If you’re using a WordPress site, one common cause of slow page load times is overuse of plugins. In fact, you don’t even need to be using that many plugins for them to become a problem. Instead, the simple fact that you once installed a plugin and left it to languish somewhere in your site’s code is enough to cause your site to lag.

Take some time to uninstall old WordPress plugins that you aren’t using and to reconsider the ones you keep active. Are these actively improving your website or are they simply slowing things down? The fewer unnecessary plugins your site uses, the faster it will load.

Photo Finish

Finally, large photos are a leading cause of slow site load times, so take a look at your website’s media choices. Optimize your image formats using both PNG-8, GIF, or JPEG formats and implement GZIP compression if possible. Not all sites support GZIP, but compressing photos is a great way to maintain image quality without sacrificing space and speed.

When it comes to site load times, every millisecond counts. That’s why you should put in the time necessary to speed up your site as much as possible. As many top websites prove, it’s possible to create an effective, aesthetically pleasing site that’s also faster than the competition.

The post Page Loading: 4 Ways To Decrease Load Time appeared first on SpyreStudios.

from SpyreStudios

10 Tutorials That Can Get You Started With Sketch

Sketch app is famous for being one of the fastest growing design tools in the industry. But its fame and glory didn’t go without a few hitches. Despite being an undeniable winner on the vector design scene, it’s also infamous for making its users pay for tutorials.

The Twitter discussion, featured at SketchTalk puts some light over the myths behind this statement but the question remains – are there any good SketchApp tutorials that users can use for free?

Free Beginner Tutorials for Sketch

The users’ undisguised disappointment doesn’t mean every single SketchApp tutorial will cost you an arm and leg. In fact, there are hundreds of free tutorials that can get you started with Sketch 3. And believe me, once you get a hold of the basics, you’ll learn that your time, efforts, and eventual expenses for migrating to Sketch will be significantly outrun by the advantages of this new design software.

To provide you with a better understanding of the techniques and principles of the Sketch design environment, I’ve prepared you a list of handpicked design tutorials. They will guide you through the fundamentals of the software and aid you in completing tasks as simple as setting up your workboard or as complex as creating a whole new design project from scratch. Let’s get started.

How to Build a Pattern Library in Sketch

Tutorial link: CreativeBloq

Created by: Richard Child

What you’ll learn: 

In order to ensure your website design is consistent and easy to change, you need to know how to create your pattern library in Sketch. The pattern library is a collection of design elements, like navigation, headings, forms, etc. that can be reused to design pages. When changing the qualities of repeatable components of your design in other conventional design software you’ll need to make separate changes to each object. What Sketch’s Symbols feature does is allow you to create a library of reusable elements that you can change simultaneously. The designer Richard Child will guide you through the fundaments of working with the Sketch pattern library.

Draw in Sketch With a Limited Set of Shapes

Sketch tutorial

Tutorial link: Medium

Created by: Yuki Erqiudao

One thing that makes vector design software so incredibly easy to use is the freedom it provides users in terms of content creation methods. Yuki Erqiudao, designer at Mind Labs shared his insights on creating illustrations in Sketch only with the use of rectangles, circles, and lines. Once you get familiar with the vector design environment, you’ll notice that it’s actually ridiculously easy to create illustrations with a flat design approach. This article will get you through all the basics, including a good load of shortcuts, to help you design your own illustrations in Sketch.

Guide to Login Form Interface Design For Beginners

Sketch tutorial

Tutorial link: Web Design Tutsplus

Created by: Armando Sotoca

Creating a login form is on the to-do list of almost every designer but that’s not the reason why this tutorial is so special. Armando Sotoca took the time to explain in detail every small step of the design process. From creating an artboard to managing the Inspector panel, and designing the basics of the layout, the author will guide you through every single action you need to take to create your own login form without leaving your questions unanswered.

Organizing Sketch 3 For iOS

Sketch 3 Tutorial

Tutorial link: Medium

Created by: Timur Nurutdinov

Since its initial launch, Sketch has developed tremendously. Its newest version has introduced numerous innovative features that allow users to take advantage of a bitmap design environment, use Symbols to facilitate the design of repeatable elements, export design files in an effortless way, and more. Timur’s Sketch tutorial will guide you through all of the above and go beyond that, providing you with valuable tips on managing your creative workspace with Sketch 3 for iOS.

Other honorable mentions:

Design a Colorful Switch

Sketch tutorial

Sebastien Gabriel‘s detailed tutorial will show you every single step of the process of creating a colorful switch icon in Sketch. You can check out his tutorial at Google Design.

Use Magic Mirror to Create a Poster Mockup

Sketch tutorial

In his tutorial, Marko Vuletič shows the basics of creating a fully-functioning poster mockup in Sketch. He will teach you how to use Magic Mirror, an image perspective transformation tool for Sketch and make your realistic poster mockup in just a few steps.

Create Your Own Sketch Plugin

Create Sketch plugin

Liu Liu, a UX designer at Google, shares an inspiring story and a whole tutorial on how he made his own Sketch plugin without being a code guru. He claims anyone can do it, as well, so why not give this one a try? You can read his tutorial here.

Best Practices for Using Sketch

Best practices for Sketch

Nick Woodman’s article is an honest and insightful guide through the fundamentals of using Sketch. Check out his seven best Sketch practices at his Medium blog.


Design Data With Sketch

Design charts and tables with Sketch

Ivo Mynttinen shares some time-saving techniques for designing tables and charts in Sketch. You can read his tutorial here.

Resizing Symbols in Sketch

Sketch tutorial

Jérémy Paul‘s handy tutorial will teach you how to rezise symbols in Sketch like a boss. His tutorial is especially useful for resposive web design as well as millions of other purposes. Read it here.

Craving more design tutorials? Read these:

Everything You Need to Know About Adobe Creative Cloud in 7 Tutorials


The 10 Best Parallax Design Tutorials Ever




The post 10 Tutorials That Can Get You Started With Sketch appeared first on SpyreStudios.

from SpyreStudios

Everything you need to know about Layers and Symbols in Adobe XD


In this tutorial, we’re going to take a look at Layers and Symbols in Adobe XD.

Download Adobe Experience Design CC (Adobe XD).

Read More at Everything you need to know about Layers and Symbols in Adobe XD

from Web Design Ledger

50+ Sets of Free Social Media Icons

50+ Sets of Free Social Media Icons

Designers love free icon sets. Having quality icons can help to make a site's design look complete, and can also help with the usability of the site. Social media icons are some of the most commonly used icons, especially in blog design.

Fortunately, there are a number of free sets of quality social media icons. In this post we'll feature over 50 social media icon sets from various designers. Click on the links to be led to the source where the icons can be downloaded. As always when you are dealing with freebies, check the terms and conditions to be sure that you're using them in a way that is allowed by the designer...

The post 50+ Sets of Free Social Media Icons appeared first on Vandelay Design.

from Vandelay Design

Wednesday, 23 November 2016

25 of the Best Photographer Portfolio Websites

Best Photography Websites

Web designers often browse through portfolio websites of other designers for inspiration and ideas that can be used in their own work. Photographers, like designers, have a need to display an attractive portfolio for their websites visitors, and many photographers have excellent portfolio sites. The portfolio site showcases the work to potential clients, usually provides some biographical information about the photographer, and makes it easy for people to contact the photographer...

The post 25 of the Best Photographer Portfolio Websites appeared first on Vandelay Design.

from Vandelay Design

Activity UI Design in Illustrator


In this tutorial, we’re going to learn how to design an activity user interface in Adobe Illustrator.

Download Adobe Illustrator.

Read More at Activity UI Design in Illustrator

from Web Design Ledger

Tuesday, 22 November 2016

Building a Freelance Web Design Business, Without Code

Building a Freelance Web Design Business, Without Code

Working as a freelance designer certainly has its ups and downs. On the one hand you have the clients that don’t pay on time and developers giving you back websites looking like something from the 90’s. On the other hand you also get to experience the thrill of seeing your own imagination come to life on a screen for the world to see, not to mention working on your own schedule, whenever and wherever you like.

This is the story of Pete Chadwick, a freelance web designer running his own business (Bunker Design) who, with Webydo, now makes websites 8 times faster, getting 5 more revenue per website and now sees 3 times more client referrals on every project...

The post Building a Freelance Web Design Business, Without Code appeared first on Vandelay Design.

from Vandelay Design

How To Center a Logo Within the Browser in Adobe Muse

Muse For You - Browser Centering Widget - Adobe Muse CC

Center Your Logo Vertically and Horizontally Within the Browser in Adobe Muse. No Coding Skills Required.

 Muse For You - Adobe Muse CC Adobe Muse CC Logo

Branding plays a big part in web design and most websites are branded with a logo and a slogan. A lot of times web designers and developers look for the best way to initially show the brand when someone visits their website. That is why I decided to create the Browser Centering Widget. With this widget you can initially center any element directly in the center of the browser. The element will be vertically centered and horizontally centered across all devices until the user scrolls, and then the element scrolls with the website. You can also fix the element in the center of the browser. This will insure that the brand or logo gets maximum attention and looks great when the user first visits the website. In the video above I go over how to use the Browser Centering Widget in your Adobe Muse website.

The steps are as follows:

1. Drag and drop the widget from the library panel onto your Adobe Muse website. If you do not see the library panel go to Window > Library.

2. Assign the graphic style name that is in the widget to the element you would like to center via the graphic styles panel. If you do not see the graphic styles panel go to Window > Graphic Styles.

3. Place the element at the very top of your Adobe Muse website. Element can be anywhere at the top.

4. If you would like the element to stay fixed in the center and not scroll with the website select ‘Fixed in Center’ within the widget.

5. Done.

 Muse For You - Browser Centering Widget - Adobe Muse CC

You now have a centered element on your website. No matter what device the user is on you can be sure that the centered element will be the first thing they see.

For more video tutorials and widgets for Adobe Muse visit

Happy Musing :).

Read More at How To Center a Logo Within the Browser in Adobe Muse

from Web Design Ledger

5 Good Tools That Will Help You Collaborate Better


Design teams are usually made up of individuals having diverse yet complementary skills. Under proper leadership, they can do what is needed to ensure a project’s success. If not applied properly however, the skills they bring to the table can undermine the chances of a project’s success.

A team leader’s role, is to take these individual team members, and mold them into a cohesive group that will work together toward a common goal.

The team leader’s job can become much easier. How? By choosing tools to help manage the workflow, and encourage collaboration among team members. Yet, even the best tools can’t do it all. The team leader needs to play a proactive role in getting the team working together and focused on a common aim. The following key issues must be addressed for that to happen:

  1. Constantly clarify roles. If roles are not clear, or allowed to overlap; oversights, duplication of effort, and/or confusion will likely result.
  2. Explicitly state team member responsibilities. Responsibilities are best assigned to individuals rather than groups to ensure things get done.
  3. Identify who is responsible for making a specific decision. If more than one person is responsible, how decisions will be reached needs to be spelled out.
  4. Continuously review team and project goals. This ensures that everyone will be focused on the tasks at hand.
  5. Use pre-selected tools for specific functions. This ensures the right tools are being applied to the right tasks.


The following 5 tools offer solutions for project management, workflow support, and team collaboration concerns:



Wake offers a solution to a problem designers often face; how to share information and collaborate among team members without interrupting a project’s workflow.

With Wake, you can upload and share sketches, screenshots, or other information, without ever interrupting your Photoshop, Sketch, or Illustrator design flow.

For example, you can use Wake’s iPhone app to capture notebook or whiteboard content and instantly share it with your team. The app allows you to share and see project feedback on the go.

This ability to share information without interrupting workflow makes the entire design process more transparent for your entire team, even those outside of design. With Wake, information can be shared publicly, so everyone knows what everyone is working on; or shared privately with selected individuals or stakeholders.




InVision is an excellent choice if you need a tool that integrates prototyping, workflow management, and collaboration functionality into a single platform. With InVision, you can avoid the need to select a variety of tools to perform a variety of tasks. Whether you are a team leader or a freelancer, this design-driven project management tool will manage your prototyping, design sharing, collaboration and modification, and user test activities from a central location.

InVision makes prototyping easy. Simply upload a static design file, add animations, transformations, and gestures, and you can create an interactive, high-fidelity prototype in about 5 minutes.

InVision has been used by approximately 2 million designers, including freelancers, design agencies, and design teams working for major corporations. If you request a free trial, you’ll be allowed to work with a single prototype for as long as you wish while you learn more about this tool’s functions and features.


Active Collab


Using separate tools for task management, time tracking, and invoicing sometimes makes sense, but it’s almost always better to do it all using a single platform, like Active Collab. Active Collab provides a one-stop solution for all your team’s business needs.

Features include project tracking, advanced to-do lists to keep things organized, team collaboration, time tracking, and invoicing. Active Collab runs on the cloud so no setup is required on your part – you’ll be up and running within 2 minutes. Also, you have the option to self-host the app on your own server for a one-time fee.

More than 200,000 designers and project managers currently use Active Collab on a regular basis. Its 30-day free trial should give you plenty of time to test it and see if it’s the right fit for you.




Paymo is well suited for teams working for small and medium-size businesses who are looking for a tool that makes project management easy. Paymo’s progress visual Kanban boards allows you to create your workflows and move the associated tasks through sequential and logical steps. Tasks can easily be changed or added, you can organize tasks into lists and, using drag and drop, simply reorder them when necessary.

Paymo’s features include a real-time collaboration capability, project templates designed to save you time, Gantt charts, and a dashboard to provide instant project overviews. A 15-day unlimited free trial is yours for the asking.




Pinnery is the perfect project planning tool. Place your ideas on Pinnery’s color-coded board, move the ones you wish to pursue to the to do list, attach files and pictures to each item on your list, check what is in progress and what has been accomplished, and before you know it, your project is done.

Pinnery keeps everything organized, everything can be shared with everyone, and a perfect overview of project status is always available. This app also encourages team collaboration, no installation is required on your part, and you can get started for free.


Ending Thoughts

No matter what your workflow or project management issues may be, you’ll find the right solution here. Depending on the tool or tools you select, your workflow and task management, collaboration, or project planning needs will be in good hands. And you can devote more time to design issues or other pressing issues.

Several of these tools feature mobile apps than allow you to check status or coordinate with your team or project stakeholders while on the go. Freelancers can benefit from several of these tools, while others are best suited for use by teams and team leaders.

Read More at 5 Good Tools That Will Help You Collaborate Better

from Web Design Ledger