1stWebDesigner https://1stwebdesigner.com Helping You Build a Better Web Fri, 22 Mar 2019 13:08:23 +0000 en-US hourly 1 https://wordpress.org/?v=5.1.1 12 Bold & Modern Free Fonts https://1stwebdesigner.com/12-bold-modern-free-fonts/ Fri, 22 Mar 2019 13:08:23 +0000 https://1stwebdesigner.com/?p=145852 Are you looking for strong, memorable fonts that can instantly add some style to your website? Then look no further. Typography is one of the most essential parts of a website’s design, and it’s essential that you get the perfect fonts for your project. These twelve fonts aren’t just striking and elegant – they’re also free. Try them out and see if they can enhance your website.

Peace Sans

Peace Sans

This friendly font is perfect for any website that wants to boldly grab attention while still giving off a warm tone. Peace Sans is all about clean curves and smooth lettering. Plus, it supports glyphs from over seven alphabets, so sites from around the world can make use of it.

AXIS

AXIS

Axis is exactly what you see here – an all caps, simple, and straightforward font. No frills, and no nonsense, just a bold sans serif font. This one would look great in logos, banners, and other branding images. Try it out!

Neoneon

Neoneon

Now this is neat. Here’s an outlined neon typeface that would look just perfect on a poster or banner. With a few Photoshop effects, you could turn this font into a glowing masterpiece!

National Park Typeface

National Park Typeface

Have you ever noticed the distinctive style of signage at national parks? Those signs are carved with a router bit, giving them that unique look. Now you can emulate the style with this font, which comes in four different weights.

Ailerons

Ailerons

Tall and thin, Ailerons is an elegant display font designed for headers, large images, and any project where you need a huge typeface. Each letter design is unique, sleek, and gorgeous.

Cooper Hewitt

Cooper Hewitt

This professional sans serif font feels reminiscent of a modern newspaper’s typeface. Cooper Hewitt was made from scratch, and every curve and line within it is carefully designed. Download it in OpenType, Windows-compatible, or web font version.

Kolikö

Kolikö

Kolikö is a simple and clean typeface, beautifully designed with a lot of friendly energy. It comes with three styles: thin, regular and bold. Your headers will look fantastic no matter which you choose!

Modeka

Modeka

Modeka’s lightweight design and tall, angular appearance somewhat resembles that of technology fonts. But Modeka is versatile – it would look great in a project going for a high-tech vibe, yet in no way feels out of place in nature imagery. See for yourself if Modeka suits your design.

Higher

Higher

This stand-out font will make an instant impression on anyone who sees it! The Higher font is marked by its stretched, elongated letters. Making something bold and artsy? You’ll love it for sure.

Nordic

Nordic

Inspired by Norwegian runes, Nordic comes with two uppercase font faces and three weights per each one. Huge or tiny, Nordic looks great, and you can tell a lot of work went into each painstaking stroke. You have to pay for the full font family, but you can get the alternative regular font for free.

Achi

Achi

Symbol-like, modern, and clean. Achi would look great in fashion and aesthetic projects, or perhaps as an elegant logo. Fonts that break the mold like this are perfect if you want a website that will never be forgotten.

Etna

Etna

Etna is a font that focuses on beauty as well as readability. Many symbols and characters make it compatible with multiple languages, and you can get a coupon code for a license if you want to use this in commercial projects.

Bold Fonts to Make Your Website Distinct

Little is better for branding than great typography that leaves a distinct impression on everyone who visits your site. These big, bold fonts will look great as headers, for short blurbs of text, or on promotional images and banners. Try them out yourself, and let us know which were your favorites – though it might be hard to choose from such a beautiful collection!

]]>
10 Popular Google Web Font Pairings https://1stwebdesigner.com/10-popular-google-web-font-pairings/ Mon, 18 Mar 2019 13:54:20 +0000 https://1stwebdesigner.com/?p=145681 Selecting complementary fonts is never an easy task for web designers. Sometimes it’s hard to know where to even begin. If you’re having trouble putting together a good body and header font combo for your website, or just want a little nudge in the right direction, here are ten popular combinations that look amazing together.

Work Sans and Roboto

Work Sans and Roboto

These two fonts get along wonderfully. Work Sans is a font specifically made to be used at large-to-medium sizes. And while its wide letter spacing makes it unsuitable as a body font, it’s perfect for headers. Meanwhile, Roboto was designed to look natural and legible. It’s an extremely popular, practical font, and one that pairs well with Work Sans’ eye-catching but elegant appearance.

Source Serif Pro and Source Sans Pro

Source Serif Pro and Source Sans Pro

Looking for something a little more sophisticated? These two fonts were created in the same project to complement each other. Source Serif Pro will add a dash of style to your headers, while Source Sans Pro, made with user interfaces in mind, offers a streamlined, easy-to-read experience.

Playfair Display and Montserrat

Playfair Display and Montserrat

Playfair Display was made with traditional, late 18th century typefaces in mind. As a display font it looks best in your headers, where it will add a sleek, timeless look to your website. And merged with the Montserrat body font, which was inspired by early 20th century signs in Buenos Aires, you’ll achieve a surprisingly synergistic combination.

Poppins and Raleway

Poppins and Raleway

Poppins is a pleasing geometric font based around circles and curves. It works well as both a header and body font because of its versatile, beautiful design. Raleway, meanwhile, is actually designed as a large size font. Despite this, it works very well as a body font with Poppins. Try it out; you’ll be surprised at this unlikely combo!

Libre Baskerville and Lato

Libre Baskerville and Lato

These two fonts work together because they contrast well. Libre Baskerville is a tall, elegant serif font, while Lato is sans serif, modern, and designed to give off a warm, friendly feeling. Both of them will lend a lot of personality to your site.

Merriweather and Open Sans

Merriweather and Open Sans

The ever-popular Open Sans pairs fantastically with pleasant, friendly Merriweather. The latter’s wide, bold appearance makes it a great header font, while Open Sans’ simple and neutral design will make reading long passages easy on the eyes.

Space Mono and Muli

Space Mono and Muli

Monospace fonts are somewhat unpopular due to their illegibility in body text. However, Space Mono can make a great header, especially if you want to give your site a “technology” feel – perfect for a web developer. Combine with the minimalist Muli and you’ll have stand-out set of fonts.

Spectral and Rubik

Spectral and Rubik

Spectral’s beauty and Rubik’s simple, rounded design come together to make a lovely combo. With Spectral as a display font, visitors will be instantly drawn in by the light, sleek design, and Rubik will keep them there with its smooth look.

Oswald and Noto Sans

Oswald and Noto Sans

Based off of Alternate Gothic fonts, Oswald is tall, bold, and condensed – perfectly suitable for display text. Noto Sans was made specifically for compatibility. It covers over 30 scripts! If your site uses a non-English alphabet, look into this combo.

Ubuntu and Lora

Ubuntu and Lora

This is another font set that works because of contrast. Ubuntu is a versatile sans serif font that looks particularly nice in a large header size, while Lora has a gorgeous calligraphy-like style. Usually such fonts are unsuitable as body text, but Lora is refined enough to be legible while still giving off that distinguished air.

Combining the Best Fonts

Finding fonts that work well together is an art of itself. It’s important that your heading and body fonts are compatible, as choosing the right ones will lead to a more harmonious design. These ten font combos are a great place to start.

And the best part is, with Google Fonts, they’re all free and easy to import into your site. Get started using your favorite combo on your current project right away!

]]>
Top 10 UX Blogs That All Web Designers Should Read https://1stwebdesigner.com/top-10-ux-blogs/ https://1stwebdesigner.com/top-10-ux-blogs/#respond Mon, 18 Mar 2019 08:43:00 +0000 https://1stwebdesigner.com/?p=136080 There’s a lot to learn in the world of UX design. There’s so much terminology along with varying workflows that it can take years to master the craft.

It helps if you have some good reading material to keep you on the forefront of UX changes.

These blogs are by far the best places to start with frequent posts on UX design for websites, mobile apps, and general digital interfaces.

The UX Designer Toolbox
Unlimited Downloads: 500,000+ Wireframe & UX Templates, UI Kits & Design Assets


1. UX Booth

UX Booth

UX Booth has been online for years and they’re probably the most well-known UX blog on the web.

Each week they publish a few articles related to user experience and general design topics. It’s really a mixed bag of content but the quality is superb. Most of these topics are really groundbreaking so they talk about many ideas you won’t find on other blogs.

I highly recommend UX Booth as a must-read blog. It should be in your rotation if you do any type of design work.

2. Usability Geek

Usability Geek

Here’s another great blog on the topic of general user experience and usability.

On Usability Geek you’ll find plenty of articles covering trends and design techniques for the web. There’s also a solid focus on mobile apps too along with workflows for larger teams like agile.

Usability Geek feels more like a general UI/UX and interaction design blog. It covers a little bit of everything, and there’s something here for everyone regardless of your background.

A fantastic read for new and seasoned designers alike.

3. UX Movement

UX Movement

If you look over the homepage you’ll notice UX Movement doesn’t update very often.

But when they do every post is fantastic.

This website is the cornerstone of new ideas for UX on the web and mobile. I’m always surprised at how insightful and valuable these articles can be, especially ones that offer results from case studies.

UX Movement’s biggest downside is the slow trickle of content. You’ll be lucky to get 1-2 posts every month.

So you probably won’t bother visiting this site weekly, but it should be on your radar. And if you’re looking to delve into the belly of UX design then try browsing through their archives to see what you can find.

4. InVision Blog

InVision Blog

InVision has turned into a massive company with their online prototyping & workflow tools.

During that time they also launched the InVision Blog which has some pretty great design articles mixed with some general lifestyle posts. Granted these are all interesting pieces and they’ll be especially relevant to designers.

But the UX-specific posts don’t come every day so you may have to browse through to find something you like.

The reason I like this blog is mostly their volume and quality of content. It’s truly a great read for anyone in the design space.

5. VWO Blog

VWO Blog

Another company blog I really like is Visual Website Optimizer.

On their VWO Blog you can search through case studies and opinion pieces discussing the state of user experience and split testing. Many of their case studies get mentioned on other design blogs since the content is original and invaluable to the design process.

You’ll also find topics on conversion rate optimization and tips to improve your landing page designs for specific KPIs like email signups or selling new subscriptions.

VWO is a trusted brand, and their blog exudes the same level of trust you’d expect from their tools.

6. Smashing Magazine UX

Smashing Magazine blog

Speaking of trusted brands, Smashing Magazine is probably the definitive design blog on the web. It’s been around for well over a decade and they’re still publishing great stuff.

I specifically recommend the Smashing Magazine UX section which just publishes content on user experience design.

Many top-tier designers from all over the world write for Smashing Magazine, so there’s a ton of opportunity to learn cool stuff. You’ll find articles on pretty much everything, but there’s a specific slant towards UX for web design.

If you’ve never read Smashing Magazine before then now’s your chance to delve into a gem of the design publishing space.

7. UXmatters

UX Matters

I’ve seen a lot of variety on UXmatters and it seems like one part blog, one part community and one part Q&A topics.

The site feels a bit strange because it’s not designed exactly like a typical blog. They do have columns you can read on certain topics with plenty of opinion pieces and case studies.

There’s also a list of top articles where some of them are pulled from print publications.

You may find that some of their best articles date back 5+ years and they still hold up even today. That’s some great writing and proof that good UX is ultimately timeless.

8. UX Design Collective

UX Design.cc

The UX Design Collective is not a totally unique publication. It’s a mix of unique content along with curated stories published on other sources and re-published on their site.

But most of those articles are obscure and tough to find since they often get shared on Medium or another blogging platform.

That’s what makes UX Design Collection so valuable. It’s a one-stop shop for everything you’d want to read about in the big world of user experience.

I specifically recommend signing up for their newsletter to get their recommendations for top UI/UX articles. It’s the best way to find out about new blogs and new designers writing about these topics.

9. UXstudio Blog

uxstudio blog

The UXstudio team has their own blog focused solely on user experience work. This is a great read and full of interesting ideas for future tech, team building exercises, and handling client projects with a focus on UX.

You’ll also find plenty of case studies mixed in which are really fun to read through.

You can learn a lot from skimming case studies just to see how other design teams handle their work. Check out their blog and see if you like the content. It may not be for everyone but it covers a lot of ground.

10. Nielsen Norman Group

NN Group blog

The NN Group is perhaps the most well-respected usability research team in the industry.

They frequently publish articles detailing their findings in various case studies and usability studies. Many of these are high-level ideas, and they’re perfect for semi-experienced designers who want to push their skills even higher.

If you’re brand new to UX design then Nielsen Norman may be tough to read.

But the more you practice in the field, the more their articles will make sense and even get you excited to sit down and read.

]]>
https://1stwebdesigner.com/top-10-ux-blogs/feed/ 0
8 Plugins to Improve WordPress Search https://1stwebdesigner.com/improve-wordpress-search/ https://1stwebdesigner.com/improve-wordpress-search/#respond Mon, 18 Mar 2019 06:33:34 +0000 https://1stwebdesigner.com/?p=138597 There are so many things to love about WordPress – but its default search capability is not one of them. It’s very basic and doesn’t account for things like misspellings or context. That can really hamper the user-friendliness of a site that’s heavy in content.

Thankfully, the WordPress developer community has created some fantastic plugins to bring search functionality up to snuff. Most are fairly simple to set up and will start providing better results in mere seconds.

Here is a collection of WordPress plugins you can use to turn your search field into a truly powerful tool:

Your Web Designer Toolbox
Unlimited Downloads: 500,000+ Web Templates, Icon Sets, Themes & Design Assets


Relevanssi

Relevanssi

Relevanssi is a great choice for those who are looking for fine-grain control over search. There is a plethora of settings to tweak. For example, you can add “weight” to post elements such as the title or tags used. It also accounts for a lot of the quirks involved with a typical WordPress site. Custom post types, custom fields, PDF documents and even the contents of Shortcodes can be indexed (note that some features may require the Premium edition). But even if you aren’t keen on changing a lot of settings, you can simply install the plugin, build your site’s index and instantly improve search.

Ajax Search Lite

Ajax Search Lite

These days, users are quite accustomed to using a “live” search that offers up suggested results as they type. It’s a feature that can really make finding a specific piece of content a more efficient process. Ajax Search Lite adds this capability to any WordPress site, along with the ability to filter a search by category or post type. Plus, you also have the option of letting the plugin replace your site’s existing search field or add it in via a Shortcode or widget. The Pro version adds even more features, like the ability to search a BuddyPress feed and media attachments.

Search Exclude

Search Exclude

There may be times when you want prevent specific content from being searchable within your WordPress website. Search Exclude makes this quite easy – just click the added checkbox in the post editor to hide that content from internal search. It’s important to note that this plugin will not affect any SEO settings for a page or post – just the ability for users to search for it within your site.

Advanced Woo Search

Advanced Woo Search

If you’re running an online store powered by WooCommerce, then search is critical to helping users find the products they’re most interested in. Installing Advanced Woo Search adds live search capability that also sports several powerful features. You can set specific product data like the category, title, content or excerpt to be searchable – or not. Product images and pricing appear in the results to make searching a more visual experience. A premium version allows for searching product attributes, custom fields and more.

WP Extended Search

WP Extended Search

As its name suggests, WP Extended Search takes the default WordPress search functionality and lets you tweak it to better suit your needs. Site administrators can enable the searching of specific taxonomies, meta keys from custom fields, post types and authors. A particularly nice feature is the ability to prevent the searching of content older than a specified date. This could be useful in ensuring that users are only seeing the most relevant results.

Highlight Search Terms

Highlight Search Terms

Highlight Search Terms exists to do one thing without any major fuss or hogging of resources (and the name sort of gives it away). Whenever a user performs a search, their terms are highlighted in the results. And, when a result is clicked on, the terms are highlighted in that page or post as well. Note that there are no settings to configure and you must define a CSS style for highlighting in your theme.

Better Search

Better Search

Built to be highly extensible, Better Search is similar to Relevanssi in that it offers up a ton of options. The main difference is that Better Search doesn’t require you to manually build an index of your site – it starts working as soon as you activate the plugin. Inside, you’ll find the ability to sort results by various methods, customize how the results look via a template, support for caching plugins and a profanity filter. You can also display a listing of popular searches to show what’s trending. There is a lot of power under the hood of this free plugin.

WP Custom Fields Search

WP Custom Fields Search

For WordPress sites that rely heavily on custom fields, WP Custom Fields Search can be quite valuable. It enables searching of any custom fields you have added to pages or posts, in addition to what standard WP search offers. But what’s really neat is that you can build a form interface to allow users to filter their search via custom field data. The UI includes a variety of form field types so that you can build a custom search form within minutes.

Get Top Results

While search may be a bit overlooked by WordPress core, it certainly gets the royal treatment via the plugins above. And, even though some of the options here offer a lot of potential for customization, you don’t need to dive that deep into the weeds to simply improve your search capabilities.

The main idea is that, if search is an important part of your WordPress website – don’t settle for the default. A little bit of effort will bring you much better results.

]]>
https://1stwebdesigner.com/improve-wordpress-search/feed/ 0
Did You Remember to Do These 5 Things Before Launching Your WordPress Site? https://1stwebdesigner.com/did-you-remember-to-do-these-5-things-before-launching-your-wordpress-site/ Fri, 15 Mar 2019 13:38:47 +0000 https://1stwebdesigner.com/?p=145599 A lot of hard work goes into building a website. And a site built with WordPress presents its own unique challenges. Not only do you have to ensure that your theme is pixel-perfect, you also need to make sure that you’re using the right plugins and coding practices.

Even then, there are still more mountains to climb. Take, for instance, the act of launching your new site. If you used a development environment to build your site (whether a local server or a non-public spot on a web host), some changes need to be made when moving to production.

It’s quite a delicate process – almost like a ballet. There are a number of steps involved, and each one has to be done just right. Otherwise, the whole thing could fall flat.

But not to worry! We have compiled a helpful checklist of things to do before launch. While it’s not exhaustive, it does cover some common items that can be easily forgotten. The goal is to ensure the smoothest transition possible.

1. Update to Production URLs

Using a development environment also means that you’re using a temporary URL for your site. Therefore, you’ll want to make sure that you’ve updated to the production URL via Settings > General within WordPress.

However, you may still need to update URLs within your site’ database as well. The settings change alone doesn’t affect hard-coded links within pages, posts, widgets or menus. So, you’ll want to do a search and replace to reflect the new address (just make sure you back up the database first).

The easiest way to do this is via a plugin, such as Velvet Blues Update URLs or Better Search Replace. This is the recommended route, since these plugins can help you avoid changing the wrong thing. Still, be extra careful with this step.

The WordPress General Settings page.

2. Turn on Search Indexing

When your development process is being done on a web hosting account, you may decide to block search engines from crawling your WordPress install. This is good practice, as you wouldn’t want to see your development site showing up in search engine results. It looks bad and could even negatively impact the current site’s SEO.

This is easily done in WordPress, by checking the Search Engine Visibility box within Settings > Reading. Yet, it’s easy to overlook after your site has been launched. Some SEO plugins, such as Yoast SEO, will alert you to change the setting. Short of that, it’s always a good idea to double-check.

The WordPress Reading Settings page.

3. Remove Testing-Related Content and Accounts

During development, it’s not uncommon to create content and/or user accounts in an effort to test a site’s functionality. Examples of this include placing WooCommerce orders or trying out user permissions on a membership site.

While not necessarily harmful, this type of content can look unprofessional if a user (or search engine) should stumble upon it. Plus, test orders could throw off aggregate sales statistics. Thus, it’s better to just get rid of it all before launch.

Any testing accounts, especially ones with administrator privileges, should also be considered for removal. If you do keep them, make sure to use strong passwords and follow other security best practices.

Bonus: Don’t forget to jettison the ubiquitous “Just another WordPress site” tagline in Settings > General.

Double Bonus: Inspect any forms to make sure they email to the correct recipients, rather than your own account!

A sample post in WordPress.

4. Check Commercial Theme and Plugin Licenses

If your site utilizes any commercial software that requires a license key, they may require some extra care before you roll over to production. Some of these themes and plugins are licensed for use on just one domain. Therefore, switching your site to the production URL may result in software that can’t be updated – leading to missed features, bug fixes or security updates.

How you handle this really depends on the software. Sometimes, simply deactivating the license on the development site and then activating it on production does the trick. Other times, you may have to login to an account dashboard on the developer’s website to reassign the license. There are also occasions where you may need to contact the developer directly for help.

A plugin license key page.

5. Optimize Performance

While site performance should always be a consideration during the build process, there are some aspects that are often saved for production. The installation and setup of a caching plugin, for one, is something that can be done after development. Why? Because, depending on how you go about site development, cache can annoyingly keep changes from appearing immediately.

If that’s the case, then it’s recommended that you do all of the setup and testing just before launch. This provides you with an opportunity to gauge speed and clear up any obvious issues before the public starts hitting the site.

Then, once the site is live, further tests can be done to ensure that everything’s in tip-top shape.

A listing of WordPress cache plugins.

Ready for Launch

Launching a new WordPress site is a big deal – and there are a lot of little details to remember. That’s why it’s important to have a standard process in place when flipping that switch.

Doing so will help you avoid issues that could both confuse users and make you look a bit sheepish. Of course, we’re only human and mistakes will happen. But the more prepared we are, the better the results will be.

]]>
Stay Productive with These Web Apps https://1stwebdesigner.com/stay-productive-with-these-web-apps/ https://1stwebdesigner.com/stay-productive-with-these-web-apps/#respond Wed, 13 Mar 2019 14:25:27 +0000 https://1stwebdesigner.com/?p=141144 When you’re a freelancer, it’s not always easy to stay on task. Without a real boss looming over your shoulder, you might find yourself posting on social media and watching YouTube videos five hours before the deadline hits. Even when you’re doing your dream job, motivation can be hard to find.

Luckily, you don’t have to do it alone. There are a variety of web apps out there designed to smooth out this process and make it easier to work consistently. These browser-based tools could be a godsend, so let’s take a look at the best productivity apps designed for freelancers.

StayFocusd and LeechBlock

StayFocusd and LeechBlock

Whether you prefer Chrome (StayFocused) or Firefox (LeechBlock), the premise here is the same: Start blocking those sites notorious for sucking away your time! If you find yourself wasting hours on social media when you’re supposed to be working, it’s time to shut those sites off by force.

Both extensions are highly customizable and allow you to block sites at certain times of day, when you’ve spent a certain amount of time on them, and so on.

Trello

Trello

Sometimes you can get the greatest boost to productivity simply by staying organized. Trello allows you to create “boards” for each of your projects, further creating individual cards within them. You can even add checklists, categories and other little tools to each card. It’s designed for teams, but it’s also great for keeping those personal projects organized.

TickTick

TickTick

For many, nothing is more satisfying than ticking off boxes on a checklist. The multi-device app comes with all the basics of a checklist app and more. From reminders and scheduling to priorities and tags (and turning emails into tasks). You can even work with your team on a checklist.

Focus Booster

Focus Booster

Focus Booster uses the pomodoro technique to keep you focused but fresh, with mini-timers that allow you to work in sessions with frequent breaks in between. If you struggle to stay focused after an extended time, this technique is perfect for you. You can download Focus Booster, use it on the web, or install the mobile app.

Habitica

Habitica

If you love video games, Habitica might be for you. “Gamify your life” by turning your tasks into quests, and get showered with gold and XP when you do something productive. Then use it to customize your avatar. There are no rules – just set up your tasks, set the difficulty and get rewarded.

RescueTime

RescueTime

Where have all those hours gone? RescueTime runs in the background, tracking what apps you’re using and the websites you spend your time on, then compiles it into a report. It can be eye-opening to realize how long you spend being unproductive. But once you know, you can take steps to stop wasting so much time on certain websites.

Basecamp

Basecamp

If your whole team is having trouble with focus, Basecamp might be the solution. The app allows you to assign tasks to people, communicate effectively with everyone, and organize all your tools and files in one place. There’s much more to it, but that’s the basics. No more communicating and sharing files through email chains, or wasting time explaining things over and over again.

Brain.fm

Brain.fm

This is an interesting one. Brain.fm uses AI-composed music to help you relax, sleep, or more importantly, focus. It does this by stimulating your brain in ways that their scientists believe can help boost attention. It’s definitely worth a try!

Don’t Fall Behind!

After spending your whole corporate life being told what to do, self-discipline isn’t a skill you’ll pick up right away. Don’t feel bad if you’re struggling, or if you simply need that small extra incentive to focus. These apps were designed to help people like you, so make use of them!

]]>
https://1stwebdesigner.com/stay-productive-with-these-web-apps/feed/ 0
How to Create Your Own Font https://1stwebdesigner.com/how-to-create-your-own-font/ https://1stwebdesigner.com/how-to-create-your-own-font/#respond Mon, 11 Mar 2019 16:12:27 +0000 https://1stwebdesigner.com/?p=142077 Have you ever wanted to make your own font? Maybe you need an extra personal touch for a design project, or perhaps you want to sell fonts commercially. Either way, there are solutions out there that can help you get started. All you need is an idea, good handwriting, and some font creation software!

Designing the Font

Firstly, if you would rather generate or build a font than create your own from scratch, try out an app like Prototypo or Fontstruct.

To begin creating a font, you have a few decisions to make. The first should be easy: Serif, sans serif, script (calligraphy), decorative or symbol type? There’s all sorts of sub-types, but this is a good beginning.

Start studying fonts you like. What makes them look so good? Why do you like them? You don’t want to copy, but you may want to start putting together references and sketching out early drafts.

What is this font for? A public or personal project? If it’s for yourself, you may only need to design the basic alphabet and some symbols. But if you’re releasing this font commercially, you’ll want to include many symbols and characters.

You might also want to consider including other typeface families like bold, italic, thin, light, condensed and so on. But if this is your first font, don’t worry about that and start simple.

Once you have an idea, start practicing by hand! Draw the letters over and over until you’re happy with the design.

What you do next depends on your preferences. You can scan your handwritten work and trace it in a program like Illustrator or Photoshop, or you can skip right to font creation software. Either way, you will need a program to help you compile the font. Here are a handful of the best.

Calligraphr

Calligraphr

If you want a quick, easy and free solution to creating fonts, Calligraphr might be what you need. Just fill out the template and you’ll have a font that looks like your handwriting! There’s even a quick test version, no registration required, for when you need to make a font fast.

You can use what you create commercially without credit, but to access features like special characters, variants and ligatures, you’ll have to upgrade your account.

FontForge

FontForge

FontForge is free, open source font design software. You’ll be drawing your letters right in the program. If you’ve used vector graphics programs before, you’ll get the hang of it quickly. And since it’s open source, you can download or create scripts and utilities!

Fontself

Fontself

Fontself is the easy and cheap font maker. Available with a one-time payment as an addon for Photoshop and Illustrator, you won’t need to be hopping between programs. Just make the font in your software of choice, optimize your letters and export! You can even use Catapult for Illustrator to host your fonts and start using them online immediately.

Glyphs

Glyphs

This app for MacOS has some serious power. If you’ve worked with fonts before and are ready for a solid upgrade, Glyphs is the solution. Every tool you’ll ever need, plus some super helpful tutorials and documentation so you’ll never feel lost.

If you like the look of Glyphs but need something a little less complicated, you can try Glyphs Mini instead. It’s got the same professional look and extensive functionality, but it’ll better ease you into the world of font creation.

FontLab

FontLab

If you’re serious about font creation, FontLab is the way to go. It doesn’t come cheap, but you’ll never want for a more robust font tool. The revolutionary tools will turn previously impossible tasks into a breeze, even for beginners. It’s a big commitment, but one you won’t regret.

Design Beautiful Fonts

Creating a font isn’t too hard. The real difficulty comes during the design process. If you’re not sure where to begin, study your favorite fonts and ask yourself what makes them look so great. And make sure to practice a lot, both on paper and in your art program of choice, so you can nail those letters when it comes time to digitalize.

]]>
https://1stwebdesigner.com/how-to-create-your-own-font/feed/ 0
The 10 Best Free Icon Fonts For Web Designers https://1stwebdesigner.com/best-free-icon-fonts-web-design/ https://1stwebdesigner.com/best-free-icon-fonts-web-design/#comments Mon, 11 Mar 2019 10:48:17 +0000 https://1stwebdesigner.com/?p=129788 Open source web fonts let designers radically change their page designs and typographic styles. And some of these web fonts use icon sets to bring vector-based icons into CSS.

If you’re looking for 100% free icon fonts for your website then this post has collected all of the best ones. Each icon pack is totally free with SVG vectors and webfont formats to include in your stylesheets and web pages.

All the Icons, Fonts, Web Templates & Design Assets You Could Ask For


1. Captain Icon

captain icon webicons

My personal favorite web font is the Captain Icon pack created by designer Mario del Valle. It’s a totally free open source project hosted on GitHub with vector files and web fonts.

What I like most about this icon pack is the style. Each icon has a very unique design, and they’re all hand drawn from scratch. This makes them stand out far above the other more generic icon sets.

But I don’t think Captain Icon works for every project. It’s best used on creative sites where a hand-drawn style fits with the layout.

2. Octicons

octicons web fonts

GitHub recently open sourced their own icon pack called Octicons. This free icon set is currently in version 5.0 and includes dozens of icons with some basic symbols.

These icons can be found scattered throughout the GitHub website. But they’re just simple enough that they can work on pretty much any interface.

If you need a simple, lightweight icon font then Octicons won’t let you down.

3. Typicons

typicons set

With rounded corners and simpler outlines, the Typicons set is perfect for any site. It comes with 330+ unique icons all with a similar style.

The pack is completely free and also available on GitHub. This means you can include the icons directly into your site and even make edits to them as needed.

Few people know about Typicons but it’s one of the better icon web fonts available. They can even work for iOS with some minor adjustments and special code snippets.

4. Zondicons

zondicons iconset

Zondicons are totally free and real easy to add into your site. Unfortunately these aren’t hosted on GitHub so they don’t have an update archive.

But you can see all of the examples on the demo page including which CSS classes you need to get them working properly. The main Zondicons download link comes right from the website, so it’s hard to tell if they’ve ever been updated or if new icons were added.

I do recommend this webfont if you’re okay with simpler designs. This makes the icons far easier to use, but they can also blend into the site with a more “generic” style.

5. Entypo

entypo homepage

The webfont icon family Entypo has been around for quite a few years. These icons are superb and they’re top of the line when it comes to freebies.

New icons are added sporadically and they’re very simple to access. The fonts also split into two packs: the main pack and the social pack. So if you don’t need social media icons you can reduce the font file size by quite a bit.

Entypo comes with over 400 icons and a brilliant CC sharealike license. To learn more about installation and customizing the icons you should read through the FAQ page and visit the main GitHub repo.

6. MFG Labs

mfg labs iconset

One of the newer fonts in this list comes from MFG Labs with their own icon set. It’s completely free and hosted on GitHub for the world to access.

Each icon comes packed with standard webfont formats using Unicode PUAs in CSS. This is fully semantic in all browsers and helps to reduce clashes against other CSS code.

MFG Labs icons have a unique style that stands out from the herd. I absolutely recommend this icon font for any type of website, commercial or otherwise.

7. Ionicons

ionicons webfont

Native devs love the Ionic Framework and it’s one of the most popular choices for web-to-mobile apps. The Ionic team decided to release their icons as a webfont called Ionicons.

Naturally they’re totally free and available on GitHub. You can even add these icons directly to your site using the CDN version of the stylesheet.

I mostly recommend Ionicons for newbies who haven’t used icon fonts before. They’re super easy to setup, and once you understand how they work you can move onto pretty much any other icon webfont out there.

8. Font Awesome

font awesome iconset

The original web font and Bootstrap’s personal choice, Font Awesome is perhaps the definitive pick for most web designers.

Font Awesome has been around for years and it’s widely regarded as the first major open source icon font. It frequently gets new updates with fresh icons and currently it’s in v4.7 with a free download on GitHub.

Every icon is fully scalable and maintainable directly in CSS. You can change colors, shadows, background gradients, or pretty much anything else using pure CSS3.

This is by far one of the safest icon sets you can use and you know it’s going be here for the long haul.

9. Material Design Icons

material webfont icons

Google’s material design brought a new approach to UI/UX on the web. This led to many new frameworks & resources including this material design icon font.

These material icons are totally free and accessible on GitHub. This icon pack is absolutely massive with over 1,000 icons covering a wide array of interface features.

And because it’s open source you’re free to reuse these on any projects and even customize the icons if needed. Perfect for anyone working with Google’s material guidelines on the web.

10. Devicons

devicons webfont

The Devicons pack is one of the newer web fonts you can try with a focus on tech logos & branding.

This icon font has every logo you can think of from the big tech players like Google to newer CMS logos like Ghost. I’ll admit, this is only useful for sites that want vector tech logos which certainly won’t be a majority.

But it’s a hefty icon set and it’s totally free! You’ll find install details on this page with a free CDN version you can use to reduce load times.

Wrapping Up

It’s hard picking just ten icon fonts because so many new ones are released every year. But these are my top picks and if you recommend any others be sure to share in the comments below.

]]>
https://1stwebdesigner.com/best-free-icon-fonts-web-design/feed/ 1
Avoiding Burnout: The Working After Hours Rulebook https://1stwebdesigner.com/avoiding-burnout-the-working-after-hours-rulebook/ Thu, 07 Mar 2019 15:16:06 +0000 https://1stwebdesigner.com/?p=145335 We’ve all been there. Those situations where there is too much to do and not enough time to get it done. It’s a common problem in just about all fields, but it seems especially so for freelancers. Because, when you’re working solo, everything rests on your shoulders.

Therefore, the temptation to work after normal business hours is strong. And while it can result in making some serious progress on your workload, it can also stress you out.

Working when seemingly everyone else is relaxing can feel a bit unavoidable. Maybe it’s just part of the lifestyle we’ve chosen for ourselves. Even so, if we’re going to do this, it would be helpful to set some ground rules. This way, we can stay on the good side of that fine line between productivity and exhaustion.

With that in mind, here are some basic guidelines to follow when it comes to burning that midnight oil:

Do Extra Work Only When You Have To

The working life of a freelance designer is very much feast or famine. Sometimes you have so much work piled up that you may need a small miracle to get it all done. But there are also times where you’ll be sitting there with virtually nothing to do.

The funny thing is that, even when you don’t have a million things going on, it can still feel like you just have to be productive. Don’t fall into that trap. Take advantage of the slow times to do things outside of work.

Making yourself sit through work sessions purely out of a sense of duty is actually counter-productive. Instead, give yourself the freedom to get out and have some fun. When your workload gets insane again, you’ll feel refreshed and ready to take on the challenge.

Man sitting in a mountain range.

Set Aside Specific Times to Work

Just as you have a daily work schedule, you should also do the same when it comes to overtime. Otherwise, you may find yourself having to decide whether to binge-watch your favorite show or fire up the laptop and write some code.

While that may seem like a harmless decision, having some downtime for your brain is important. Wrapping yourself up in work 24/7 is unhealthy and can lead to an eventual burnout.

The healthier alternative is to schedule in some time to tackle that extra work. Pick a time that’s relatively quiet and allot yourself a specific number of hours to get it done. For instance, you might set aside a weekend morning between 8:00 – 11:00 am. This way, you know when you’re going to work and when you’re going to stop.

Just having that schedule in mind can help you better separate work from the rest of your daily life.

Calendar

Define Clear Goals

Whether you’re working within or without of your normal business hours, having a specific goal or progress benchmark in mind will give you purpose. It may even be more important when putting in extra time, as you’ll be able to more easily walk away from the computer once you have accomplished your goal.

This will also help you avoid the temptation of trying to fit too many tasks into an extra work session. Since you’re not working within the parameters of a typical workday, you might attempt to take on a variety of projects. Even worse, the possibility of multitasking. Feverishly switching between apps or browser tabs during what’s supposed to be your “downtime” won’t help you relax.

Another item to be aware of in this context is email. We live in a world where we can be reached 24/7, but it’s vital to set boundaries. Answering, or acting upon, messages you receive after hours can be stressful and lead to the expectation that you’re always going to jump the moment something comes in. It’s not the ideal precedent to set.

Dartboard

A (Sometimes) Necessary Evil

Putting in those extra hours is something that just about every web designer will have to deal at one time or another. How you feel about that really depends on your personality. Some designers love the opportunity to sit in a quiet room with no distractions and just get things done. To others, it may feel more like a prison sentence.

Regardless of your feelings, having the right approach will help you make the most out of the time you spend.

]]>
Effective Use of Gradients in Design https://1stwebdesigner.com/effective-use-of-gradients-in-design/ https://1stwebdesigner.com/effective-use-of-gradients-in-design/#respond Mon, 04 Mar 2019 16:50:51 +0000 https://1stwebdesigner.com/?p=144519 Nothing looks nicer than a good gradient in a design. Gradients can completely transform a website color scheme from mundane to gorgeous, and you’ll often find them in the centerpiece of a site’s design. Looking for some inspiration for your own backgrounds and banners? Take a look at these beautiful blends.

Gradient Banner

Gradient Banner

Dazzling is barely enough to describe this stunning banner. A gradient made of opposite colors is bound to be striking, and the way the strong lighting in the background reflects off the model just makes this a fantastic example of great gradients in design.

The HR Manifesto

The HR Manifesto

This page makes abundant use of gradients, from the animations and the background as you scroll down, to the various banners and illustrations peppered throughout. The cool purples, blues and pinks blend together perfectly thanks to the colorful style.

Grabient Landing Page

Grabient Landing Page

Obviously, a site designed to generate gradients would know how to utilize them effectively. The banner on the right is an instant eye-catcher, and the same color scheme is used to draw attention to the logo/homepage link as well as the call to action button.

D25/Video Production

D25/Video Production

The effect here is super subtle, especially at the beginning of the page. But as you scroll, you’ll stumble upon a huge background image overlain with a pretty blue to red color palette. It then naturally flows into a big red text box, which is sure to grab attention.

Centexus Landing Page

Centexus Landing Page

Smooth gradients can give a page a clean and elegant look. Professional doesn’t have to mean blacks and whites – add a splash of color and see what happens! This is a landing page that would definitely make conversions.

Ninety Nine Seconds Game Prototype

Ninety Nine Seconds Game Prototype

This game has a strong concept, its artistic style just as much so. Various abstract levels can be explored and discovered, each sporting a beautiful blended background. There’s even a gradient generator for this purpose. It all comes together to make an app you won’t easily forget.

DIY Course Landing Page

DIY Course Landing Page

The beautifully designed landing page opens with vibrant blues and purples that cleanly fade to white as you scroll. Who needs a hero image when you can create a “hero gradient” that naturally transitions into your feature list?

Natoni Landing Page

Natoni Landing Page

Effective gradients can be simple and subtle, or flashy and gorgeous – all that matters is that it’s done well. This landing page sports the latter, with an image that serves both as a good background and yet is also the centerpiece of the design. It doesn’t distract from the text, but you can’t help but stare at the amazingly blended colors with the logo right in the middle.

Bitframemedia Logo

Bitframemedia Logo

This is just fantastic work from a graphic designer. A clean and simple, yet so very pretty logo. Made to look like ocean waves, every piece of the water blends together beautifully. The reverse gradient effect on the lighting makes the logo look interesting and dynamic as well.

TinyMind Landing Page

TinyMind Landing Page

Flat, simple design is a fairly popular trend online. It’s clean, easy to create, and looks nice. But it can also be boring! The slight gradient effect here adds a ton of beauty and dynamic, while still retaining that smooth, clean-cut appearance that’s super satisfying to look at.

Mindfulness App Onboarding Screens

Mindfulness App Onboarding Screens

Gradients work great with light colors and pastels, and here’s the perfect example. The effect is slight, but compelling, with the central character getting a more dramatic gradient while the background is pale enough to almost blend in with the white.

Inspiring Effective Gradients

Gradients are a great tool for designers. Used well, they can add a dynamic look and a spark of beauty to a design. Subtle or flashy, there’s a place for a good gradient in any creation.

And a skilled designer can utilize one to add contrast to important elements, highlight areas of interest, incorporate UI elements into the gradient, or any other number of clever tricks.

]]>
https://1stwebdesigner.com/effective-use-of-gradients-in-design/feed/ 0