A Look at Why Web Projects Stall

There’s nothing quite like the feeling of booking a new project. You immediately start thinking of it’s potential to boost your portfolio and your bank account (you may have even received a nice down payment).

And there’s often a great level of excitement from your client as well. They just can’t wait to get started and want to have things up and running as soon as possible. This is just fine with you, as you love crossing items off of your to-do list.

So, everybody’s just raring to go, right? Perhaps they are, for a little while. But over time, all of that initial elation fades away – along with any signs of progress. All of the sudden, you find yourself in the middle of a stalled project.

Why did this happen? And what can you do about it? We have some ideas! Let’s explore the common ways a project can slow to a crawl (or worse) and some ways to jumpstart it back to life.

A Wakeup Call

There is always a high level of optimism at the very beginning of a project. And clients usually have a lot of big ideas, too.

But when it’s time to actually do the work, reality sets in. What sounded like a piece of cake in meetings turns out to be more difficult than initially thought. This is a common theme when working with clients.

However, it’s not just the degree of difficulty that gets in the way. Time, or lack of it, can also play a major role. Clients who are already swamped with work may just not have an opportunity to get together content and other promised assets.

The result is that the website you were supposed to build in six weeks is past due, and it’s because you don’t have what you need to finish the job.

A wall clock.

The Domino Effect

For web designers, this situation is frustrating on several levels. First, it can have a negative impact on your schedule. If you blocked off a certain amount of time to finish a project, you might be left waiting around with nothing to do. And once it finally does start to move forward again, it could clash with other work you have to get done.

Along with a reshuffled schedule, a stalled project can also hurt you financially. When you’re counting being paid for your work at a specific time and it doesn’t happen – that can really hinder your ability to pay the bills.

Plus, this can also put a heavy strain on the relationship you have with your client. There’s a certain level of mutual trust and cooperation …

7 Top CSS Trends for 2019

As time goes on, web design is getting more innovative. Rather than just displaying information, websites are works of art, featuring complex animations, unique layouts, and micro-interactions. So many of these things are possible through CSS.

CSS gives style to normal, boring webpages, and enables everything that makes websites enjoyable to interact with. 2019 brings with it plenty of new horizons for web design, and these are the 7 CSS trends that will define the year.

UNLIMITED DOWNLOADS: Email, admin, landing page & website templates




CSS Grid

The prevailing standard for grid-based layouts has been Flexbox. In fact, at its height at the end of 2018, nearly 83% of page loads on Chrome used Flexbox. But a new contender has entered the ring.

That new contender is Grid. Still young and only seeing use on about 2.25% of page loads, it has still skyrocketed in popularity, only representing 0.25% of page loads at the start of 2018.

Grid is being hailed as better than Flexbox. Flexbox gives you control of vertical or horizontal alignment, but not both at once. Grid, on the other hand, does.

CSS experts attribute the lack of popularity to the fact that most major websites are not using it. After all, that data above is based on page views, not the raw number of pages that use Grid. It was only fairly recently that major sites adopted Flexbox, so it makes sense that they don’t want to make the switch just yet.

2019 will definitely see the growth of Grid, however, because it unlocks a degree of creative freedom that other options do not offer.

CSS Writing Mode

Example of CSS Writing Mode

Not all languages are written and read from left to right. For languages that go in other directions, you can use the writing-mode CSS property.

Flow text from top to bottom or from right to left and adjust the horizontal and vertical values. You can even display text sideways vertically, rotate the text for certain designs, and mix scripts.

Read up on CSS writing-mode »

Mobile Animations

 

Animations as a tool for engagement are increasingly popular. Websites will start to use more and more animated loading icons, page loads with limited design, etc. to keep the user’s attention.

An example of this from a popular website is YouTube. Open the YouTube mobile app and scroll through the videos. If you stop for a second, the video will autoplay with the sound off and show captions.

Animations are also used as indicators for an action or a task. Animated buttons and lists are becoming common too. Read all about …

8 Resources for Outstanding Free Stock Photography

Every website needs high-quality images, period. Headers, article and cover images, social media, icons – the list is endless. Even if you’re a photographer, you probably don’t have time to take a photo every time you need one. You could hire a professional photographer, but that costs a lot of money.

One great alternative is using free photography. Stock images have a bad reputation for being distracting and unhelpful, but there are plenty of beautiful, professional and entirely free photos available for use by web designers. And we’ve already found them for you – here are some of the best free photography resources out there.

Unsplash

With over 1,000,000 images, all free for commercial or noncommercial use, Unsplash is one of the best websites to find pictures. Photos are submitted by a massive community of open photographers and semi-strict guidelines ensure quality. If you need nature or portrait photography in particular, Unsplash has plenty of those to choose from.

Pixabay

Pixabay is all about variety. In categories where other free resources may be lacking, such as in abstract works, illustrations and vectors, or technology/internet-related concepts, Pixabay photographers have you covered. There are quality guidelines, but anyone can submit.

Also check out the free stock videos, licensed under the same rules, and with the same variety of content!

StockSnap

StockSnap is another massive collection of free CC0 photos that includes business, nature, people, food, and a huge variety of other topics. StockSnap also has a good selection of more artistic content, such as flat-lay scenes and abstract wallpapers. With new photos every day, this is a great resource for stock images.

Pexels

Pexels gets right to the point: Free stock photos and videos, for use anywhere, any time. Portrait photos seem especially popular. For photographers, photo challenges with prizes and PayPal donations are great incentives to participate, so you’ll see many high-quality photos here.

Burst

Burst is a project by Shopify that brings free photos to everyone – even people who don’t use Shopify. The photos are contributed by the community and categorized for easy searching. Portraits, animals, textures, nature photos and backgrounds are Burst’s specialty – especially ones that are made with business and e-commerce in mind.

ISO Republic

ISO Republic has a strong mix of trendy stock photos with high quality resolutions. The site also includes free stock video footage with easy-to-use search to filter what type of media you’re looking for. ISO Republic’s photo and videos are released under the same CC0 license.

Wikimedia Commons

Wikimedia Commons

Wikimedia Commons is a great place to find free photographs, videos and even sounds that depict nearly any topic you can imagine. …

15 CSS Background Effects

Did you know that you can use CSS to create beautiful animations and interesting effects? Combined with HTML and JavaScript, or even on its own, CSS can be extremely powerful. You’d be surprised at what developers can create.

From simple scrolling animations to complex environments built entirely of code, these effects can add a lot of personality to your website.

What if you could use CSS backgrounds created by others for free? Sites like CodePen were made to host open source or other freely-licensed code, which means you can use it in your own projects with few-to-no stipulations.

This is also helpful for designers who want to learn CSS or pull off a similar, but personalized look. You can use these code snippets as a base to create your own effects.

There are a ton of developers who have created amazing CSS backgrounds and released them for free. Today we’ve collected 15 of the most stunning ones. See for yourself what you can do with a creative mind and a little code!

UNLIMITED DOWNLOADS: Email, admin, landing page & website templates




Parallax Pixel Stars

See the Pen
Parallax Star background in CSS
by Saransh Sinha (@saransh)
on CodePen.

Gradient Background Animation

See the Pen
Pure CSS3 Gradient Background Animation
by Manuel Pinto (@P1N2O)
on CodePen.

Frosted Glass Effect

See the Pen
CSS only frosted glass effect
by Gregg OD (@GreggOD)
on CodePen.

Shooting Star

See the Pen
Only CSS: Shooting Star
by Yusuke Nakaya (@YusukeNakaya)
on CodePen.

Fixed Background Effect

Example of Fixed Background Effect

Tri Travelers

See the Pen
Tri Travelers
by Nate Wiley (@natewiley)
on CodePen.

ColorDrops

See the Pen
ColorDrops
by Nate Wiley (@natewiley)
on CodePen.

Animated Background Header

See the Pen
Animated Background Header
by Jasper LaChance (@jasperlachance)
on CodePen.

Zero Element: DeLight

See the Pen
Zero Element: DeLight
by Keith Clark (@keithclark)
on CodePen.

Glowing Particle Animation

See the Pen
CSS Glowing Particle Animation
by Nate Wiley (@natewiley)
on CodePen.

Background Image Scroll Effect

See the Pen
Pure CSS Background Image Scroll Effect
by carpe numidium (@carpenumidium)
on CodePen.

Multiple Background Image Parallax

See the Pen
CSS Multiple Background Image Parallax Animation
by carpe numidium (@carpenumidium)
on CodePen.

Bokeh Effect

See the Pen
Bokeh effect (CSS)
by Louis Hoebregts (@Mamboleoo)
on CodePen.

Calm Breeze Login Screen

See the Pen
Calm breeze login screen
by Lewi Hussey (@Lewitje)
on CodePen.

Effect Text Gradient

See the Pen
Effect Text Gradient
by …

Amazing Animated CSS Hover Effects

Have you ever visited a website and been stunned by a beautiful hover effect? Or have subtle UI animations left you feeling impressed with a site’s design? It may seem like a small detail, but hover animations can have a larger impact than you’d expect.

Good UI design means making interactive elements clear and visible, and hover effects can help you do just that. They look beautiful, and provide instant feedback when you hover over something that makes your UI easy to navigate.

These effects work particularly well in menu areas, but you can also use them on images, buttons, or other areas of your site too. These animations can leave a strong impression on people.

Today we’ve collected 17 awesome CSS hover effects, ranging from elegant menu and image hovers to more striking, unique animations. These are free for use under an MIT license, so try them on your site or use them as inspiration to create your own!

UNLIMITED DOWNLOADS: Email, admin, landing page & website templates




Rumble on Hover

See the Pen
Rumble on Hover
by Kyle Foster (@hkfoster)
on CodePen.

Hover.css

See the Pen
Hover.css
by vavik (@vavik96)
on CodePen.

Button on Hover Slide Effect

See the Pen
CSS Button On Hover Slide Effect
by RazorX (@RazorXio)
on CodePen.

Shaking Shapes

See the Pen
Shaking Shapes
by Laura Montgomery (@LauraMontgomery)
on CodePen.

Strikethrough Hover

See the Pen
Strikethrough hover
by tsimenis (@tsimenis)
on CodePen.

Hover CSS3

See the Pen
Hover CSS3
by Berlin Eric (@eberlin)
on CodePen.

Image with Slide Up Title

See the Pen
#1107 – Image with slide up title on hover
by LittleSnippets.net (@littlesnippets)
on CodePen.

Image and Title with Icons

See the Pen
#1193 – Image & title with icons on hover
by LittleSnippets.net (@littlesnippets)
on CodePen.

Gradient Button Hover

See the Pen
Gradient Button Hover
by Muhammed Erdem (@JavaScriptJunkie)
on CodePen.

Grow Hover Effect

See the Pen
CSS Grow Hover Effect
by Adam Morgan (@AdamCCFC)
on CodePen.

Background Color Change on Hover

See the Pen
CSS Background Color Change on Hover
by Ian Farb (@ianfarb)
on CodePen.

Fade Siblings on Hover

See the Pen
CSS-only Fade Siblings on Hover
by Shaw (@shshaw)
on CodePen.

Pure CSS Blur Hover Effect

See the Pen
Pure CSS Blur Hover Effect
by Matthew Craig (@mcraig218)
on CodePen.

Button Hover Effects

See the Pen
Button Hover Effects
by Kyle Brumm (@kjbrum)…

Free Website Templates for Online Stores

Online CMSes like WordPress, Shopify, and Joomla have popularized the use of templates and themes. With them, you can choose a look for your website and configure it without any knowledge of coding.

But did you know that you can also find HTML and Bootstrap templates that can be used on any website? What’s more, many of these templates are free. If you’re looking to start an online store and need a base to work off of, try one of these free eCommerce templates.

UNLIMITED DOWNLOADS: Email, admin, landing page & website templates




Fashion Hub

Example of Fashion Hub

Looking to make an elegant fashion boutique? Fashion Hub has everything you’ll need in this Bootstrap template. The homepage comes with a slider, service list, Instagram hub, and plenty of links pointing to your store. There’s also plenty of product pages, a blog, and even checkout/order screens.

eShopper

Example of eShopper

 

Made for all types of eCommerce websites, eShopper is a simple and clean design that comes with 11 pages. These include product listings, checkout pages, and a blog. This one’s a great all-purpose template with plenty of functionality and pages.

Sell Anything

Example of Sell Anything

With all the pages you’ll need to start building an online store, Sell Anything allows you to do just that. There’s a clean homepage with various product sliders, plenty of other pages you’ll need, and a topology page that shows you the various elements this template uses and explains how to use them to build your own pages.

Shop

Example of Shop

If you love elegant animations, you should try this HTML5 template. There’s plenty of scrolling animations, beautiful hover effects, and more in this stylish design. You get a few pages from this one, including a product, about, and services page. This one is perfect for a small shop that sells a few products.

Boighor

Example of Boighor

Light design and beautiful animations define this eCommerce design made just for online bookstores. But with such a nice design, you might want to repurpose this for any type of shop. The free version comes with twelve pages, while the pro version gives you a few extra pages and some variations on the available ones.

Toys Shop

Example of Toys Shop

With a bright and colorful design, this template is perfect for anyone selling toys or products for children. You get a product view and store page among many others, and the footer includes a Google Map and subscription form.

Darklook

Example of Darklook

Looking for something a little darker than all these bright, light designs? Darklook is great for technology and fashion shops. You’ll find cart, checkout, product detail, and blog post pages. The wide, large design puts a big emphasis on photography, so …

The 17 Coolest Fonts of 2019

Whether you prefer serif or sans serif, new fonts are coming out all the time. And they’re going in and out of style all the time, as well. 2019 is a year of bold designs that make a statement, so each of our featured fonts in this post will focus on the emotional response they can create, as well their artistic statement.

UNLIMITED DOWNLOADS: 400,000+ Fonts & Design Assets




Helios

Example of Helios

Helios is a sans-serif font with a futuristic touch. On first glance (and thanks to the accompanying sample image) it makes one think of space. Really, this font could find a home on a video game cover, a tech company’s homepage, or as a trendy sticker. Helios feels simultaneously as clean and sterile as a spaceship’s airlock and as packed with personality as any other decorative font.

Summer Loving

Example of Summer Loving

Handwritten fonts have been popular for a long time. There are a lot of situations that call for this style. But in 2019, authenticity is valued higher than ever, and nothing looks more authentic in design that a handwritten typeface. The Summer Loving font looks painted – some variants are hastily scribbled, and others look stenciled. Either way, it is full of bubbly personality.

While the name would suggest using this for summer designs, it could work during any season. It does lend itself to bright color palettes, but can definitely be used as a legible graffiti.

Bobby Jones

Example of Bobby Jones

The Bobby Jones font checks a couple of the boxes for font trends in 2019. Namely, it has a certain sense of nostalgia and whimsy, which is in style. It can also easily be used in a brutalist-style piece, given the somewhat gritty styles available. It’s a little bit quirky, a little bit bold, and definitely versatile. If 2019 is about standing out and being different, then this is a great font to try out.

Quinta

Example of Quinta

Another trend in 2019 is a smaller font size within hero images. With this decrease in font size, it’s important to find an easy-to-read type. A sans serif font is a great place to start, because they tend to look great on various backgrounds.

Self-described as “friendly and quirky”, Quinta is very readable. It has subtle rounded corners, which does make it inviting and lighthearted. A perfect choice for a corporate website header that wants to be a little more friendly and less cold.

Object Sans

Example of Object Sans

Looking for something even more simple and clean? Whether you’re looking for a font to read on screen or in print, this easy-to-read font is great for any need. Its versatility and ubiquity will make it perfect for …

The Secrets to Keeping Your Clients Happy

When you start a web design business, there are so many unknowns and things you may not have even considered. Maybe you’re a talented designer or developer – but that’s only part of the equation.

After all, even the most talented among us aren’t going to be successful without the ability to recruit and retain paying customers. Otherwise, you career becomes one endless side project. It may sound fun, but it also leaves you wondering how you’ll pay the bills.

The future of your business depends on creating solid working relationships with your clients. In other words: You need to keep them happy. But how?

In my 20+ years as a freelance designer, I’ve had a number of experiences – both good and not-so-good. Here are a few things I’ve learned about retaining clients over the long haul.

Communication is Key

Having good communication skills is essential in this business – especially if you’re working directly with clients. But there are some misconceptions about what this entails.

First and foremost, communication during a project’s development phase is of the utmost importance. Keep in mind that no one wants to be left in the dark. Clients need to be kept abreast of progress and aware of any challenges you see in achieving project goals.

Once the project is launched, you still need to keep up with your clients. However, some designers take this to mean inundating them with upsells and other marketing. While it’s OK to send an occasional newsletter or social media post, don’t overdo it. Someone who just paid a good bit of money for your services doesn’t want be bothered with constant “offers”.

More important is to be proactive about things like software updates, security and third-party subscriptions. For example, if they’re using a commercial plugin on their website, you’ll want to let your client know when a license renewal is coming. Or perhaps a change to a search engine algorithm means that some adjustments to their content may be in order.

These may seem like little things, but they mean a lot. They show clients that you are looking out for them and aren’t simply out to take their money. In turn, this establishes a level of trust between you that bodes well for the future of your relationship.

A woman and man having a discussion.

Be Honest

Communication is only as good as its actual content. Just as it’s not wise to send a constant stream of sales pitches, dishonesty is also a huge turnoff (and, sooner or later, a deal-breaker).

It’s not that we necessarily start out with the intention of being dishonest. Often it can come from the fear of letting …

An Introduction to Color Fonts + 16 Beautiful Examples

Are you ready to add some color to your website? Color fonts are revolutionizing web and graphic design spaces by bringing in effects that before required advanced editing to achieve.

Traditional fonts tend to be vectors; they sit on one layer and are made up of simple strokes and shapes. You can resize them, and add effects like colors and drop shadows using HTML or CSS, but that’s all. Bitmap fonts work similarly, except they can’t be resized.

Color fonts, also known as chromatic or OpenType-SVG fonts, are breaking those barriers. These fonts can contain shading, textures, bitmap images, and of course colors – even more than one color!

The results are a wide diversity of new typefaces, ranging from highly-detailed brush stroke fonts to multi-colored or gradient text to fonts that look metallic and shiny.

What’s the Big Deal?

Adding effects to text is nothing new for designers. Overlaying textures, images, or adding shading can be done in Photoshop. But what if you could just download a color font, type, and all those effects were right there in the first place?

The problem with simply adding effects to text in Photoshop is that the result must be displayed as an image online. That means that it can’t be highlighted, searched for, or indexed by search engines.

With OpenType-SVG fonts, it looks as fancy as anything you can make in an image editor, but it’s actual text on the page – not a PNG image. It can be resized if it’s a vector font, interacted with, and edited with HTML and CSS. This has huge implications for web designers and developers.

It also saves time. Instead of taking a normal font and adding effects to it, you can just find a color font that fits your needs.

While support for color fonts is currently spotty, most of these typefaces do come with fallback fonts. These are black and white versions of the font that will work on almost any browser or program.

Currently, color fonts are supported on Edge, Safari, and Firefox with Windows-only support for Opera and Internet Explorer. They’re also supported by most major image editors and design tools, except for Adobe XD, Premiere Pro, and After Effects.

The lack of Chrome support might make you wary, but it should be safe to use color fonts with fallbacks on your website.

Color Font Examples

Ready to add some color to your sites or graphic designs? We’ve compiled sixteen gorgeous color fonts here for you. All of these make full use of OpenType-SVG technology to create artistic type. See for yourself!

Bixa Color

Example of Bixa Color

Trend by Latinotype

Example of Trend by Latinotype

Pure Heart

Boost Your Brand with a .design Domain

In a crowded marketplace, web designers need to take advantage of every opportunity to stand out. And the right domain name can play a significant role. However, the traditional .com, .net or .biz extensions aren’t necessarily the best options for those of us in the industry. They lack the context that really hits home for potential clients.

But that’s all changing, thanks to the growing popularity of .design domain names. They offer a novel and unique way to promote your business. Why, just imagine the brand synergy of using one in your printed materials and email address. It sends a clear message to potential clients about you and your business.

And to make this a truly amazing opportunity, you can now register your own .design domain name for free! That’s right, a free .design domain that you can use in any way you like. Point it to your existing website or use the available site builder to start something new.

Get your free .design domain name from Porkbun.

Stand Out in Style

.design is unique from other domain extensions in that it so easily identifies with the core of your business. They provide a perfect complement to your new or existing brand.

Plus, you’ll find a number of additional benefits to owning one:

Find the Right Name (While They Last)
Since it’s fairly new to the market, there are still a number of great .design domain names available. But they are going fast! Therefore, you’ll want to reserve your name in short order.

Need more proof? Companies such as Adobe, Facebook and Uber are using .design domain names right now.

Make Your Brand Memorable
In general, shorter domains are easier to remember. And an industry-specific option such as .design creates an opportunity to shorten your name in some unique ways.

For example, johnsmithdesigncompany.com could be shortened to just johnsmith.design. In this case, the domain is both shorter and more memorable.

Redirect Anywhere
You may consider using your .design domain name for your main business website. It’s a great strategy and can be very effective. But you also have the flexibility to redirect it to other valuable resources. For example, you might consider pointing it towards your Dribbble portfolio or LinkedIn profile. It makes sharing that much easier, while looking highly-professional.

Register your FREE .design Domain Today

We at 1stWebDesigner have teamed up with Porkbun to offer our readers a FREE .design domain name. The first year is free, and yearly renewals are just $35 – a bargain compared to the $70 offered at some registrars.

You’ll also get:

Free Email Hosting Trial
Your domain comes with three months of free email hosting. Using your .design …