What is a Favicon, and How Do You Make a Favicon?

What is a Favicon, and How Do You Make a Favicon?


A favicon is a small 16×16 pixel icon that appears at the top of a web browser. It serves as branding for your website and a convenient way for visitors to locate your page when they have multiple tabs open. Because of their tiny size, favicons work best as simple images or one-to-three characters of text.

what is a favicon

Example of favicons on a desktop browser.

To get a favicon for your website, you could hire a freelance designer to create one based on your logo and brand colors, or (I would highly recommend) create the favicon yourself.

Favicon Sizes and Formats

16×16 pixels is the standard size used by desktop website browsers. However, many website builders will ask for larger sizes. For example, WordPress requires 512×512 pixels and Squarespace asks for 300×300 pixels.

This is because favicons are not only used in browser bars. They are also displayed when a user bookmarks a site or saves a shortcut to their desktop or mobile home screen. In these cases, the size of the icon grows much larger.

what is a favicon

Example of favicons on a smartphone home screen. These icons are significantly larger than the desktop favicons pictured further above.

To be safe, try to upload whatever image size is requested by your website builder. Again, for WordPress, this is 512×512 pixels. WordPress will automatically resize and display the proper image for each scenario, so you don’t have to worry about resizing them yourself.

The standard file format for favicons is .ico but most website platforms will also accept .png files.

How to Make a Favicon

The majority of websites I create is via WordPress (site icon), so I simply need to create a 512px x 512px (icon) png. I personally prefer using photoshop to create favicons, but other visual/photo editors should work even Microsoft Paint. Even if you have limited graphic design experience you should not be overwhelmed by any means by this “project”.

If you don’t have the latest version of Photoshop, here’s the official Adobe link:

Free Trial or Buy Photoshop at Adobe.com

1. Create a blank 512px x 512px canvas (working area).

2. Create a basic icon via combining basic geometric shapes with a shape tool or even simply large letters with a text tool.

What is a favicon and how do you make a favicon?
What is a favicon and how do you make a favicon?

Optional: I personally prefer a favicon w/o a background, so if using photoshop unlock the background layer and delete it which will create a transparent background.

3. Save the image as a 512px x 512px png file.

Congrats you’ve now created a favicon! It’s that easy!

Now you can share this knowledge/skill to anyone else asking “What is a Favicon?… How Do You Make a Favicon?”

Offboard Web Design Project in 5 Steps: How to Guide

Offboard Web Design Project in 5 Steps: How to Guide

Offboard Web Design Project – 5 Steps

As you draw closer to the finish line with a website, does your client see it just as clearly as you do? Or are they still wavering on design and copy choices even while you’re in the final stages of QA, or talking about additional features they’ll want to add to the site “some day”? It’s time to offboard web design project.

Unless you are getting paid — and paid well — for every single hour you put into a website, you have to be willing to enforce a final stopping point. If you don’t, your client will undoubtedly play the “What about this? Or this?” game for as long as you allow them to.

And you can’t afford to do that. You have other clients whose websites deserve your attention.

Just as you have created an onboarding process to smoothly kick off a new website project, you must do the same with an offboarding process.

Step 1: Collect Your Final Payment

Once the client has given you the approval on the finished website, you push it live. After some light testing to confirm that all is well on the live domain, it’s time to initiate the offboarding process.

You’ll do this by sending along the last invoice. Better yet, your invoicing software should automatically be configured to do this upon reaching the final project milestone.

One my favorite tools to do this with is AND CO.


That’s because you can do everything in here:

  • Create a proposal;
  • Send the contract;
  • Track your time;
  • Send invoices.

Because each of these elements exist within the same place, setting up and scheduling invoices based on your project’s milestones (including the launch date) is really easy to do.

Don’t move on to the next steps until you collect the payment due though. Letting a client go any more than seven days after the project’s end without final payment simply invites them to ask you to do more work.

Step 2: Send the Wrap-up Email

Upon confirming receipt of payment, send your client a wrap-up email.

This doesn’t have to be lengthy. The goal is to get them to schedule the closing call as soon as possible. Something like this should work:

Greetings, [client name]!
I wanted to thank you for the opportunity to build this website for [company name]. I hope you’re just as pleased with it as I am!
I know you’re excited to put this website to work for you now that you have it, but I have just a few things I want to show you as we wrap up.
When you have a moment, please go to my Calendly and schedule a 15-minute Wrap-Up Session for some time this week. 
During this call, I’ll give you a behind-the-scenes tour of your website and show you how to edit your content. Afterwards, I will send along the login credentials you need to manage your website along with all of your design assets.
Talk soon.

As I mentioned in the message above, Calendly is the tool I use to simplify my scheduling with clients.


All you have to do is create an event (like “Client Offboarding” or “Client Onboarding”), set up your availability, and then send the link to your clients to pick a time when you’re free. It makes life so much easier.

Step 3: Do the Wrap-Up Video Call

This final call with your client needs to be done over video or, at the very least, a screen-share. For this, I’d suggest using Zoom.


The above example is how I used to do my offboarding calls with WordPress clients.

I’d log into their website and then give them an orientation of all of the key areas they needed to know. I’d show them how to create a post, how to create a page, and explain the difference between the two. I’d also show them important areas like the Media folder, the area to manage Users, and maybe a few other things.

This “training” call is yours to do with as you like. Just make sure the client walks away feeling confident in taking the reins over from you.

Step 4: Deliver the Remaining Pieces

The website is done, you’ve collected the payment, and you’ve had the final call with your client. Now, it’s time to deliver the remaining pieces you owe them.

Logins – If you created any accounts from-scratch (e.g. WordPress, web hosting, social media, etc.), send along the login credentials.

Style guide – Did you create a style guide for the client? Package it up in a professional-looking PDF and send it over in case they decide to work with another designer in the future.

Design assets – Again, on the off chance they work with someone else, you’ll want to send along the design assets you created in their native formats.

Licenses – You may have licensed certain assets during this project, like stock photos or design templates. If that’s the case, you’ll need to bill them for the licenses (if you haven’t already) and transfer ownership to them now.

While you could send these along before the wrap-up call, you run the risk of the clients taking the materials and running away… Only to show up months later wanting to know what all this stuff is, what they’re supposed to do with it, and wondering if you’ll have time to walk them through the website now.

Or they don’t open any of it and then message you months down the line, urgently demanding access to their site, files, etc. To avoid this from happening, clearly label everything and send it along in a shared Dropbox folder.


Even if they lose the link to the Dropbox folder at any point, you don’t have to repackage up all their stuff again. You can simply grab the link from your end and resend.

Step 5: Follow Up in 60 Days

Set a reminder in your project management template to follow up with website clients 60 days after the wrap-up. This will give them enough time to sit with the website and either:

  • Become really comfortable using it;
  • Realize it’s too much work.

Either way, it’s a good idea to check in.

If they’re taking good care of the website and using it to promote their business, that’s great. This email will simply serve as a reminder that you remain their trusted ally and you’re here if they ever need anything.

And if they’re not taking care of it, this is an excellent opportunity to offer your assistance in providing (paid) support and maintenance.

Bringing Projects to a Close with an Offboarding Process

If you’ve done a good job of setting expectations with your client from the start, bringing a project to a close should be no problem.

Then again, you know how clients can get. They’re so excited to actually have a website now that they can’t stop imagining the possibilities. So long as you’ve delivered what they paid for, though, you are under no obligation to keep this project open to entertain those ideas unless they start a new contract with you.

Use this offboarding checklist to ensure you give each of your web design projects as strong and final a close as possible.

references: webdesignerdepot, and co, calendly, dropbox

Combine the Power of Data and Design to Maximize Results For Your Website

Combine the Power of Data and Design to Maximize Results For Your Website

In today’s digital era, having an impactful and compelling website is a critical component for any business or organization. A useful site that connects with your audience instills trust, screams authority, and drives action, can mean the difference between remaining relevant and competitive or falling silently to the wayside.

Despite the critical importance of websites in today’s competitive landscape, many web designers find their creations falling short on the performance matrix, under-delivering on KPIs and leaving those in charge scratching their heads for an answer.

Simply put, sometimes innovative layouts and stunning visuals aren’t enough. Lack of data in the design process can create a disconnect between what “works” and what looks or feels appealing.

The marriage of data and design makes for a compelling approach to data-driven design processes and can act as a guiding force for strategizing and implementing site architecture and design elements that not only look great but meet or exceed performance expectations.

Market Research – Where it all Begins

In life, as in business (and web design), having a clear direction and goal in mind from the outset will make for a predictable journey to that end.

If one does not know to which port one is sailing, no wind is favorable

~ Seneca

Market research is all about understanding your audience, analyzing the competition and competitive landscape, and looking introspectively inward to identify strengths, weaknesses, opportunities, and threats.


Your “market” represents the gameboard, along with all of its components and pieces upon which your design strategy executes. As it relates to market demands, what elements are vital, required or expected of your design and website?


  • Visible accreditations or licensure;
  • Prominent reviews and ratings;
  • Specific contact or support channels;
  • Information such as guides or training materials;
  • Product/service visuals or demonstrations;
  • Transparent pricing.

Market demands vary and will be particular to your specific industry, geographic location, and other factors.


You know what they say: Keep your friends close and your enemies closer. While you don’t need to become best friends with the competition, monitoring their activities, strategies, updates, offerings and other prerogatives can provide you with insightful and useful information.

Competitive data can be used to leverage the time, resources and hard work of other brands to identify those activities or strategies that either perform well or fail in the market.

By doing so, you can learn from costly mistakes, while benefiting from winning concepts already battle-tested in the market and proven to either work.

Further, understanding the competitive landscape in its totality will help you understand what you’re up against, and can help you formulate ways to uniquely position your design in the market such that it stands out among the sea of competitors vying for the same business.


Without a deep understanding of your target audience, any web designer is prone to missing the mark badly, failing to connect with, engage, inspire action, and meet the needs of their visitors.

Considerations with regards to your audience should include both demographic and user behavior data.

Demographic Data to Consider:

  • Gender
  • Age brackets
  • Income
  • Geographic locations
  • Family size
  • And other relevant data
  • Behavioral Data to Consider:
  • Needs and wants
  • Pain points or complaints
  • Issues/problems
  • Desired solutions
  • Likes and preferences
  • Purchase habits
  • And more…

The specific types of behavioral and demographic data that will be most useful and relevant to your design will be mostly dependent on your brand, vertical/niche, offerings, and other particulars.


Sometimes it’s hard to see the forest for the trees as it were. Taking a step back and assessing your product/solutions and other offers can provide perspective on necessary design elements, positioning, and framing that can help turn a non-performing offer into a critical source of revenue.

Utilizing information uncovered in the previous steps, cross-reference your offers and take a hard look at whether or not your products or services meet market and user demands, needs and want.

In what way do your offers stand out (or in what ways can you make them stand out) from those offered by the competition. Utilize this data to formulation unique positioning and strategic approaches to incorporate your offers’ USP or value proposition.

Keyword Research

Keyword research is a vital component of the design process, and will largely dictate how information is architected, organized, presented and delivered on the site.

Approach keyword research from a bottom-up or top-down funnel approach.

Necessary components of keyword research include:

  • Keyword competition;
  • Keyword intent (buyer vs. research vs. informational, etc.);
  • Stage of funnel each keyword targets;
  • Organization of content for search engines and user experience;
  • Link modeling for internal link and ranking strategies.

Types of Content May Include:

  • Sales/landing pages;
  • Service/product pages;
  • Resources, guides, tutorials;
  • Informational and supportive blog posts or articles;
  • Information Architecture.

Information architecture is essential for user experience, search engine optimization, and conversion rate optimization. Utilizing data from the previous market and keyword research phases you can begin to optimally architect information in a way that is conducive to better performance.


Site Structure: Determined by both market and keyword research, your site’s structure can be first mapped out by using an organizational chart for ease of visualization.

URL Mapping: This step, while mostly administrative and somewhat tedious, involves the creation of each URL structure optimized for both readability by users and optimized for search engines to understand. Once created, assign designated keywords to their respective URLs.

Page Flows: An understanding of user behavior and the ideal buyer journey should also shape how information is structured and organized, helping both users and search engines to “flow” seamlessly through information in a way that answers their questions and solves their problems with the least amount of “friction.”

Value Propositions: An understanding of the problems and pain points facing your target audience will enable you to architect, draft and present unique value propositions tailored to each individualized problem or issue.

Topic Clustering: Once you’ve mapped out your keywords, pages, and content, group or “cluster” those topics that are semantically relevant to each other. Clustering your content can help with search engine categorization and relevancy metrics.

Interlinking: Once mapped out with pages and content clustered, seek out opportunities to link between related pages.

Closing Thoughts

Tailoring design to user needs and expectations is never far from any designer’s thought process, yet knowing exactly which strategies or tactics have the best chance of performing well is often unclear. By utilizing a data-driven decision-making process, web designers can leverage information in a way that helps them formulate a plan tailor-made to perform and exceed expectations. Designs using data versus personal opinion, experience improved levels of engagement, higher conversions, enhanced user experience and overall performance.

As a professional web designer, you have a responsibility to both the users, and to the organization for which you are working, to use and implement all available tools to deliver the best end product possible. Data is one of those tools and one in which there is an excellent potential for success when used correctly.

references: canva, webdesignerdepot, klipfolio

5 Trends for Web Design in 2019

5 Trends for Web Design in 2019

The web industry is constantly changing. Here are the trends to watch out for in 2019.

Predicting web design trends is always tricky. Get it right and you are praised for being ahead of the curve; get it wrong and you are met with a flood of I-told-you-sos. That said, with 2019 now in full force, I’m going to provide some insight into the trends that will define web design throughout this year and beyond.

We’ve seen some vast changes in the past decade: the HTML5 revolution, mobile-first app development and now native features in web apps, plus more new web design tools than you could imagine. With the increasing use of machine learning, cross-platform frameworks and a more diverse developer base building everything, there’s going to be some exciting changes in our industry. These are my continuing predictions for the biggest web design trends in 2019.

1. AI gets personal

Artificial intelligence is too hot to not bring up. While it might not be as flashy as a self-driving car, the web can certainly connect to AI. Machine learning is going to take analytics to the next level. In the past, analytics offered more of a reactive approach: log the data and then use it for your next release. 2019 and onwards should continue to be about capturing data about how your app is used and improving the user experience by driving the website to change and adapt to this by itself. 

This means that, depending on the data available on a user, the application will be able to act like a chameleon and change itself to provide the ideal UX for them. This will create truly personalized sites that behave differently and show different features depending on the individual using it.

2. Voice interfaces take over

With the explosion of voice assistants such as Alexa and Siri, conversational interfaces are bound to become a natural part of an application’s fabric. As more users become accustomed to interacting with the web using their voice, developers will need to ensure they can offer a seamless experience, even in web applications. Imagine having users sit on their couch and view their social media feed or tell their favourite voice assistant to pull up and read a news article for them – all without traditional inputs.

3. Accessibility becomes a requirement

Accessibility is no longer a luxury; it should be an absolute requirement. We’re seeing this pop up more and more, and this trend will just continue next year. Some have pushed hard with Progress Kendo UI to follow common accessibility guidelines like WCAG 2.1 and WAI-ARIA, to ensure web components follow accessibility requirements out of the box.

This positive trend in accessibility focus will continue in the web. Whether this comes from development practices naturally emphasising accessibility, or governments and legislature stepping in to enforce adherence, we will have more accessible applications.

4. Web apps get an AR makeover

Augmented reality will take the web by storm in 2019. AR is already commonplace in scenarios like Snapchat filters or Pokémon Go, but its use of AR will only expand to cover not only social media and games, but also everyday applications. 

The beauty of AR is that it does not require full immersion via a clunky headset, as with VR. Instead, it can be used with the phones that we walk around with in our pockets today. Why should AR be limited to just the native mobile applications on a device? Why not use it on the web? Offering AR services through your web application without needing it to be installed as a native app can have huge benefits from a UX perspective. 

Imagine being in a grocery store and doing a quick web search for a recipe. AR integration could provide users with turn-by-turn navigation through their mobile device to find all the ingredients within that store – all within a web app.

5. Developers flock to the web

In the past, everyone stuck to their favored programming language. Then along came HTML5 and JavaScript went from being the language only for web to almost a universal programming language.

Of course, JavaScript has its own set of choices. While I cannot predict the rise and fall of JavaScript frameworks, I believe that once the dust settles, developers will realise that the basic concepts of these frameworks are completely transferable. This shifts the focus to better programming habits and architecture of web applications, rather than being akin to picking your favorite flavor of ice cream.

Frameworks such as NativeScript and React Native will also play a big part in bringing more developers to web technologies, since they provide a single codebase for web and native mobile applications. 

Additionally, concepts like progressive web applications (PWAs) will continue to blur the line between native mobile apps and web. Developers will then be able to purely focus on the user experience without worrying about specific platform choices.

Web Assembly is another technology that is bringing more developers to the web. Thanks to Web Assembly, C++, C#, Rust and other programming languages can now target the web. Projects like Blazor, which leverages .NET in the web, take advantage of the promise of Web Assembly and will help open the web to even more languages. This means that in the future, all developers can be web developers, regardless of programming language.

references: creativebloq

Usage of Vertical Typography for Web Design

Usage of Vertical Typography for Web Design

It’s easy to become bored with the ordinary – longing for something original and one-of-a-kind. That’s why common hero areas are bursting with eccentric ideas. They are aimed to not just impress, but also satisfy a user’s craving for creativity and originality.

However, animations and grandiose solutions are not the only things that can do the trick. Going off the beaten path with even the most trivial things can achieve the same effect. And vertical lettering is vivid proof of that. Becoming quite popular these days, it has grown into a tiny trend with some aces in the hole.

We do not see much use of vertical orientation in web design. Traditionally, it is a place where horizontal rhythm rules the roost, though this doesn’t mean that everything should revolve around it. As a rule, developers stick to the traditional models. However, diversity and deviation in habitual reading flow can be beneficial. What’s more, you do not need to take extreme measures. Small doses of vertical orientation are more than enough to produce a proper impact.

Archi Graphi

Here, the creative team has twisted the basic navigation by rotating it 90 degrees and reflecting it horizontally. You should read it from bottom to top – that is quite unusual, but intriguing. As a result, the welcome screen has got a zest without all of those overwhelming centerpieces. Also, note the top header: it feels incredibly spacious, and the logotype gets the overall attention by looking prominent without much effort. That is a smart approach.

Archi Graphi

Lydia Amaruch

There are some other exceptional examples where vertical lettering is like icing on the cake. Consider Lydia Amaruch and her online portfolio.

Much like in the case of Archi Graphi, here the usage of vertical rhythm is episodic but well-thought-out. There is a traditional streamlined horizontal navigation, but it includes just the essentials. All the rest has been pulled to sides – literally. They echo with vertical stripes on the back, creating a harmonious aesthetic.

Lydia Amaruch


Yo:Ha adopts the same approach. Whereas the main navigation is hidden behind the hamburger button, links to the homepage and social media stay on the surface. Again, notice the overall theme. Here, vertical rhythm can be seen in various details, such as the slider that is broken into three semi-transparent panels and elongated symbols. Consistency marks the design of this website.


Ivan Ibanez / Gothamsiti

Ivan Ibanez and the team behind Gothamsiti show us how to apply vertical orientation to the entire navigation. As it turns out, it is handy to use – to say nothing about its attention-grabbing look. Note, these two examples have different themes, moods, and atmospheres. But, vertical navigation fits like a glove in both cases.

The personal portfolio of Ivan Ibanez has a boxy vibe. There are hollow blocks, split layout, ultra-thin lines and lots of white space. The vertical navigation beautifully finishes off the design.

Ivan Ibanez

The creatives behind Gothamsiti’s design have positioned links around the perimeter of the hero area – placing each one in a corner. In this way, nothing distracts the attention from the mysterious and creepy welcome screen. At the same time, all the gateways are exposed, making users feel comfortable.


Prime Park Sessions

Let’s step away from navigation and explore examples of vertical lettering that is a part of the content.

Since vertical orientation looks a bit strange to the majority of us, it can be used to put an extra emphasis on the crucial things like, for example, a tagline. The idea can be seen in Prime Park Sessions. Here the nameplate of the agency is directed leftwards, just where we usually start to read. It also mirrors the vertical navigation on the right. As a result, the design feels complete and visually-interesting.

Prime Park Sessions

Luxury Villas

The team behind the design of Luxury Villas uses a vertical orientation for displaying the tagline. The latter is also provided with a relatively wide background so that it looks like a sidebar. Though it is not just an ordinary sidebar, it is a sidebar with zest. That is clever.

Luxury Villas

Kitamura Makura / Canatal

Another way of benefiting from the trend is to use it for headings. Consider Kitamura Makura and Canatal.

When it comes to telling a story, both teams prefer to focus the users’ attention on the vital things, such as content, rather than captions. Therefore, the headlines were moved to the right and rotated in 90 degrees, thereby naturally giving way to the text.

In the case of Kitamura Makura the caption has been pushed to the right edge, making it feel like a part of navigation. With Canatal, however, the caption is still a part of the block and overall design.

Kitamura Makura

Protec / Building the Future

Protec and Building the Future have made things a bit more interesting by making vertical text a part of the entourage.

Protec features huge captions that stretch from top to bottom. They are carefully set aside and shown on the left side, giving the content top priority.


In the case of Building the Future, the vertical lettering is even bigger. However, here it plays merely a decorative role, strengthening the traditional caption featured at the top of the text block.

Regarding SEO, it is not a good practice since headlines should be a part of document hierarchy and enclosed in corresponding tags. However, sometimes you can go off the beaten path and win over customers with design rather than search ranking.

Building the Future

Kwok Yin Mak

While for the western world, vertical rhythm feels like something extraordinary and a viable trick to add zest to conventional designs, for our friends in the east it is the most natural thing. Let’s take a look at Kwok Yin Mak.

The design looks refreshing. The traditional black and white color scheme, lots of white space, logographs and of course vertical orientation make this interface look so special. The trend feels at home. However, even though we expect it to be here, the team behind the website has managed to save it from looking trivial.

Kwok Yin Mak

A Pleasant Surprise

Vertical lettering is a rare guest, yet a welcome one. It is safe to say, that in the universe of everything horizontal, it is a little light that makes us smile. It pleases the eye with an unexpected twist in reading flow and effortlessly brings the essential things into focus.

It is a simple way to make things interesting without reinventing the wheel and going the extra mile.

references: speckyboy

How to Combine Web Design and SEO

How to Combine Web Design and SEO

UX design and a solid SEO strategy go hand in hand.

Design is there to boost user experiences, inspire users to spend more time on your pages, and ensure they don’t leave your site frustrated. This way, it minimizes bounce rates and turns your visitors into leads and, ultimately, sales.

However, designing a spotless website is pointless if it’s not visible on Google. This is where SEO shines. It increases your site’s exposure in the SERPs, drives greater traffic to it, and gives you the opportunity to delight a visitor with your gorgeous website design and quality content.

When merged together, web design and SEO are indicators of your credibility and professionalism.

So, let’s see how to combine them for a better online performance.

The Basics of Implementing SEO and Web Design

In the world of digital marketing, building your online presence on strong foundations is critical. If some basic aspects of your site are poorly managed, you cannot expect your web design or SEO to deliver exceptional results.

Here are key elements of any strong web design:


Stuffing your domain with a bunch of keywords won’t help. They look spammy and may hurt both your rankings and user experience.

Remember that there are millions of domain names out there. So, your goal is to make your domain name catchy and memorable. It needs to be relevant to your business’ focus and be easy to spell and pronounce. To make your site easier to find, it’s always good to use your brand name as your domain name, too.


Choosing the right hosting plan directly impacts your website speed, server performance, and uptime/downtime. These are all important UX factors Google considers while indexing and ranking your site.


A solid CMS is one that is easy to use and manage. You should be able to design your site however you want, without taking additional courses in web design. It should also help you make your site mobile-friendly, add social media integrations effortlessly, and use various content management tools. The most popular CMS option is definitely WordPress, followed by Joomla, Drupal, TYPO3, and Squarespace.

When choosing the right CMS for your business, ask yourself how it will impact your online performance. For example, does it allow you to customize your URLs? Can you make on-page changes without changing the URL? Some systems create meta tags (meta descriptions and title tags) automatically, so you should check whether you can modify them.

The Link Between Web Design and Indexability

Did you now that Google crawls each page of your site individually when indexing it? That’s why you need to add internal links to make these pages findable by search engines. Most importantly, you need to check whether all your interlinks work.

Start with the simple Google search. For example, the site: operator will help you see all your pages that are indexed. You could also check robots.txt files(https//www.yourdomainname.com/robots.txt) to identify your site’s disallows. Sure, you can speed this process up using web crawlers like Screaming Frog or Google Search Console’s Index Status that will do the job for you.

Keyword Research and Meta Tags

On-page SEO can be viewed as a process of optimizing individual pages on a site to rank higher. In short, you need to do detailed keywords research and optimize your key page elements for them.

  • A title is the first element a visitor sees in the SERPs. It should be creative, intriguing, and authentic to stand out from other results in the SERPs. Above all watch your title length (it should be up to 60 characters) and add your major keywords to it naturally.
  • Meta descriptions tell a searcher what the page is about. It’s pretty limited- you need to use these 160 characters wisely to grab people’s attention and entice them to click on your link.
  • Headings increase the readability of your textual content, making it more user-friendly. Use them to separate your content into smaller chunks and help visitors find the information they’re looking for easily.
  • Google still cannot understand your visual content. When optimizing your images, infographics, and image captioning for visibility, make sure you have a clear alt text that describes what the image is about. Brief descriptions including your main keywords will be enough.

Information Architecture and URLs

Which URL seems more logical to you?

  1. www.example.com/services/content-marketing/audits
  2. www.example.com/s456/s4/85

The first one, I hope.

Well-optimized URLs tell users what the page is about and help them find the desired information or products faster. Just like title tags and meta descriptions, they provide a wider context around your keywords for both users and search engines. Precisely because of that, your URLs need to be descriptive, short, understandable, and optimized for your major keywords.

Simplifying Website Navigation

Navigation goes beyond a simple menu bar at the top of your site. When used properly, it inspires people to stay more on your site and browse through it.

When building website navigation, it’s critical to understand the needs and expectations of your potential customers. Just like at any physical store, website navigation should help a potential customer find a product or content faster and guide them through their buyer journey towards finalizing a purchase. If a customer needs to waste their time thinking where to click, that’s a clear sign you need to improve your navigation.

The Impact of Page Load Speed on Rankings

Page speed is one of the most significant ranking factors. And, with the 2018 Speed Update, it has become a notable ranking signal for mobile devices, too.

Page load times are important for a good reason- they impact user experiences and can result in either higher conversions or bounce rates. Stats back me up on that. For example, did you know that your visitors expect your site to load in less than 2 seconds? And, if it fails to do so, almost half of them would leave it. Apart from losing potential leads and conversions, high bounce rates have a negative impact on your online performance and ranking in the long run.

For starters, use Google’s Page Speed Insights to find out how fast your pages are. Here are a few steps to take to boost your site speed, such as:

  • Choosing the right hosting plan
  • Compressing your high-quality images
  • Using browser caching
  • Removing auto-play content
  • Reducing the number of plugins and popups
  • Investing in a reliable content delivery network (CDN)

Website Responsiveness is the Mobile-First Era

With the number of mobile users, mobile searches have also grown. For example, did you know that 57% of all US online traffic is generated through mobile devices?

And, for your mobile visitors, their browsing experience determines whether they will buy from you. Stats say that 52% of your potential customers would not to make a purchase after a negative mobile experience.

Given these figures, it’s not surprising that Google is constantly striving to improve mobile users’ satisfaction and provide them with relevant results. This year, they finally rolled out the Mobile-First Index, meaning that they’re now indexing a mobile version of your site.

And, to meets these standards, you need to make your site design highly responsive.

What does this mean?

Use Google’s Mobile-Friendly Test to check how friendly your pages are to mobile users. When optimizing your site, pay attention to the overall site’s usability, such as its speed and page layout. How appealing is your site to mobile users? Can they read your content and see your videos without having to zoom and pinch continually? What about your CTA’s and links- are they easy to tap? Does your content fit the screen size, irrespective of its size? Are your forms easy to fill out from mobile devices?

Putting it All Together

Even if you believed that SEO and web design have nothing in common, I hope this article proves you wrong. Your website design impacts visitors’ perceptions of your brand, making it feel professional and authoritative. Above all, it impacts user experiences and impacts their engagement and purchase decisions. These are all factors Google takes into account when ranking you.

references: webdesignerdepot, moz, google

How to Get 10 Free Adobe Stock Images

How to Get 10 Free Adobe Stock Images

I currently spend most of my time working on web related projects. Every website needs images, and the usage of high quality and professional images changes the overall look and feel of the site. As a designer, the highest grade products and services related to design usually are provided by Adobe. It’s no surprise that Adobe Stock has some of the best images right now.

Of course you don’t need to be a web designer to appreciate and use the images. It could be used for essentially any design project big or small.

So how do you get started? How do you get 10 free images? What are the details?

Adobe is offering a Free 1 Month Trial that gives you access to the Adobe Stock image library. After you have signed up you can choose and download 10 images. What’s even more incredible is that you can cancel the subscription if desired and keep the 10 images at no cost! You have nothing to lose, and 10 high quality images to gain!

How do you sign up?

Use the following official link:

Go to Adobe.com

You will be brought to the official Adobe Stock website and you should see a blue banner near the top of the page with a button that says “Start Now”.

A dialog box will open to create an account.

Fill in your email address and click on the “Continue” button.

Fill in the payment information in the following dialog box and note that $0.00 is due now.

Click on the “Place Secure Order” button.

Now you will be able to sign in and download any 10 Adobe Stock images you want!

As previously mentioned, after you choose your desired photos and download them, you can cancel the free trial and still keep all 10 images!

Literally 10 Free Adobe Stock images!

Need the official link, here it is:

Go to Adobe.com

How To Become A Professional Freelance Web Designer

How To Become A Professional Freelance Web Designer

Becoming a freelance web designer is a common dream among many designers, although it takes quite a bit of talent, business savvy, commitment, and time. With all there is to consider when becoming self-employed, one can become overwhelmed — enough to deter themselves from trying at all.

Realizing many readers probably already have a head-start into the world of professional and freelance web design, this post is meant to act as not only a step-by-step guide, but also as a checklist for those who have already started their career. Hopefully this guide can cover all aspects of becoming a professional and freelance web designer, from business aspect and working with clients, to creating an effective portfolio and advertising one’s work.

1. Do the Necessary Research

The absolute first step into any freelancing career is to do the needed research ahead of time. Freelancing is a huge life and career change, and one needs to look into exactly how it will change life before diving in.


Making money on one’s own terms sounds incredibly appealing, until the realization comes that it’s a lot less money than working at a company (at first, at least). Below is just a short list of expenses to consider. Make sure they are covered when venturing into a freelancing lifestyle.

  • Domain name and hosting services
  • Stationery, Business Cards, and other marketing material
  • Needed software
  • A desk space and supplies
  • Subscriptions to stock photo sites and other forms of resources

On top of that, consider basic living expenses and additional emergency or living money. At this point, a formal budget is not needed, but it’s a very smart idea to go over the basic numbers of starting a freelancing business, and maintaining it.


While most aspiring freelancers will slowly transition into the lifestyle, opposed to quitting their day job cold turkey, it is important to look into taxing information, insurance, and other assets that will be changed with self-employment. Because local laws and personal circumstances can vary so significantly, new designers should research this area on their own.


A more specific schedule can be setup later, but it’s a good idea to look into the time requirement for work each day, per week, and even per month to handle X amount of clients. For some, the time needed to be invested in this type of career path is not currently available.

Consider current social or family happenings, career responsibilities, and for some — even school. If it is not a good time in life to change focus, it may not be a good time to start freelancing full-time. Sometimes it is appropriate to put dreams on hold. With that being said, set a realistic date to begin a true freelancing lifestyle, whether that means just easing into it now, or setting a time in the future to go full-time.

If all consideration is put into place, the idea is well researched, then it can be time to start a freelance web design career! Below are the remaining steps to take.

2. Become a Brand

There are many differences between a young freelance web designer just trying to get by, and a successful freelance web designer with their business and future in mind. One of those differences is that successful freelance designers understand, and pay close attention, to branding.

Branding a business, even if only a one person operation, can do a lot of things in terms of the business’s sucess. A good brand builds credibility, client loyalty, delivers a target message to clients and other businesses, and even aids in marketing strategy.


The name of a freelancing business can signify a lot, and most designers just choose to use their full name as the brand name. This is fine, but another option is to use a specialized brand name. Depending on the future plans of the business, it is smart to think closer about an official name.

If one plans on turning an individual freelancing business into a firm one day, a name other than the designer’s given name may be more appropriate. Also, a specialized brand name may be more memorable than the designer’s given name, and the posibilities are then endless as far as finding an SEO friendly name, or a name that gives off a portrayal of the business it represents.

On the other end of the spectrum, it’s easy to see the benefits of using a given name as a business name. Using a designer’s given name is always original, and something uniquely personal to the designer. Really, both can be successful decisions, but it is a decision that is often times taken too lightly. The way the brand is further marketed depends largely on this decision.

You should notice that designers who chose a specialized name for their brand often call themselves a studio. This gives the impression that they are a bigger business; a more formal organization. The portfolios with given names, though, provide a more personal appeal — something many clients look for. This often gives them more of the true freelancer feel.

Depending on how a designer wants to operate their business, the clients they want to attract, and based on the future goals of the business, the final decision of the freelancing business name can have many possibilities.

After the official brand name is decided, it’s time to start creating a logo around it. Many beginner designers don’t understand the importance a logo has in a brand, or even how important a brand is in itself. Opposed to creating a quick logo in the process of designing a portfolio template, a logo should be made separately and with the utmost consideration.

Because these designers, and so many more, took the extra time to create a well-branded and effective logo, they have the opportunity to expand the logo design to stationery, business cards, advertisements, and more. Not to mention, these logos serve the origial purpose of logo design — to create a brand, build business loyalty, and create an image that aids in recognition.

A designer will want to create a logo that represents their design style, and that will attract a client that is looking for that type of web design. To create a great logo, read up on logo design principles, tutorials, and logo design processes.


There is a lot more to being a successful freelance web designer than just being good at web design. Any sort of freelancer has to be an entrepreneur as well. Rule #1 for entrepreneurship: create an elevator pitch.

For those that don’t know what an elevator pitch it, it is a premeditated, well thought-out introduction to one’s services or a person’s business as a whole. Let’s take a look at a better definition. Excuse the use of Wikipedia for a professional reference, but Wikipedia’s definition of an elevator pitch is just about perfect for the freelance web designer:

An elevator pitch (or elevator speech) is an overview of an idea for a product, service, or project. The name reflects the fact that an elevator pitch can be delivered in the time span of an elevator ride (for example, thirty seconds and 100-150 words).

… A variety of other people, including entrepreneurs, project managers, salespeople, evangelists, policy-makers, job seekers (web designers and freelancers), and speed daters commonly use elevator pitches to get their point across quickly. — Elevator pitch, Wikipedia

Take the time to create an elevator pitch for a freelancing business. For a freelance web designer, it can venture beyond the traditional use of a speech in an elevator, to the introduction to a portfolio, the about page, or as an introduction to an application for a freelancing position.

Many marketing gurus leave the assumption that the creation of an elevator speech for a business will increase the client list dramatically. Usually, this isn’t the case — at least not directly. What it will do though is still quite useful:

  • Save the designer countless hours in coming up with a smart introduction over and over again.
  • Create a professional atmosphere for a portfolio, or whereever it is used.
  • An elevator speech will make sure that any new introductions don’t leave out vital information about the services or freelancing business.

The following is an example of an excellent elevator pitch for a 45royale web design studio.

45royale is an enthusiastic web design studio located in the bustling metropolis of Canton, Georgia. We promote web standards and bring energy and commitment to our work every single day. — 45royale Inc.

The above is a strong example for a small, yet established business. Freelancing can use the same principle, but with a more personal approach:

Hi there, my name’s Brian Wilkins and I am a web designer/front-end developer living outside Boston, Massachusetts. I currently work at Reelpoint, an online design and marketing firm. I build clean and functional interfaces. With a hunger to constantly grow and evolve as a designer, I have a genuine passion for art, typography, design, technology and creative thinking. — BrianWilkins.net

That detailed elevator pitch can be seen on his about page, telling potential clients exactly what he does. On the front page, as part of his portfolio design, he includes a much shorter, but equally effective pitch:

I’m a web designer that creates clean and modern content for the world wide web.

Taking the time to create an elevator pitch can help launch a freelance career through the use of business tactics. Below are some further resources for creating a great elevator pitch.


The last thing to do is create an overall style for the freelancing business. Fortunately, most of this is accomplished by the above several factors. The overall style, colors, textures, and even how a designer presents one’s self should reflect the style of work a designer completes.

To promote consistency throughout the life of the freelancing business, though, designers need to look at branding in a more broad sense when first starting out. Creating a color scheme, design style, and other overall design guidelines based off of the logo design, and information presented in the elevator pitch. Then, stick to the brand as the freelancing business progresses.

3. Create a Portfolio Website

Step number three is an obvious one — create a portfolio website. However, it deserves a decent overview and closer look because we as designers are our own worst clients. Many new freelancers, or anyone just entering the web design world of business, will open Photoshop and start grinding away. Instead, think about what a portfolio can actually do.

A mediocre portfolio will have a great design, and show off a designer’s past works. However, an excellent portfolio will do the following things:

  • Reflect and grow a designer’s brand.
  • Show a client not only what a designer can do, but what the designer can do for them.
  • Show great talent, but also business savvy and professionalism.
  • Intrigue potential clients strongly enough so that they stay on the website long enough to make contact with the designer.
  • Provide a user-friendly interface for the client (who very well may not be so Internet or design savvy).

Keep all of this in mind during the design process of a web design portfolio. Make note that a designer’s portfolio has to be their best work. Furthermore, consider the following items when creating, or even modifying a design portfolio.


It’s called direct response marketing, and it’s proven to be one of the most effective forms of marketing to get the most sales. It’s bascially a method that involves making a huge impact in the most direct way possible. In the world of web design, this means an incredibily effective and amazing portfolio — but in only one page.

Of course, this isn’t a great method for everyone, especially those who offer more than just basic web design services. However, without a one-page design, a designer can still take use of this knowledge by applying more direct-response marketing to their portfolio. This may mean simplifying it, puting the contact form on the front page, and merging similar pages together.


Provide a traditional email address and other information, but most importantly, include an email form. It makes things easier for the potential client to get ahold of the designer, even if only to ask for more information. This then provides further opportunity for the designer to sell their work.

The form above (Komodomedia) is a perfect example because it gives the visitor various options for the form, rather than just requesting a quote. This designer has made themselves approachable, which is an excellent way to gain more clients. Also, above the form, there are other ways to contact the designer, which may be suitable for different visitors.


Make sure the most important components of a portfolio design are out in the open and easy to use and find. For most, this means the contact form and information, the portfolio pieces, and the logo.

A perfect example is Alexandru Cohaniuc’s portfolio. The biggest text on the page is “Portfolio”, “Hi, I’m Alex”, and “Contact.” Right above the word “Portfolio” is the logo, strategically placed in the top left.

To make things really official, a designer has to create some legal documents. These can be reused for each client, but must be made initially to deal with potential problems later.


A contract is a necessity for a freelancer of any sort. It will help protect the designer and the client, as well as outline some rules and guidelines. For more information on how to create a freelance contract, check out the resources below.

In addition, one can hire a technical writer or other writing professional to do the job.


Terms and conditions are a more in-depth view of the rules between the web deigner and the client. Again, one can hire someone to write a terms and agreement paper for them, otherwise here is a great template: Terms and Conditions Template.

A third needed agreement is a separate copyright agreement. Designers are always at risk for work being stolen and miscredited. A copyright agreement is a way to protect that work, and a way to set further rules for who can use the work.

Because copyright law can vary among different countries, we won’t get much into it here. It is important, though, to research copyright law, know one’s own rights, and apply it to one’s own circumstances.

5. Find a Starting Wage & Budget

Deciding on a personal starting wage is difficult, because we never truly know how much to pay ourselves. As anyone can guess, someone just starting out in freelancing won’t be making much. A new designer just has to make sure they have basic living expenses paid, and a bit of cusion room for emergency costs or budget mishaps.


A fixed-priced project is one where the designer and client agree on an overall cost for a design project ahead of time, and the payment is completely independent of how long it takes the designer to complete. Below are some pros and cons of using this method.


  • These types of project can be easier to apply to a monthly budget.
  • Designer’s with efficient methods to save time during a project won’t be unfairly punished with a low cost.
  • It is easy to see how many projects per month need to be completed to determine profits and budget handling.


  • It is much more difficult to determine a fixed-price for a project before actually completing it.
  • Sometimes designers are underpaid using this method.
  • Payment doesn’t come at regular intervals, which may not be suitable for all lifestyles.


While hourly work may be what we’re all used to, there can be some equal pros and cons to consider when thinking about this payment system as a freelancer.


  • Budgeting is easier for those that require a daily or weekly budget.
  • It is harder to become under or over paid for a project.
  • It is much easier to explain to the client the final cost of a project.


  • It is hard to determine our own hourly rate based on the judgement of our own skills.
  • It is more difficult to work with a monthly budget.
  • Timesheets need to be filled out and there needs to be an effective way to transfer timesheets back and forth between the designer and client.

A closer look into these two types of payment plans can help a beginner decide. For further reading, look over Effective Strategy To Estimate Time For Your Design Projects.


Less Accounting is an all-in-one money managment application that will let one connect to bank accounts, and even let a freelancer invite a personal accountant login to help watch money. In addition, LessAccounting also features all the other basic money management needs for freelancers.

Mint may not be made for freelancers specifically, but it is one of the best tools out there for taking control of one’s own money. This is perfect for new business owners that may be low on money, and need to pay extra attention to their cash flow.

Tick is a time management tool aimed at organizing time so that freelancers can hit their budgets. It’s a great tool that breaks up time so a freelancer can enter hours worked, hourly pay rate, project pay rate, and more.

Slimtimer is similar to tick, in that it is a time and budget management tool. One can create tasks, time their own work, run reports, and manage their money overall more efficiently.


SimplyBill is a very simple invoicing tool to help effectively keep track of clients, their invoices, and to send invoices out.

Freshbooks is a great invoicing tool for freelancers with a lot of versatility to meet anyone’s needs. Best of all, it’s free up to three clients, so this gives designers plenty of time to decide if FreshBooks is right for them.

By the creators of QuickBooks, Intuit is a free alternative invoicing system that is perfect for designers just starting out that need to save that extra bit of cash.

FreeAgent allows a freelancer to manage all their invoices, and will even tell the freelancer what they owe the tax man.

6. Create a Résume

Without a strong portfolio just yet, new freelance web designers need to rely on a strong résume. This is a designer’s true chance to flaunt their skills in full detail. Most of us learned how to create a résume back in high school, and another good portion of us probably still hold on to our most recent one today. When venturing into a new freelance web design career, though, it’s time to tweak it to meet the needs of this new career path.

Below are some resources for creating the perfect résume for web designers and freelancers.

For a newly created web design freelance portfolio, providing a download link to a designer’s full résume may be just what the client is looking for.

7. Find “Portfolio Building” Clients

Now that just about everything is set up, it’s time to take action. Finding the first few clients is always tough, because nobody wants to hire a nobody. It may be near impossible to find good, well-paying clients yet, so sit tight and take on the first few “portfolio building” clients.

Image source: On the Block

Working for free is never fun, but it may be necessary. Do some volunteer work for a church or another non-profit/low budget organization. These services obviously aren’t hard to sell; just put an ad up for yourself up on Craigslist or in freelance and web design forums.

When creating an ad to offer free services, be sure to avoid failure. This means setting limits — no designer wants to spend a month on a complicated job making no money. Offer only PSD templates, 1-page websites, or something of the like.

Of course, this isn’t an option for everybody because we all don’t have the time, nor the patience to do a free job. If that is the case, explore some options below to get paying clients that will gladly deal with a new designer.

Put up fliers or an ad in the local newspaper to gain some local recognition. Not every potential client knows where to look online for web design services, and it may very well be that many are looking locally. Otherwise, they’re only finding top Google-ranked web design businesses that they can’t afford.

If a new designer comes to them offering cheaper services, whether in the form of a newspaper ad, a flier at a grocery store, or through word-of-mouth via friends and family, they’ll be very happy to hire.


One more option requires no actual clients at all. Many designers choose to make free templates in their spare time, and use them to advertise their services, show off what they can do, and in some instances, sell them for some residual income.

Over at ThemeForest, Collis has sold a PSD template at $10 — 168 times. This means over a thousand dollars in his pocket, and a great portfolio piece to show off.

Unless one makes spewing out free or cheap templates, WordPress Themes, or scripts their full-time business, this isn’t going to be a great option for making monthly living expenses. It is however, a great alternative to 1) get a designer to create some portfolio pieces, 2) get the designer’s name out in the community, and 3) let the designer make a bit of extra cash.

However, it is important to try a few real clients as well, for the business experience.


After finding a few clients, keep these few things in mind.

  • Create a personal (yet professional) connection between the first few clients. This may welcome great testimonials and word-of-mouth clients.
  • Offer variety in your services when starting out. For example, one may want to try logo design, web design, and basic coding. Later on, when trying to add a new service to the freelancing business, this will make for a much easier transition.
  • Just because new designers have to deal with low (or no) wages, doesn’t mean they should offer low-quality work. Put in the hours and create something great. Keep in mind that there is more to the first few projects than just the money.


BaseCamp is a very popular project managment tool for freelancers. With BaseCamp, a freelancer can share files, set deadlines, assign tasks, organize feedback, and more.

Zoho Writer
Essentially, Zoho Writer is an online word processer. In addition to being that though, it is aimed at freelancers, with the ability to share documents and collaborate with clients in various ways.

Big Contacts
Big contacts is an online contacts solution to help share files, email, have meetings, send notes, and more between the freelancer and client.

8. Create (and Stick to) a Schedule

A huge part of freelancing is finding a schedule that fits the designer’s needs, and allows the designer to get the necssary work done on time. It is a step in itself to becoming a professional freelance web designer.


To find a schedule, a designer needs to find how much time it actually takes them to do the tasks at hand. A freelancer has to ask themselves, “How much time does it take to create a simple PSD template, and then how long does it take to code it?” Depending on the skill sets of individual designers, this length of time can greatly change. However, work from previous clients or the creation of sample templates can give a rough estimate.

After determing how long the workflow takes, decide on a daily hourly input for work — and work only.


A general daily schedule depends greatly on each designer’s personal lifestyle, and is something that needs to be predetermined in order to be successful. After a designer realizes how much time it takes daily to get the required amount of work done, he or she should create a daily schedule for themsleves.

A daily schedule will help aid the designer to stay on track, instead of constantly checking email, jumping back and forth between projects, or ignoring client work altogether.


On top of a daily schedule, freelance professionals should also make a weekly and monthly calendar. A broader calendar can be used to keep track of deadlines and plan out longer projects.

Whether it be a calendar hanging on the wall or a web-based calendar like below, make sure to keep track of deadlines, payment schedules, and other checkmarks along the way of a project.


Anyone can see the benefits of a steady schedule, but the hardest part for most may be staying motivated to keep to it. Below are some things to keep in mind if the urge to break a preset schedule creeps up.

  • Do the same specific thing during work at the same time every day. For example, check email first thing in the morning, then start directly on client work.
  • For those who have already quit their day jobs to pursue this career: Wake up at the same time everyday. If it means sleeping in a few extra hours than the traditional worker, that’s fine. However, having a constantly altering start to the day can mess up a schedule, even if things are done in the same order during wake time.
  • Write a to-do list in the morning of items that need to be addressed that day.
  • Use a calendar and daily planner to keep track of daily, weekly, and monthly tasks.


Dejal Timeout
Quite the opposite of most time managment software, this application actually tells you when to stop working. With timed breaks, this tool can help a freelancer have an overall more relaxing career.

Google Calendar
Google Calendar is a great option for those that use Google’s other tools a lot, in that it will be all in the same place. Like many of Google’s other tools, it is free, versatile, and very useful.

Ta-da List
Ta-da List is an easy to-do list tool hosted online for convenience. It is easy to create lists for one’s own use, or for others.

9. Create a Business Plan

One of the most boring and tedious tasks one can do is create a business plan. Most might feel free to skip this step, but wait a moment and consider the benefits (and assurances) of taking the time to create one.

Benefits of a Professional Business Plan:

  • Creates a real business in the designer’s eyes, and in the client’s eye.
  • A business plan can be used in tricky legal situations, to differ the business from just a hobby.
  • Identifies future plans, direction, and goals for the business.
  • Keeps the designer, as a business owner, on track with the development of the business.
  • Upgrades the simple monthly budget to a long-term financial structure.

Anyone can see the benefits range from business growth, to financial growth, and credibility. To learn more about creating a business plan, view the helpful article on About.com, Back to Business Planning: Developing a 4-Part Business Plan for Freelance Designers.

10. Know How to Gain Recognition

Not all designers are marketing experts, but a bit of knowledge about how to gain recognition in the freelance web design world is necessary to be successful. Designers should do research on marketing, and create a long-term plan for the growth of their portfolio and their reputation as a freelance designer.


Use social networking sites to not only promote a portfolio, but also to promote new designs and projects. In addition, one can use Twitter, or something similar to get valuable feedback on current projects. For more ideas on how to get the most out of Twitter as a web designer, take a look at Ramsay’s post: 5 Simple Ways Twitter Can Make You a Better Web Designer.

Also, those who are active within social media communities benefit far more than those who use them for only self-promotion. Create a community, find other designers, and even discover some interesting finds along the way. Take the time to enjoy social media websites, while gaining recognition as a web designer.


Knowing where to look for more work is necessary when depending on that work for a decent income. However, with thousands of freelancers floating around in forums, job boards, and other sources of possible clients, getting noticed can be some hard work — especially when others (who may be doing it for just a hobby) are willing to offer their services extremely cheap.

To get noticed by clients and win a job, follow a few of these simple rules.

  • Don’t apply to jobs that are more than a few days old — chances are they’ve been filled, and it’s really a waste of time.
  • Use multiple job board websites and forums to have a wider range of possibilites.
  • Be a good designer. This sounds like a dumb tip, but often times clients get application for web designers that either 1) aren’t good at design or 2) have designs that show no unique abililty and are very ordinary.
  • Don’t apply for jobs that you don’t qualify. Client’s can’t stand hearing, “I haven’t done a design for the style you’re looking for, but I’ve been creating websites for X years and could probably do it.” The next designer that comes to them with a decent portfolio proving they can meet the client’s needs is going to get the job instead.
  • This shouldn’t even have to be said, but sadly, it does: Capitalize your sentences, use correct grammar, and don’t make spelling mistakes when applying for a freelance job.

As for the best tip of all — don’t sell work cheaper than it needs to be just to gain a client. If a client can’t see why a logo design costs $200 when the kid that applied the day before is offering the same service for $20, then it’s really their own loss. Somtimes it’s worth losing jobs, and that’s a part of the difficulty when just starting out.

11. Blog often, but pay attention to the quality of your posts

Blogs are great for improving search engine rank and gaining popularity in the web design community. Whether designers have a lot of time or barely enough, a blog showcasing interesting finds or discussing anything related to the web design or the freelancing profession can gain an audience fast.

Below are just a few websites that use blogs to promote their general careers as freelance web designers.

WellMedicated.com really doesn’t update that often — only about once every two months — but it’s still a well respected design blog in the community. Andrew Lindstrom is a freelance web designer, and spends most of his focus on that. However, with a great following on his blog, he can easily gain traffic to his web design portfolio through his sidebar and about page.

In a recent interview of Steven Snell of Vandelay Design, Steven discussed how the popular Vandelay Design Blog was indeed intended to bring more traffic and clients to the Vandelay Design portfolio. Well, that mission was very successful, and the blog changed direction to fulfill the wants of a different audience, as a full-time design blog.

Now, it is updated every few days and it’s goal is no longer to bring portfolio traffic. However, with a link to the portfolio and further information about the web design business, there is no doubt it still does.

Chris Spooner’s blogging experience started with just some simple experimentation, and as a place for him to simply explore and share. However, the blog soon gained a lot of popularity, and now does great work in promoting his portfolio as well.

So the lesson to be learned is, no matter what reason a designer has to start a blog, it can be a great source for traffic and a way to gain recognition in the community. Not to mention, the additional income from selling advertising spaces.

12. Get into the Community of Freelance Web Designers

Don’t be a freelancing loner. Getting involved in the community and meet other web designers and freelancing professionals to grow as a designer.

Make contacts within the community by blogging, joining a design network like Envato, and using forums. One could also donate freebies to larger communities, or try to do guest posts.

Below are just a few ways gaining a strong social network in the community can help a freelance web designer.

  • It creates a support group. Guessing that many freelance web designers don’t have many offline friends or family that do the same thing for a living, having an online support group for your field of interest can be very beneficial. Get into the web design community to share, rant, rave, and get feedback as a designer.
  • Learn new things. Following a blog regularly, being active in social networking sites, and participating in forums is a great way to improve your current abilities, and expand horizons. Instead of grinding away at what needs to get done or what needs to be learned for a current project, being a part of a community will help you to explore new things and find inspiration.
  • Become an authority and let the clients come. Being the best designer in the world doesn’t make that designer an authority figure. As skills and wisdom improve, others in the web design community will reference a designer’s work, portfoio, and services for them.


Attending various web design and other conferences for webmasters is not only a great way to network with other designers, but also a great way to learn new things and keep up with the latest trends. Get to some conferences, and become a real person, rather than just an online presence.

Below are just a few popular conferences within the community.

An Event Apart is an intensely educational two-day conference for passionate practitioners of standards-based web design. If you care about code as well as content, usability as well as design, An Event Apart is the conference you’ve been waiting for.

For Web Designers, Creatives and anyone who cares about web design.

Web Design World
Since 1997, we’ve helped thousands of Web designers learn what they need to know to make better web sites, manage web projects, and get home at a decent hour.

As a freelancer, we have the ultimate schedule for attending these events, and it can be easier than for others to gather the funds. In order to truly succeed, freelance web designers should attend these events to socialize, learn, and grow their freelancing web design career.

13. Reinvest the Income

It takes money to make money, so when starting out, reinvest some of the income made back into the freelancing business. It’s tempting to pay off bills or buy something nice once it can be afforded, but dedicate a certain percentage to the business’s growth.

Among the many things that need to be maintained for a freelancing business are software upgrades, hosting and domain renewals, desk space upgrades, stationery, and more. In addition to maintinence items, though, some of the income may be turned into a luxury web design item — for fun and for work.

Figure how much of the income is actually needed for living expenses, and use either all of the remaining profit, or a strong percentage of the profit to go back into the business.

14. Get a Professional Space

Finding a place to do work may help new freelancers differ play time from work time. On another note, a good workspace is needed to keep organized and create an effective workflow. Below are two great workspaces that are effective and fun, both held as a home office.

The workspace of Ben Mautner provides a lot of worspace to get things done, with plenty of inspiration handing on the walls as well.

Jay Hilgert’s office space is is clean, neat, and trendy — but also has all the necessary equipment.

Beyond a home office’s benefit of staying organized and aiding in getting some work done, it can make anyone finally feel like a true professional freelance web designer. You may want to take a look at the workstations of other designers as well.

15. Keep Learning New Tricks

As the final stage of the transformation comes into completion, there is only one more thing that needs to be done to create and maintain the status of a professional, freelance web design career. That final step is to keep learning. Designers should always be discovering new practices, techniques, standards for client work — and also tweaking their own business along the way.


Hopefully, this walkthrough can help most web designers just starting out in freelancing go down the correct path. Freelancing in the web design niche is an exciting and freedom-filled career path, although it requires a mix between design, development, and entrepreneurship. Finding a good grasp of all three can only mean success as a freelance web designer.

references: carsonified, smashingmagazine

Build a Better Website

Build a Better Website

Your site is your front door for many of your customers. If old-school web design is holding you back, follow these tips to make it inviting again.

Joey Rubin, a business partner in the Los Angeles restaurant Neighbor, had a website.  But he realized it wasn’t enough.  He wanted something unique, something that better mimicked his carefully though-out brick-and-mortar operation and offered more freedom to showcase images.  So he hired a web developer to come up with a new one.  “We built the brand, the restaurant, the interior, the kitchen, the staff,” Rubin says.  “We had to build an original site, too.”

His experience is familiar to many founders.  By now, if you have a business, you have a website.  But as your company grows, you may find that the do-it-yourself site that you built for little or no cost  on a platform like Wix or Squarespace no longer meets your needs.  Maybe you’re in the market for a signature look that stands out from your competitors’, or maybe you need more than you once did – a more sophisticated system of cataloging products, or the ability to process simultaneous transactions or an inventory-tracking system that can scale.  If so, it may be time to hire a developer, a designer, or a combination of the two.

First, says Melanie Spring, founder of the marketing strategy firm Branded Confidence, decide what you’ll need from a new site.  Do you need a calendar that communicates with a back-office reservation system, or an online catalog of products, that’s tied to a back-office warehouse?  both require an API – an application protocol interface, which is how web-based systems talk to one another – and typically a developer who can enable that communication.

Be prepared to take a hard look at your budget.  Brent Lightner, founder of the digital agency Taoti Creative, has a simple rule: “If you have less than $10000 to invest in your website, figure out to make a freelance web developer work on a relatively basic site.  When your budget is closer to $25000, think about hiring a developer to build a more customized site.”  A consultant can help you sort out the options if you have complex needs.  Mukesh Vidyasagar, a founder of Cappsure It, which sells software that allows landscaper to track field crews’ activities in real time, hired a marketing consultant with online design experience to map out an upgraded version of his company’s site, which had been built with Wix.  “He laid it all out using Elementor,” says Vidyasagar, referring to a website building tool that works with the popular WordPress platform.  The new version “is way more sophisticated” than his original site, which had limitations with load speeds and integrating other kinds of marketing software.

You should also be aware that more users now access websites from mobile devices than from computers.  That means your new site should be designed to shine on smartphones.  “Design with mobile in mind,” says Spring.  “Think about the mobile users and what they came to see.”

Originality is key, but avoid the temptation to layer on too many bells and whistles.  What can you do without?  Video with sound and “too many moving things,” Spring says, can put off potential customers an make websites take longer to load.  And remember that Flash, Adobe’s software for viewing multimedia, may have been all the rage in the aughts, but now it’s out.  “Kill it,” says Spring.  “Your phone doesn’t process Flash,” which, given current web-browsing trends, makes it all but irrelevant.  If no one sees your beautiful new site, does it exist at all?

References: Branded Confidence, Taoti Creative, Inc.

25+ Noteworthy Tools For Web Design

25+ Noteworthy Tools For Web Design


Macaw Scarlet

First on the list is Macaw Scarlet, a tool so fresh, it’s not out yet! But then, it’s from the guys who brought us the original Macaw, so lots of people are excited anyway.

Billing itself as a “live design environment”, Macaw Scarlet will be geared toward making responsive web design easier for everyone.



Wagtail is not a design tool, it’s a CMS. And yet, it could easily be included in the design work-flow, especially where content design is concerned.

You see, it has a fantastic feature called Streamfield, which works a lot like Medium’s post editor. The difference is that it’s customizable, and thus more powerful. This makes it a lot easier for the user to design content on each page.


Magic Mirror for Sketch 3

Heres one for the Sketch users. Basically, it makes a sort of smart object designed to help you put mockups into stock photos.



Wire Flow

This one gets my personal stamp of approval. It runs fast on my normally not-drawing-friendly tablet, and comes with just about everything you could ever want from a wire-framing app.

It’s also designed to work with phone-sized devices, which could be a great way to properly visualize a phone app interface.


Apple Watch wire-frame kit

Wireframe UI elements for the Apple Watch! What more do you need to know?



There has been more than one wireframe toolkit for Apple’s Keynote software. It was only a matter of time before someone made it happen for Powerpoint. And they have. Here it is.




Coming all the way from Facebook itself: “Origami is a free tool for designing modern user interfaces. Quickly put together a prototype, run it on your iPhone or iPad, iterate on it, and export code snippets your engineers can use.”

No word yet on how useful those code snippets actually are. But it’s Facebook. They have good engineers.



With simple tools, and a solid free plan, Marvel makes a great prototyping app. It integrates with Dropbox and Google Drive, importing any images you specify, and allowing you to link them together in a quick mock-up of an app.

It keeps your imported images synced, too. If you save new versions to Dropbox or Google Drive, your prototype app automatically gets updated.



Protosketch is a prototyping app (kind of) designed for the iPad. It comes with a UI kit (including tons of components), basic vector tools, alignment tools, and a lot more.

It’s currently in beta, and it’s only for the iPad, but if that’s your platform, this could be perfect for you. It plays nice with other apps, too: it can export your files in raster formats, SVG, and PDF.



Like many other tools on this list, Frontify does prototyping. It also offers tools to make working on branding and style guides as a group easier. Create your color palette, define your style, and create a library of UI elements, and share it with the rest of your team.



Use Atomic to pull in your files from Photoshop or Sketch and make prototypes from them. Version control, collaboration features, and more make this an excellent tool for slick, fast, iterative design.



Form is an advanced prototype creator that works in tandem with your iPhone. Create the prototype in your desktop or laptop, and see the results immediately on your phone. Plus, it uses Google’s Material Design principles to make your prototype look great.



Pixate specializes in high-fidelity “native” prototypes that are displayed on your phone and work a lot like the real thing.




Sandvox is a Mac app for the non-coders among us. It’s largely template-based (as is an ever-increasing portion of the Internet), but does make provisons for more advanced users to add stuff in manually.

It doubles as a sort of CMS for some kinds of sites, like blogs, and though the software isn’t “new”, recent versions have introduced Sandvox Hosting. The hand-coders among us might recoil at the idea, but for newbies, the package deal is actually pretty great.

It does work with any host, though, so if you want to handle that yourself, you can.



A site builder for beginners, XPRS offers free sites for personal use, for artists and students. There are pro plans for business and e-commerce.



Themify Flow

WordPress may have its detractors, but others are taking it in surprising new directions. The guys over at Themify, for example, decided that it was time to create a design tool on top of the publishing platform.

The result is Themify Flow which allows you to create custom, responsive WordPress themes from a drag-n-drop interface. Best of all, it’s free and open source.



Cornerstone is sort of competing with Themify Flow, in that it offers a visual way to create WordPress themes, right on top of WordPress itself.

It operates differenly, however. For example, it features a live code editor, and other features design to give developer-level access to the front-end design. Also, it’s not free, unless you buy the X Theme.



Quards is another page builder plugin for WordPress. Most of the design work is done for you, but instead of choosing a single template, you build each page with “cards”.

These are basically pre-made layout sections which can be mixed and matched to build a whole page. It’s good for landing pages, arranging individual articles in new and original ways, promo sites, and those sorts of things.




A quick and easy tool for Slack users who need to share their design work a lot. With extensions/apps for Adobe CC, Sketch, Chrome, and OSX, it simplifies sharing whatever you’re working on.


Skala Preview

Want to see previews of whatever you’re working on in Photoshop or Android? Just installSkala Preview, and you’ll be able to send lossless, color-perfect previews to just about any mobile device.

It comes with the option to plug the device into your computer via USB instead of using wi-fi.



RightFont is a fast, pretty font manager for Mac that integrates with Adobe CC and Sketch.



jQuery 3

The jQuery 3 alpha has been released. There aren’t any new features to speak of, but there have been extensive re-writes of old features, bug fixes, and performance improvements.


Simpler Sidebar

Speaking of jQuery, there are a number of new plugins out that could make a designer’s job a lot easier, especially if you’re a designer who also codes a bit.

We start with Simpler Sidebar, which makes sidebars. It’s small, it’s fast, it’s pretty. Just don’t use a hamburger menu to trigger it, I guess.



Label your radio buttons and check boxes in style. Great for the designer who just can’t let browsers do things their own way.



When filling out forms, I occasionally click on a field, get distracted by something, and then come back to it. If that field was labeled with a placeholder attribute, I sometimes have to un-select it to remember what I’m supposed to be typing.

Silly, but human.

smartplaceholder solves that design issue by keeping the placeholder visible below the text being typed. Neat, right?



We’d be remiss if we didn’t call attention to the great work being done on already well-known apps. Here are the ones that have had some noteworthy updates recently:


Webflow has been integrating thirdparty services into its functionality (much like the rest of the Internet) in some new ways. As of now, you can add functionality to your web forms right from Webflow.

You can add e-mails to Mailchimp lists, send out tweets, add data to Google spreadsheets, or make a new note with Evernote. You can also, incidentally, have your form send an e-mail.



InVision has been introducing new features steadily, including free, unlimited mobile user testing, a workflow manager, Dribbble integration, and emoji. Yes, emoji.



In recent months, Strikingly has introduced a new page editor, collaboration, and it even added an RSS feed for its blog functionality… Better late than never.


Adobe Muse

Lastly, Adobe Muse is still a thing — hey, not everyone needs the power of DreamWeaver. Like its more powerful older sibling, Muse can now use any font from TypeKit.

It can also now create blogs, e-commerce sites, and improved contact forms. Plus, like some other apps in the CC suite of apps, it can now access the massive Adobe Stock library.

reference: webdesignerdepot

The Mystery of the Typographic Scale

Why these numbers? What relationships do they hold with one another? Is there some mythical secret held by the casters of the fonts of old? Why is it that when you combine 8, 10, 14 and 36 points of the font’s height, something beautiful happens? In an effort to better understand this list of numbers I did that which excites any warm-blooded designer – I played with typography.

In its infancy, typesetting was much less an avenue for creative expression than it is today. That isn’t to say there was no beauty in the work done, it was more a case of limitations of technology. Which is an odd thing to say, as it was because of this technology that the rules could exist in such a defined manner. The typesetting was deliberately strict because it was now possible for it to be so. When our letters went from being written by scribes to being moved by the typesetter, the creativity in the hand-crafting turned into an element to be held by a different group of hands.

The Typographic Scale

With this new ability to set size, spacing and layout in stone (or metal), it is no surprise that some habits became ruling and some rules became habit.

While we are now able to set our text size at whatever we please, in the time of the true font (metal type in one face at one size of one weight), a number of predefined sizes were the norm.

Note: At this point it is probably worth noting where I got the above scale from. It is the scale as dictated from The Elements of Typographic Style. Different applications use a variant of this scale, but because I got this book (my bible), I’m going with what Mr Bringhust gave us. And thy will shall be done.

I pondered the meaning of the sizes included in this historic scale that is now routinely found in virtually all applications that you let work with type. I wondered their relationships to one another. I tried to understand the increments and if a formula was used to get to these numbers. I wanted to figure out the secret in this list of points.

Then the obvious hit me

It hit me hard. It isn’t in the sizes of the fonts that relationships of hierarchy solely exists – that’s something for the aesthetic sensibilities of the typesetter to decide upon, not something to be spelled out by a list of numbers. No, the sizes were chosen because of convenience as much as they were because of some special, fancy-pants relationship they shared. The scale is more of a guide. A way of saying ‘if you stick with these sizes you’re given a hint to develop beautiful typography’.

Read almost anything on the typographic scale and it’s juxtaposed with the notes of music and it’s easy to see why. Imagine someone sitting down at a piano, having never played, but knowing that if they stick their finger on a key at one end and run it up to the opposite end, it’ll make a little bit of noise that may be considered musical. But really, it’s bit of a cop-out, isn’t it? Now imagine someone who knows how to handle those keys, those notes, sitting down and playing something befitting to a king. They play with the notes, they have them dance and swing together. The same can be said with the notes of the typographic scale handled by an artist whom knows their instrument.

While you might be able to go, bam! 8pt for body, 10pt for headings and 14pt for title, you’re really just emulating the amateur pianist’s fingering of the keys from one end to the other. Much like the musician who has the notes dance, it’s the time around those notes, the space around your text, that will make a real difference. This is where the scale gives you some more hints.

The notes of the typographic scale serve as a guide, as options that one can use, and if used properly, can create some beautiful music.

Of course, the other reason predetermined sizes would have become the norm is because it makes it easier for printers and typesetters and publishers to work. Much like all the printers of today work with Pantone colours, having most printers carry the same, or close to the same, fonts meant that things were easier for everyone from the typesetter who may have apprenticed at the print shop in another town, to the metalworker who could cast multiples of the same font and sell them to different clients, all of whom are safe in the knowledge that these fonts work because they’ve worked before, for that other printer. But I digress.


I thought we’ll start with the body and work our ways up towards the title.

For the most part, a font-size of 8pt for body copy will suffice. Of course, it depends on the typeface chosen and how much text there needs to be on a page (especially in relation to page size and margins), but 8pt-10pt is a great range for body type.

Another safe bet is to set your leading to 10pt, or using the standard short-hand of 8/10pt. Leading is a delicate thing when it comes to large bodies of text, so you wouldn’t want to loosen it too much – 8/10pt, 9/11pt, 11/13, 12/15 (notice how it starts to get slightly bigger the larger the font? Knowing what size to set will come from experience with the font you’re using – some will need more, some less, but go with 120% and rounding up to the next whole number is another nice starting point) are all good pairs.

Most applications automatically set your leading to 120% of your font-size. While there is nothing wrong with this most of the time, working in whole numbers is something I prefer and it makes the next few rules about spacing a little easier to work out on the fly.

Another general rule is to use half to a whole line of your leading for space-after a paragraph, that is, if you aren’t indenting your first lines and avoiding space-after altogether. So 8/10pt will result in 5pt for space-after. Let’s see how that turns out.

Click here for a PDF document.

Comfortable, no?


What is a body without a well proportioned head on its shoulders? If not treated correctly, it’s easy to end up with a monster befitting the labs of Frankenstein.

For this article, we’ll discuss two ways of setting subheads – setting in the same size as the body text, or setting it in a larger font-size.

If a subhead is to be set at the same size as the body text then it is up to spacing above and below to give it strength (plus a little flare if you’re daring, but we’ll get to that).

The space above and below works best when it is equal to that of a line of text (the leading value), or a clean multiple of it.

Click here for a PDF document.

The options being along the lines (see what I did there? Ha for me!) of:

5pt above and 5pt below – equalling one extra line
10pt above and 10pt below – equalling two extra lines
8pt above and 2pt below – one extra line
22pt above and 8pt below – three extra lines baby!

The first option is almost a last resort as 5pt is the same as our space after or body text, but
if you’re dying for space, this plus some styling is an option, but our third option of 8pt above, 2pt below is probably a better space saver. It’s just worth mentioning as a starting point of how spacing can work.

Don’t forget that our subhead belongs on the shoulders of our body – don’t put more space after it than before unless you’ve thought it through a smidge and are doing something more. It’s often also nice to have a little space after our subhead, but not much, just something of a chin.

The other option is to set the subhead at a larger size and, for arguments sake in this case, giving it some styling. Looking back at our scale, let’s try two options.

Click here for a PDF document.

We’ll start simple and subtle. Like our leading did, let’s jump two steps up on the scale for our subhead – 10/12pt.

As for styling? There are an infinite list of options really, but it’s always best to keep it simple. Typographers craft their fonts and a lot of work has gone into them before we load up our copy of InDesign. More work than we could ever imagine. They are strong as they are if you’ve chosen right and don’t need to have layers and layers of make-up on them. Treat them gingerly and with a little respect.

A few simple, respectful, options:

Small Caps, spaced generously at 75 (elegant)
U&LC, Italic (delicate)
U&LC Red (subtle)
U&LC, Bold, Red (strong)
Small Caps, spaced generously at 75, Red (confident)


The same rules as the above work here—make sure that your heads are stronger than your subs and body through generous spacing, an increase in size or stronger styling. This is probably starting to get to be obvious so I’ll keep it brief at this point – keep following some rules of the scale and you’ll do just fine.

Click here for a PDF document.

Example One
Head – 10/12 36pt above, 12pt below U&LC bold, Red.
Subhead – 10/12 8pt above, 4pt below, U&LC Italic.
Body – 8/10 0pt above, 5pt below.

In this example it is the spacing that gives strength as much as it is the red skin we’ve applied to our text. Even though our head is the same size/leading as our subhead, the red and spacing above and below give the line of text some extra strength.

Click here for a PDF document.

Example Two
Head – 14/14pt, 36pt Above, 10ppt below, Small Caps, spaced at 75.
Subhead – 10/12pt, 8pt Above, 4pt below, U&LC Italic.
Body – 8/10pt, 0pt above, 5pt below.

You’ll notice that example two is 14/14 rather than, say, 14/18. The reason for this lies in the Small Caps styling. Having our text as solid lines makes the space a lot less dynamic and the space looks very large. 14/14 gives a nicer look. Beautiful type without the use of colour. You’re client and printer will love you for this.


Click here for a PDF document.

Ohhhhhhh yeah, 36-points-high. Big. Beautiful. Strong. That’s some sexy type right there.

At 36 points, our title is strong enough that no extra styling is required. U&LC, black. Simply stunning? To add too much styling, too much flare, will turn a piece of typography from strong to obnoxious.

Something worth keeping an eye on is the text that follows the title. In this case it is our heading, so I’ve left the before-spacing of the this line of text to do the work. However, should you run straight into body text (subhead will never come up), then consider adding extra space after.

A part of your kit

As I mentioned early in this article, the typographic scale is only part of your kit. On it’s own, you’ll get somewhere. But when you learn to use this instrument, you’ll do something beautiful. Whatever the reasoning behind the numbers chosen is beyond me (aside from aesthetics and the benefits of having defined sizes when metal type was a bigger industry), it serves as something closer to a map that outlines giant pieces of fruit and men with beards of bees. It makes for an interesting trip.

The values I outlined here are what works for me at this point in time. My tastes will no doubt change. I might prefer to go up a point here or there in a few months. I wasn’t trying to write a canon on the usage of the typographic scale. I’m only want to show an application or two of this scale and see what we can learn through a little exploration. You could of course make changes to this historic scale to suit your tastes and needs. But have reason for your decisions, whether they are strict or anything but.


reference: retinart

Dynamic Web Typography with Typekit

Web performance budgets are a hot topic right now and for very good reasons. We as designers have been let off the lead recently (relatively free from not doing things because a certain browser can’t) and are having a blast using big high-res imagery, background videos and the font-stack of our dreams. Unfortunately all of this comes at a cost, and that is a monetary one to the user (data isn’t cheap!)

Serving responsive images is taking a step forward to having a solved and agreed upon solution by the introduction and across the board support for srcset (and video isn’t far behind). However fonts usually don’t come into the discussion on how we can shave off pounds from our websites because, although font files can be quite heavy, they’re very important to the design.

Adobe Typekit have done something very clever called Dynamic Subsetting which has potential to become the srcset of font-stacks. It was born out of Typekit adding East Asian font support such as Source Han Sans which has glyph counts ranging from 18,000 for Japanese and 31,000 for Simplified Chinese. There are not only a lot of glyphs but also a lot of weight with sizing ranging from 4.2MB to 8.8MB per font!

Adobe Typekit Dynamic Subsetting Option

If a site is using Source Han Sans for instance it’s not best practice to serve the entire glyph set. When you add an East Asian font family to Typekit it will automatically become a Dynamic Kit (thats the whole kit, not just one typeface). When your Dynamic Kit JavaScript loads in the browser it detects the characters you’re using and requests that only the used characters are sent. For example, say you’re using a typeface to set a homepage h1 to read “Betty’s Buttery Bakery” then instead of the font-file containing all of it’s glyphs, it will only contain A-B-E-K-R-S-T-U-Y-‘ in a smaller (much faster loading) font file.
It’s clear to see the benefit of this approach when using huge typefaces like Source Han Sans but it’s also useful for latin fonts too.

As you know Latin fonts are substantially smaller in glyph count and weight than East Asian fonts but sometimes site designs require multiple fonts to be served (separate typefaces for header and body copy with various typeface weights used for each for example) and this can quickly add up. At the moment Dynamic Subsetting is only available for East Asian fonts (and will be coming to Latin font families shortly), however if you want to use it in your Latin project now, there is a workaround.

How to use Dynamic Subsetting in your project

Add the typefaces you need for your project

Default Latin Typekit options which does not contain the dynamic subsetting option

As you can see, there is no option to add Dynamic Subsetting to this kit. To activate this option you can simply add an East Asian font to the kit (like Source Hans Pro) and you’ll be given the option of converting the kit to a Dynamic Kit.

Convert to dynamic kit popup option

Press the ‘Convert to dynamic kit’ button and your kit will update to the new format.

Dynamic Subsetting option shown when East Asian typeface added

Next you can remove the additional East Asian typeface (don’t worry the kit will stay Dynamic)

Dynamic Subsetting options still available to Latin only typefaces

Then use your kit as you usually would and it will include Dynamic Subsetting.

But what if my site contains comments or dynamic content?

Don’t worry, instead of re-downloading a new font for any new glyphs (or even worse not showing the new content in your chosen typefaces, gasp!) Dynamic Kits look for any changes in the DOM and request that any new characters be added to the local copy of the fonts. Adobe call this Dynamic Augmentation and it happens automatically for any font families in your Dynamic Kit.

Hopefully this helps to reduce your performance debt and speed up your websites without sacrificing good typography.


Reference: iamtomnewton