1stWebDesigner https://1stwebdesigner.com Helping You Build a Better Web Fri, 11 Oct 2019 19:43:01 +0000 en-US hourly 1 https://wordpress.org/?v=5.2.3 Fall Freebie: Downloadable Halloween Icons and Graphics https://1stwebdesigner.com/fall-freebie-downloadable-halloween-icons-and-graphics/ Fri, 11 Oct 2019 19:43:01 +0000 https://1stwebdesigner.com/?p=150305 Looking for some free Halloween-themed graphics to spice up your designs? During the fall season, you’ll find a lot of freebies for autumn icons and backgrounds. If you want to decorate your website for October or create some festive Halloween banners, this is a great time to dive in and get some free graphics.

We’ve collected some great sources of free Halloween icons, vectors, and designs. These will be perfect if you need some cute and spooky graphics.

Free Fall Icons and Graphics Pack

Example of Free Fall Icons and Graphics Pack

These cute digital icons are mostly made with the autumn season in mind, but there are quite a few Halloween examples in here as well. A jack-o-lantern, a witch’s hat, and spooky bats are just a few. There are both vector and PNG versions of each icon, so use whichever works for you.

Design Freebie: Halloween Vector Icons

Example of Design Freebie: Halloween Vector Icons

Vector icons are great because they’re both scalable to any size and easily editable. These vectors use a simple, appealing style with cartoony monsters, grinning pumpkins, and expressive ghosts. There are 42 icons including both props and characters, so it should last you a while.

Materia Flat Halloween

Example of Materia Flat Halloween

Minimalism fits in almost anywhere. The simpler a design, the easier it is to integrate with other styles. These 41 flat designs won’t look out of place as icons on your website or background decoration in graphics. They are a bit scarier with angry skeletons, bloody props, and spooky spiders, but with a cute and simplistic style that makes them very endearing.

Cute Halloween Background with Flat Design

Example of Cute Halloween Background with Flat Design

This adorable design would look great as a greeting card. It’s full of cute, smiling characters and varied background decorations. Since it’s a vector image, you’ll be able to customize and scale each of the elements to create the perfect scene.

Spooky Halloween: 40 Icons, 4 Styles

Example of Spooky Halloween: 40 Icons, 4 Styles

You’ll never run out of icons with this set of 40 minimalistic Halloween icons, suitable for web and graphic designs. Each icon comes in lined and filled styles, with an additional thin and thick version of each. There’s also both an SVG vector and PNG bitmap version of each in this pack.

Flat Design Background for Halloween

Example of Flat Design Background for Halloween

Here’s another cartoon Halloween background you’ll love. This one depicts a mysterious castle with bats, spiders, and a huge harvest moon, and it’d make a great banner background. It comes in vector format, so you can tweak each element to your liking.

10 Cursed Halloween Vectors

Example of 10 Cursed Halloween Vectors

With a highly-stylized, wacky design, these unique vectors lack the generic appeal of minimalistic icons – you can’t use them in just any project. But if these fun and colorful characters appeal to you, they’d make great centerpieces in a graphic.

unDraw Halloween

Example of unDraw Halloween

unDraw is a free, constantly maintained collection of vector icons and images for web designers. For Halloween 2018, they created a set of haunting background PNG images depicting scenes from various classic horror movies. Try to guess what each one is before you click, and use the arrow below each image to download.

Spooky Halloween Graphics

The fall season tends to bring out a lot of cute Halloween art. These little icons would make great stickers on your banners and backgrounds, or in any other autumn-themed design project you’re working on this year.

Make sure to double-check the license before using these commercially, as some may require attribution, but most of these are totally free for use. Don’t hesitate to include these adorably spooky icons and backgrounds in your Halloween works.

Ways to Improve Communication with Your Clients https://1stwebdesigner.com/ways-to-improve-communication-with-your-clients/ Mon, 07 Oct 2019 18:20:42 +0000 https://1stwebdesigner.com/?p=150255 Communication may just be the most overlooked ingredient in building a great website. I’d argue that it’s just as important as awesome design and development skills.

Without it, the final product is going to suffer. The site may look nice enough, but is it on target with regards to branding and messaging? Will the functionality match up with your client’s intended goals?

Despite its importance, communication is also one of the hardest skills to learn. In addition, it’s a two-way street. Even if you’re gifted in this area, your client may not be.

Let’s explore some ways to improve the dialogue with clients and better ensure a successful project.

Reach Out

One thing to realize about your clients is that they often have busy schedules. In other words, dealing with their current or future website is just one of many things on their to-do list.

As the old saying goes, the squeaky wheel gets the grease. This means that people tend to deal with whatever situation is right in front of them in that very moment. If your website project isn’t in their immediate line of sight, then it’s probably going to stay on the back burner.

To avoid a project that hangs in the air indefinitely, it’s up to you to reach out to clients. Check in on the status of that content you’re waiting for, or the example sites they were supposed to send. Offer your help and to answer any questions they might have.

Taking this little bit of initiative can kickstart the process of actually getting things done.

A person typing on a laptop computer.

Dig for Details

It can be difficult to gain an understanding of what a client really wants. They may sometimes give vague instructions or be otherwise noncommittal when it comes to the look and features of their site.

This can be quite frustrating as you are left to guess the best path forward. It can also lead to a seemingly unending cycle of revisions and, once again, a stagnating project.

You may even get the impression that this person is being hard to deal with. However, that’s most likely not the case. It may just be that they really aren’t sure what they want or are having trouble explaining it.

This is another instance where being assertive can help. Ask probing questions, provide either-or scenarios and try to make the discussion a productive one.

It’s important to remember that this is a process and that things aren’t always clear from the get-go. Sometimes, it requires peeling back a few layers before we can find that solid foundation for moving forward.

Women sitting at a table.

Keep Clients Updated

Another key element in communicating with clients is keeping them abreast of progress. After all, they’re investing a good bit of money into their website. It’s only natural to want to know where things stand.

This can be a bit of a delicate balance for designers. You don’t want to overwhelm your clients with constant updates. Yet you don’t want to underwhelm them when there just hasn’t been much progress.

Depending on the scope and timeline of the project, usually a weekly update is enough. And, even if you’re struggling with a specific aspect of things, it’s okay to share that as part of your status report.

Things such as technical roadblocks or even an unexpectedly busy schedule are bound to happen along the way. Most people are pretty understanding about it, so long as you let them know. Rather, it’s the uncertainty that comes with a lack of communication that is more likely to spark a less-than-kind reaction.

Man talking on a phone.

Create Opportunities with Mass Communication

While so much of client communication is person-to-person, there are other opportunities to stay in touch. By taking advantage of available tools, you can get your message out to highly-targeted groups.

Social media is a big one these days. And it can actually be a good place to talk to clients – albeit in a more generalized way. Use it to let them know about articles and tools that may be of interest.

Sure, your feeds may be followed by non-clients as well. However, that can be a positive. By sharing worthwhile information, you become a trusted source. And trust is key for turning prospects into paying customers.

The other mass communication tool is the good old email newsletter. This is still a great forum to share ideas. And, unlike social media, it’s easy to target clients or even a subset of them.

Even better is that clients can respond directly to your mailing, starting what could be a real conversation. At the very least, it’s a solid way to keep them in the loop.

One bit of advice: Avoid making flat-out sales pitches. They’re already your clients, they’ve already purchased something from you. Make sure that whatever you post or send out is of some genuine value.

Social media icons on a tablet screen.

Better Projects, Better Relationships

Effectively communicating with your clients isn’t so much about being perfect. Rather, it’s about making the effort to better understand who they are. The goal is to find out what they’re hoping to achieve and then devise a plan to help them do so.

The end result is a project that accurately reflects their wants and needs. That, in turn, will help you build a solid, lasting relationship.

Just think, if you are able to regularly accomplish this feat, you’ll have loyal clients and be set up for long-term success. It’s a winning formula that both you and your clients will benefit from.

Defend Your WordPress Website Against Brute-Force Attacks https://1stwebdesigner.com/defend-your-wordpress-website-against-brute-force-attacks/ Wed, 02 Oct 2019 16:08:58 +0000 https://1stwebdesigner.com/?p=150220 Whether you’re fairly new to WordPress or an experienced developer, you might be surprised at just how often your websites are under attack. You might also be wondering who, or what, is carrying out this type of activity – not to mention why they’d target you.

The answers are simple. In most cases, the bad actor is an automated bot. And you’re being targeted simply because you happen to be running WordPress. As the most popular Content Management System (CMS) out there, it is directly in the crosshairs of malicious actors.

While there are all sorts of different attacks floating around out there, the brute-force variety are among the most popular. And that happens to be our subject for today.

Let’s take a look at what brute-force attacks are and some ways you can better protect your WordPress website.

What Is a “Brute-Force” Attack?

A brute-force attack, according to Wikipedia:

“…consists of an attacker submitting many passwords or passphrases with the hope of eventually guessing correctly.”

In the real world, this means that a malicious script runs repeatedly, entering usernames and passwords into the WordPress login page. It’s possible to see hundreds or even thousands of attempts like this per day.

Of course, if this were all completely random, it would be pretty difficult to successfully log into a website using such a technique. But there are two major reasons why these attacks can sometimes work:

  1. The use of weak login credentials, such as using an ultra-common username and password.
  2. Using credentials that have been previously leaked elsewhere.

If either of these scenarios are in place, that raises the odds of a successful attack. And once the attacker has access to your WordPress dashboard, they can wreak all sorts of havoc.

But even if unsuccessful, these attacks can be both an annoyance and a drain on server resources. Therefore, it’s important to put policies in place that can help mitigate their damage.

Binary code on a computer screen.

Ways to Fight Back

Thankfully, there are a number of things you can do to better protect your WordPress website against brute-force attacks. The most basic being instituting common sense security measures, such as using strong passwords and virtually anything other than “admin” as your username. These steps alone will at least make your site more difficult to crack.

However, there are some even stronger actions you can take, including:

Limit Access to the Login Page

Depending on your web server’s setup, you might consider blocking out access to the WordPress login page to all but a specific group or range of IP addresses. On an Apache server, for example, this could be done via the .htaccess file.

The caveat is that this strategy depends on administrators having a static IP address. In corporate environments, this would likely be the case. However, other scenarios may make this method more difficult. The official WordPress documentation has some further advice that is worth a look.

Another approach is to password-protect the login page at the server level. While this adds a bit of inconvenience, it does help to ensure that only authorized users gain access to the dashboard.

Utilize a Plugin

There are a number of WordPress plugins that are dedicated to security, with several offering features designed to protect against brute-force attacks. Some of the more popular options include:

Jetpack’sProtect” feature, which will block unwanted login attempts.

Wordfence employs several login-specific measures, such as two-factor authentication, reCAPTCHA and brute-force protection. There is also a companion plugin that solely focuses on login security.

Login LockDown is a plugin designed to limit brute-force attempts. It automatically locks out offending IP addresses after a set number of failed logins.

iThemes Security offers several login-related protections, including brute-force protection, two-factor authentication and the ability to rename the /wp-admin/ folder in order to thwart bots.

Employ a CDN/Firewall

Content Delivery Networks (CDNs) not only improve the performance of your website, they offer the side benefit of serving as a barrier between malicious bots and your WordPress install.

CDN providers often include methods to block out IP addresses or even entire countries from accessing your site (or, at least your dashboard). Depending on the service you use, there may also be protections specifically targeted at stopping brute-force attacks.

The beauty of this approach is that you can significantly lighten the load on your web server. How? Attackers are stopped by the CDN’s firewall before they ever reach your site. It’s kind of like having a giant flyswatter out in front of your house, rejecting pests before they make it to your front door.

A hammer smashing glass.

When It Comes to Security, Be Proactive

Unfortunately, doing nothing to combat brute-force logins is not a viable option. These attacks are both ubiquitous and relentless. And the landscape certainly doesn’t look like it will get better on its own. Therefore, it’s up to us to take preventative measures.

Thankfully, it’s not really that difficult. The options above, while not 100% perfect, are fairly easy to implement. And each one makes things that much tougher on the average bot.

Plus, when you think about it, the relative cost of mitigating these attacks now is much less than having to deal with a hacked website later on. That alone makes being proactive more than worth the effort.

Photoshop Alternatives for Designers https://1stwebdesigner.com/photoshop-alternatives-for-designers/ Thu, 26 Sep 2019 15:12:44 +0000 https://1stwebdesigner.com/?p=150163 One of the biggest hurdles to becoming a web or graphic designer is the cost. Professional design software takes time to learn and is expensive on top.

Photoshop may be the leader in graphics editing, but it has a price tag to match. With the Creative Cloud service on a monthly payment scheme, it can cost you a minimum of $120 per year, and you don’t even get a permanent license to use Photoshop.

If that’s just too expensive for you, or you want editing software with a perpetual licensing model, there are plenty of alternatives out there. Some are even free. Here are 6 design software alternatives with similar functions and feel to Photoshop.

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

Affinity Photo

Example of Affinity Photo

Affinity Photo is one of the best and most similar Photoshop alternatives available. A one-time $50 fee gets you access to an advanced and affordable program for Mac or Windows, or you can get a cheaper version for your tablet.

The editor comes with support for RAW files, panoramas, vector drawing, and effective retouching tools. Its one downside is the limited plugin selection that leaves it not very extendable. But for a majority of designers, it can take Photoshop’s place pretty well.


Example of GIMP

You can’t beat free, and open source GIMP is a popular Photoshop competitor. A majority of Photoshop’s tools are available here, and it accepts a wide range of file formats including PSDs.

One of GIMP’s main features is its customizability. There are hundreds of third-party tools ranging from entire plugins to artistic brushes. However, its interface is less streamlined than Photoshop’s, and it’s missing some important tools like non-destructive editing and CMYK support.

But overall, it’s a solid choice for graphic designers if you don’t need certain advanced features.


Example of Sketch

Sketch is a vector graphics editor and web design tool for macOS, with multiple improvements over Photoshop in areas of UI design. It’s made for website prototyping and comes with grids built in, pixel perfect precision, and smart guide functionality.

The program is focused solely on UI and mockups, and comes with no features like bitmap brushes or photo editing. If you find yourself using Photoshop’s other artistic features frequently, you may want a more general-purpose editor. But UI/UX designers will quickly fall in love with this easy-to-use program.


Example of Photopea

For a free, entirely in-browser editor, Photopea comes with a surprising array of features. Its clean interface will feel very familiar to Photoshop fans, and you’ll be shocked at how much is packed into it.

That said, if you’re used to advanced or even mid-level Photoshop features, Photopea doesn’t yet hold up in all of these areas. It’s a great emergency editor, and perfect if you only need a basic set of tools. Some designers won’t need anything more, but don’t expect the raw power of a downloadable program from this.


Example of Krita

If your design work often involves painting and creating artwork or graphics, Krita would be a great choice. It’s free and open source, and has the power of Photoshop with an interface specialized for artists.

There are over 100 brushes included and ways to download more, a fully customizable interface, vector support, and HDR painting. Krita isn’t suitable for general editing and manipulation, but it’s perfect for illustrators and graphic designers.


Example of Figma

Figma is similar to Sketch in that it’s focused around prototyping and UI design, but it comes with its own host of features. The biggest is its support for live multi-user editing with your teammates. It works in the browser and has a free starter plan for up to two designers.

It also comes with vector editing, commenting, prototyping tools, and the ability to export as a PDF or image. If your focus is on collaboration, and you want to design alongside others, Figma is definitely one to consider.

Low-Cost Photoshop Alternatives

Photoshop is considered a staple of a designer’s toolkit, but it hardly has a monopoly on the industry. There are plenty of other programs out there that have similar functionality to Photoshop and a price tag as low as free.

Just remember that these programs only provide similar functionality to Photoshop. If you use other programs in the Creative Cloud suite, such as Lightroom, Illustrator, Dreamweaver, or InDesign, you’ll need to find alternatives for those as well.

15 Textured Grunge Fonts With a Handmade Style https://1stwebdesigner.com/15-textured-grunge-fonts/ Tue, 24 Sep 2019 20:22:59 +0000 https://1stwebdesigner.com/?p=150079 Are you on the hunt for some gritty, textured experimental fonts for your website? Grunge style typography might be just what you need.

The inspiration for many art styles, grunge music and fashion is associated with harsh songs, ripped jeans, and distorted instrument sounds. It was an unorthodox genre far removed from cleaner brands of music.

Grunge typography is much the same, sharply divulging from traditional elegant serifs and clean sans-serifs to create a new unique style. These fonts tend to have a dirty, smudged, paint-brushed, or eroded look. They can be simple and legible or distorted and dramatic.

These fonts look great on rock music sites and graphics, but anyone can use them. If you want to add a little texture and variation to your project, or need to draw eyes to a part of your website, try one of these stand-out grunge fonts.

UNLIMITED DOWNLOADS: 400,000+ Fonts & Design Assets

Fierce by Itsmesimon

Example of Fierce by Itsmesimon

UnderWorld by hmeneses

Example of UnderWorld by hmeneses

Ugly Alligator by Cosmic Store

Example of Ugly Alligator by Cosmic Store

Bearpaw by Dennis Anderson

Example of Bearpaw by Dennis Anderson

Smile and Wave by Chris Vile

Example of Smile and Wave by Chris Vile

Brush Up by PintassilgoPrints

Example of Brush Up by PintassilgoPrints

Splandor Typeface by ilhamherry

Example of Splandor Typeface by ilhamherry

New York by Saji Johnny Kundukulam

Example of New York by Saji Johnny Kundukulam

Conspiracy by Nerfect Type Laboratories

Example of Conspiracy by Nerfect Type Laboratories

Grunge Tire by Just Type It

Example of Grunge Tire by Just Type It

Crayon Hand by Letters & Numbers

Example of Crayon Hand by Letters & Numbers

Beyond Wonderland by Chris Hansen

Example of Beyond Wonderland by Chris Hansen

Againts Typeface by Fortunes Co

Example of Againts Typeface by Fortunes Co

Gunshot by Gleb Guralnyk

Example of Gunshot by Gleb Guralnyk

Eveleth by Yellow Design Studio

Example of Eveleth by Yellow Design Studio

Unconventional, Interesting Fonts

If you’re tired of clean web design and want to put a spin on things, you should definitely consider grunge typography. The fonts are highly unique, and thus overuse can dull their message. But a grunge font in just the right place can attract attention and add a little interest to a bland webpage.

You don’t have to be making a rock website to use grunge fonts. You can find more subtle textured effects on all sorts of websites, especially ones that want to add a natural feel or tell the world that they’re unconventional.

Using a grunge font in just the right place can leave a big impact on visitors, so don’t be afraid to try one.

Trippy CSS Distortion Effects https://1stwebdesigner.com/trippy-css-distortion-effects/ Thu, 19 Sep 2019 15:45:45 +0000 https://1stwebdesigner.com/?p=150097 Sometimes a cool glitchy, distorted effect is the perfect addition to your web design. Maybe you’re creating a tech site, a developer’s portfolio, or something completely experimental. Distortion effects are an unconventional but interesting way to grab visitors’ attention with a unique animation.

We’ve collected some glitchy CSS effects for you to use today. They’re free to copy or study as a learning tool, and they range from text and image glitch effects to hover distortions to trippy background animations. Whatever you’re looking for, one of these effects has the inspiration you need.

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

Pure CSS Glitch Effect

See the Pen
Pure CSS Glitch Effect
by Felix Rilling (@FelixRilling)
on CodePen.

CodePen Challenge: Color Pop

See the Pen
CodePen Challenge: Color Pop
by Johan Lagerqvist (@lgrqvst)
on CodePen.

Trippy CSS Effect

See the Pen
Trippy CSS effect
by kryo (@kryo2k)
on CodePen.

Glitch Photo Filters CSS

See the Pen
Glitch Photo Filters CSS
by Sergey (@canti23)
on CodePen.

Perspective Split Text Menu Hover

See the Pen
Perspective Split Text Menu Hover
by James Bosworth (@bosworthco)
on CodePen.

Clean CSS Glitch

See the Pen
Clean CSS Glitch
by Piotr Galor (@pgalor)
on CodePen.

Creepy Squiggly Text Effect with SVG

Example of Creepy Squiggly Text Effect with SVG

Text Shuffle & Distort

See the Pen
Text shuffle & distort fx
by Blaz Kemperle (@blazicke)
on CodePen.

Glitch CSS

See the Pen
Glitch CSS
by Iliuta Stoica (@iliutastoica)
on CodePen.

Infinite SVG Triangle Fusion

See the Pen
Infinite SVG Triangle Fusion
by Rob DiMarzo (@robdimarzo)
on CodePen.

Glitch Effect in CSS

See the Pen
Glitch effect in CSS
by Thomas Aufresne (@origine)
on CodePen.

Buttons with Trippy Background Animation on Hover

Example of Buttons with Trippy Background Animation on Hover

Trippy – CSS only

See the Pen
Trippy – CSS only
by Emmanuel Lainas (@RedGlove)
on CodePen.

Laser Text Animation

Example of Laser Text Animation

Glitch Text

See the Pen
Glitch Text
by Chase (@chasebank)
on CodePen.

Oddly Satisfying CSS Only Triangle Animation

See the Pen
Oddly satisfying CSS Only triangle animation
by eight (@eight)
on CodePen.

Paint on Heat Distortion

See the Pen
Paint on Heat Distortion
by Matt Popovich (@mpopv)
on CodePen.

Trippy Squares – Left to Right Wave

See the Pen
Trippy Squares – Left to Right Wave!
by Praveen Puglia (@praveenpuglia)
on CodePen.

Glitch Clock

See the Pen
Glitch Clock
by Constantine (@museum404)
on CodePen.

Glitchy and Psychedelic CSS Effects

There’s something simply awesome about an unusual distortion effect. Using them correctly can help you make an awesome website that people will love to explore. Too much distortion can be an eyestrain, but a cool trippy background animation or some glitchy text can pull the whole design together.

You also should be careful with implementing too many CSS effects onto your website. Too many animations can lead to a slowdown. If you find your website loading slowly, this guide can help you cut down on bloat and let you keep your awesome new effects.

Next time you’re making a dark website, a site with tech or programming focus, or a page you want to be unconventional and unique, try out one of these free glitchy CSS effects. You’ll love the character it can bring to a design.

Four Common Font Types and When to Use Them https://1stwebdesigner.com/four-common-font-types-and-when-to-use-them/ Tue, 17 Sep 2019 17:24:48 +0000 https://1stwebdesigner.com/?p=150040 When you’re first learning the nuances of typography, all those different font types can be confusing. You might know the difference between serif and sans-serif, but do you know the right time to use them? And what about the dozens of subtypes?

There are four main types of fonts you can use in web design, each with their own distinctive look. Not sure where to begin? We’ll give you a little typography guidance so you can design a website that perfectly conveys the mood you’re going for.

UNLIMITED DOWNLOADS: 400,000+ Fonts & Design Assets


Serif Font Examples

Serif fonts are the go-to for elegant and professional designs. These stylish typefaces are marked by the little dashes extending from the stroke of each letter. Serifs have long been used for extensive passages in print. They give websites an old-fashioned, sophisticated tone.

In general, serif fonts are suitable for almost any situation: headers, body text, small to large sizes, and short or long copy – they should only be avoided in very small sizes. Some also claim that serifs are less screen-legible.

  • Old Style: Going back to the 1400s, these serifs are marked by low line contrast and diagonal stress.
  • Transitional: Transitional styles bridge the gap between traditional and modern serifs. You begin to see more line contrast and stylistic additions.
  • Didone: These modern serifs have dramatic line contrast, and are very commonly used in print pieces.
  • Slab Serif: Wide, bold, and instantly eye-catching, slab serifs make great display fonts.


Sans-Serif Font Examples

Throughout history sans-serifs were rejected in favor of their more elegant cousins, but the bold and legible typeface is now used to represent modernity, simplicity, and efficiency.

Sans-serif fonts lack the small strokes at the end of letters, and as a result are more legible on screens and at smaller sizes. These fonts are a jack of all trades, and look great at any size and in any length of text. Use them when you’re shooting for a modern or minimalist vibe.

  • Grotesque: The earliest sans-serifs, these fonts are simple and bold, often with a square shape to them.
  • Neo-Grotesque: Neo-Grotesques less resemble early serifs, with a more minimalistic style.
  • Geometric: Composed of simple shapes like circles and squares, these have an appealing simplicity but are a little less legible in body type.
  • Humanist: Inspired by calligraphy and old-style serifs, humanist fonts are unique with highly varied line widths.


Script Font Examples

Script fonts are defined by their handwritten, cursive- or calligraphy-like style. They bring the elegance of serifs with a more authentic and beautiful design.

Unlike serifs, however, scripts aren’t made for legibility. They shouldn’t be used as body text or passages longer than a paragraph or two. They look great as headers, logos, or short quotes. If you need something a little more unique, try a script font.

Due to its unique nature, this typeface is hard to classify, but there are a few distinctive categories.

  • Formal: Inspired by handwriting from the 1600s-1800s, formal scripts often have large, dramatic loops and antiquated styling, and appear to be drawn with a quill or pen.
  • Casual: Casual scripts are just as beautiful but less formal, looking more like fancy modern handwriting. Often, they look as if drawn with brush strokes.


Decorative and Display Font Examples

The last font type, and the hardest to pin down, is decorative/display typefaces. These fonts are the most unique and come in any kind of style you can think of, from graffiti to abstract to three-dimensional font types.

You may be able to get away with using a script font in a paragraph if you’re feeling adventurous, but decorative fonts belong only in single sentences and as header text. They’re designed for style, not legibility.

There’s also symbol fonts, which display letters as various ornaments like faces or objects. This can have some use as decoration.

Display and decorative fonts are optimized for use at very large sizes. Use them anywhere but your body text.

Create Better Font Palettes

Now that you know how to use every type of font, it’s time to put together a font palette for your design project. Most websites use two or three main typefaces, a header and body font.

Remember to use the rule of contrasts. You could use a script header font and match it with an elegant serif, or serif body text with an eye-catching sans-serif title. You could even try two of the same types of fonts, but pick a bolder display typeface and contrast it with a clean body font.

Your choices are unlimited, so experiment with various flavors of fonts and see what happens.

40+ Motivational Quotes for Creatives https://1stwebdesigner.com/40-motivational-quotes-for-creatives/ Mon, 16 Sep 2019 14:15:16 +0000 https://1stwebdesigner.com/?p=148527 Sometimes we all need a little motivation. The road to creating something great can be tough. There are many twists and turns, failures, trials and tribulations. We all grow a little weary.

The goal of this article is to reinvigorate your creativity with empowering quotes from creators, inventors, and entrepreneurs of all backgrounds.

These quotes vary in nature. Some apply to work ethic, some for inspiration and determination, and others are just great phrases to live by. Get inspired with these quotes for creators below and then get creating!

View more inspirational articles on 1stwebdesigner →

A bridge crossing over water.

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

Be Inspired to Create

“…If one advances confidently in the direction of his dreams, and endeavors to live the life which he has imagined, he will meet with a success unexpected in common hours…If you have built castles in the air, your work need not be lost; that is where they should be. Now put the foundations under them.”Henry David Thoreau

“To know your life purpose is to connect with a higher power.”Shannon L. Alder

“Inspiration exists, but it has to find you working.”Pablo Picasso

Success is not the key to happiness. Happiness is the key to success. If you love what you are doing, you will be successful.”Albert Schweitzer

“It’s never too late to be who you might have been.”George Eliot

“If you cannot do great things, do small things in a great way.”Napoleon Hill

A person holding a small plant.

“With the advent of spring and beginning of the new harvest season the creators of abundance, our peasants, come out to the fields to sow with good aspirations and hopes.”Islom Karimov

“To dare is to lose one’s footing momentarily. To not dare is to lose oneself.”Soren Kierkegaard

“Success is going from failure to failure without losing enthusiasm.”Winston Churchill

“The other side of every fear is a freedom.”Marilyn Ferguson

“Opportunity is missed by most because it is dressed in overalls and looks like work.”Thomas Edison

“Problems cannot be solved at the same level of awareness that created them.”Albert Einstein

“A creative man is motivated by the desire to achieve, not by the desire to beat others.”Ayn Rand

“What we see depends mainly on what we look for.”John Lubbock

A rocky coastline.

“Whether you think that you can, or that you can’t, you are usually right.” Henry Ford

“I always prefer to believe the best of everybody; it saves so much trouble.”  – Rudyard Kipling

“You don’t need money to be creative. The ghetto builds champions every day.”DJ Snake

“The most dangerous idea is silencing people.”Naval Ravikant

“A busy calendar and a busy mind will destroy your ability to do great things in this world. If you want to be able to do great things, whether you’re a musician, or whether you’re an entrepreneur, or whether you’re an investor, you need free time and you need a free mind.”Naval Ravikant

“The cure for boredom is curiosity. There is no cure for curiosity.”Dorothy Parker

“Go into yourself. Find out the reason that commands you to write; see whether it has spread its roots into the very depths of your heart; confess to yourself whether you would have to die if you were forbidden to write.”Rainer Maria Rilke

“So go on, get angry. But keep your mouth shut and go do your work.”Austin Kleon

“Somewhere, something incredible is waiting to be known.” Carl Sagan

A mountain on a starry night.

“The world always seems brighter when you’ve just made something that wasn’t there before.” Neil Gaiman

“We don’t make mistakes, just happy little accidents.”Bob Ross

“Many prefer not to exercise their imaginations at all. They choose to remain comfortably within the bounds of their own experience, never troubling to wonder how it would feel to have been born other than they are.”J.K. Rowling

“A new idea is delicate. It can be killed by a sneer or a yawn; it can be stabbed to death by a quip and worried to death by a frown on the right man’s brow.”Charles Brower

“Remember the two benefits of failure. First, if you do fail, you learn what doesn’t work; and second, the failure gives you the opportunity to try a new approach.”Roger Von Oech

“I’m convinced that about half of what separates successful entrepreneurs from the non-successful ones is pure perseverance.”Steve Jobs

“Anxiety is the handmaiden of creativity.”T. S. Eliot

Waves crashing on a beach.

“You can’t use up creativity the more you use the more you have.”Maya Angelou

“There is only one of you in all time. This expression is unique and if you block it, it will never exist through any other medium and it will be lost.”Martha Graham

“Creative people are curious, flexible, persistent, and independent, with a tremendous spirit of adventure and a love of play.”Henri Matisse

“Curiosity about life in all of its aspects, I think, is still the secret of great creative people.”Leo Burnett

“You can’t wait for inspiration, you have to go after it with a club.” Jack London

“To raise new questions, new possibilities, to regard old problems from a new angle, requires creative imagination and marks real advance in science.”Albert Einstein

“The essential part of creativity is not being afraid to fail.”Edwin H. Land

“Creative activity could be described as a type of learning process where teacher and pupil are located in the same individual.”Arthur Koestler

“Don’t think. Thinking is the enemy of creativity. It’s self-conscious, and anything self-conscious is lousy. You can’t try to do things. You simply must do things.”Ray Bradbury

“Blessed are the curious, for they shall have adventures.”L. Drachman

“In the beginner’s mind there are many possibilities, but in the expert’s mind there are few.”Shunryu Suzuki

A young girl looks off into the distance.

Quotes That Will Make You Think…

For this last section, we’re featuring just a few more quotes for creators that are less motivational and moreso thought-provoking.

“We call ourselves creators and we just copy.”Lauryn Hill

“The most regretful people on earth are those who felt the call to creative work, who felt their own creative power restive and uprising, and gave to it neither power nor time.”Mary Oliver

“If you’re creating anything at all, it’s really dangerous to care about what people think.”Kristen Wiig

“Great is the human who has not lost his childlike heart.”Mencius (Meng-Tse)

“When Alexander the Great visited Diogenes and asked whether he could do anything for the famed teacher, Diogenes replied: “Only stand out of my light.” Perhaps some day we shall know how to heighten creativity. Until then, one of the best things we can do for creative men and women is to stand out of their light.”John W. Gardner

“Don’t worry about people stealing your ideas. If your ideas are any good, you’ll have to ram them down people’s throats.”Howard Aiken

“Some men look at things the way they are and ask why? I dream of things that are not and ask why not?”Robert Kennedy

Words of Wisdom

Which quote stood out the most to you? We hope you use these motivational and thought-provoking words to boost your creativity and make the world a more beautiful place. You can do it!

Top Prototyping and Design Handoff Tools for Designers https://1stwebdesigner.com/top-prototyping-and-design-handoff-tools-for-designers/ Thu, 12 Sep 2019 13:05:39 +0000 https://1stwebdesigner.com/?p=149945 The advantage of prototyping is that it allows designers to prove or disprove their concepts. Also, to fine tune their designs. And it can demonstrate how the final product will work once production is completed. Prototyping tools are used to simulate application flow, to test performance, and create a user experience.

In practice, designers use a variety of prototyping tools. Their capabilities range from simple to advanced.

Tools that support design handoff are relatively new on the scene. The available choices are still somewhat limited. Several tools that support both prototyping and handoff are described in this article.

When a tool of this type is right for your project’s workflow, it make’s life that much easier. And any one of the 5 presented here can easily make that happen.

1. Overflow

Example of Overflow

Preparing a design for product development purposes is seldom an easy task. Taking a design and presenting it in the form of a beautiful user flow diagram isn’t always that much fun. Not only are these diagrams traditionally hard to build, but they can also be a pain to update and maintain.

Part of the problem lies in that, until recently, a tool that explicitly specialized in user flow diagramming for designers hasn’t existed. Essentially one that makes it easy to connect between visual screens to illustrate the bigger picture.

Overflow changed all of that. Overflow is the world’s first user flow diagramming tool specifically tailored for designers; a tool that will significantly accelerate your user flow design diagramming process. You can sync your designs from Figma, Sketch, or Adobe XD, upload images and add shapes and connectors to create interactive user flow presentations that tell the story behind your design work.

Overflow is available on MacOS for a 30-day free trial. A Windows version is expected to follow at a future time.

2. Webflow

Example of Webflow

With Webflow, you can prototype anything from a website dashboard to a mobile app, and you can do so using fully-functional forms and real, dynamic content. That’s more than most prototyping tools allow — but there’s even more to come.

Because with Webflow, you can actually skip the handoff. It enables you to take your finished prototype and move right into the build and launch phases, creating a completely custom, production-ready website without any need for coding. HTML, CSS, and JavaScript coding is done for you.

When it’s time to launch, world-class hosting is available. It’s lightning-fast, hassle-free, and doesn’t involve any of the usual, cumbersome setup.

Plus, you can build your website or app from scratch, from a template, or by using any of a large array of community-created UI kits.

In short, Webflow is a single tool that could make much of your current toolkit completely obsolete. And who wouldn’t rather be using fewer tools?

3. UXPin

Example of UXPin

UXPin is a prototyping tool created to help reduce the time spent on design and development. Fewer tools, faster collaboration, shorter time to market. Manage design tasks, create a prototype that perfectly mimics the real product, collaborate on iterations, and hand off the project to the development team – all from one tool.

The perfect solution for both professionals and those who are just starting in design. Try the free plan and scale if need be.

4. Avocode

Example of Avocode

You can use this platform-independent tool to automate your project’s design handoff workflows, import and share design versions with team members and stakeholders, and turn Sketch, PSD, and other file formats like XD, Figma or Illustrator into code.

Avocode syncs and stores your design files in the cloud and helps you keep those files correctly versioned and organized; and you don’t have to prepare your files upfront in any way.

5. Savah

Example of Savah

With Savah at your fingertips, it’s easy to create an end-to-end journey for your web or mobile app projects. This is not your typical prototyping and design collaboration tool in the sense that it does much more than help you build a prototype.

Savah promotes collaboration and team feedback. And it also has a built-in design workflow and approval system that can immediately speed up your project’s design phase. Savah is free to use for solo designers.

Looking for an ideal prototyping and handoff tool?

While there’s certainly no shortage of tools and techniques for building prototypes, finding what you need can be a challenge. Simply because what you need depends on the task at hand, making that need a variable.

You could choose blindly or simply throw your hands up in despair, but you don’t have to do either. Just take the following into account when it’s time to make a selection:

  • The tool should make collaboration and information sharing easy.
  • It should have a shallow learning curve and be easy to use.
  • It should serve you well for low-fi prototyping, medium-fi prototyping, hi-fi prototyping, or if need be, all the above.
  • And, the price should suit your budget.

You also want to look at the pros and cons of any given tool, whether it’s for prototyping or design handoff, taking into account the following criteria:

  • Fidelity: How well does the tool support visual and interaction design?
  • Consistency: Does it have the necessary features to ensure design consistency in your work?
  • Accuracy: Does it enable you to strictly adhere to your organization’s “source of truth”?
  • Collaboration: Does it make collaboration and co-design activities easy to perform and manage?
  • Developer Handoff: What processes does it follow to generate specifications and assets for developers?

Remember, you’re not looking for the “best”. You’re looking for a tool that will do the job and do it well without placing any bothersome constraints on you or on your design.


You can save a ton of time and avoid a certain amount of grief by staying up to date with the latest tools and techniques. That includes prototyping tools and most certainly handoff tools. The handoff tools are a recent addition to a web designer’s toolbox.

Some tools can be used for virtually any project, unless or until they become obsolete. Usually you need to consider the task at hand when selecting one. The ability to work on a given platform or any platform should always be considered. Also, a possible need to integrate with other design tools should be considered.

Building More Accessible Websites with WordPress https://1stwebdesigner.com/building-more-accessible-websites-with-wordpress/ Wed, 11 Sep 2019 15:17:47 +0000 https://1stwebdesigner.com/?p=149956 If you’re a web designer, you probably see the term “accessibility” mentioned quite a bit. And that’s a wonderful thing. The industry has become very much aware of the need to ensure that what we build can be accessed by everyone.

While some locales (the United States being a prime example) don’t have crystal-clear laws pertaining to accessibility, there are a lot of great guidelines for implementing it. So, even if there isn’t necessarily a legal imperative, there certainly is a moral one. Better still is that we have the technology to do it.

But, if you’re building sites with WordPress, there are some additional challenges when it comes to accessibility. By itself, WordPress is accessible (although the Gutenberg editor still has some work to do in that area).

However, we don’t just use WordPress alone. We implement themes, plugins and our own customizations into the mix. This can muddy up the waters when it comes to ensuring our websites follow best practices.

And although we can’t snap our fingers to instantly make everything accessible, there are some common sense actions we can take. Here are a few tips for putting accessibility at the forefront of your WordPress website.

Use or Build an Accessible Theme

Choosing the right theme is about so much more than looks or fancy features. Since it provides the outward face for how users interact with a website, accessibility has to be baked in from the start. Make the wrong decision here and it’s akin to having a beautiful house with a faulty foundation.

If you’re building your own theme, the process is a little easier. Since you’re not reliant on a third-party developer, you can implement only the features you need and test as you go.

But for those looking at either free or commercial themes, it can take some research. You’ll need to look for themes that claim to be accessible. The trouble is that many themes either don’t mention this or are very vague when it comes to details.

In that case, try contacting the theme author and find out what (if anything) they did to ensure that the theme doesn’t get in the way of screen readers or other assistive technology. You might also want to run a demo version through one of the validation or simulation tools out there. Then, try navigating the site via a keyboard.

Since many themes allow you to choose colors and typography, it’s also important to keep contrast and readability in mind. Is the text too small? Do the colors provide enough contrast to allow text to be read? This is something that should be relatively easy for you to control.

A laptop screen.

Determine the Effect of Plugins

WordPress plugins are another area worth paying attention to. While some simply adopt your theme’s CSS, others add their own markup. Both the accessibility and quality of this code can vary.

This means that, even if you have a theme that follows best practices, the wrong plugin could cause unintended issues. And the bigger the plugin’s front-end footprint on your website, the more potential it has to negatively impact accessibility.

For example, a page builder plugin could theoretically add a ton of HTML, CSS and JavaScript beyond your theme. If it’s not been built with accessibility in mind, that could be a problem. But this goes for any plugin that injects its own markup.

If you can’t avoid using these types of plugins, that’s okay. But it is recommended you run tests with and without plugins active to gauge the impact. You can also utilize your web browser’s inspector tools to pinpoint any troublesome code.

Web page source code.

Have an Existing Site? Add Accessible Features

For websites that are already out there in the public space, retrofitting can be difficult. Factors such as a site’s age and how it was initially built can play a role in just how much work is involved. In some cases, a full-on revamp may not be within a reasonable budget.

Certainly, if you’re working on a site that has so many challenges, an argument can be made for a redesign. That might well be the best path forward, as you can establish accessibility as a primary goal. But it’s understandably not always realistic, either.

In these situations, there are still some things you can do:

Make Small Enhancements

Maybe those big, all-encompassing changes aren’t going to happen. Instead, look for little things you can change without too much trouble. For instance, bumping up the font size and increasing line spacing will offer a cleaner look and allow your content to be more easily consumed. The same goes for colors.

Other possibilities include making sure that images have descriptive ALT text and that hyperlinks have a :focus state defined. There are any number of small changes that can add up to a better user experience.

Provide Users with Options

Another way to make an existing site more accessible is by empowering users make some choices for themselves. By allowing them (within reason) to adjust things such as font sizes or color contrast, you’re helping to meet their needs.

One simple and cost-effective way to do this is by installing a plugin, such as WP Accessibility. It adds font and contrast features in a handy front-end toolbar. Plus, it can optionally add :focus states to your links, add a skip link to your pages, along with other goodies.

A font style chart.

Awareness Is Half the Battle

Because the WordPress platform offers so many possible looks and functionalities, we often take things for granted. It’s easy to pick a theme or install a plugin and not think twice about how they affect accessibility. Yet, each decision makes a difference.

Just having an awareness of the potential impact makes us better designers. It encourages us to take that extra step of testing and to be more discerning about what we use.

The result is that we start putting users first – in front of unreadable color schemes and special effects that hurt usability. Once we do that, accessibility becomes just another feature we build in by default.