1stWebDesigner https://1stwebdesigner.com Helping You Build a Better Web Thu, 22 Aug 2019 17:15:09 +0000 en-US hourly 1 https://wordpress.org/?v=5.2.2 Travel Website Design Inspiration https://1stwebdesigner.com/travel-website-design-inspiration/ Thu, 22 Aug 2019 17:15:09 +0000 https://1stwebdesigner.com/?p=149762 Are you making a travel website that needs to capture the beauty of the world? World explorer, outdoorsy business, or travel agency, we know you need some big inspiration to get started with your design.

We’ve collected the work of some amazing web designers here for you. Let the mockups and websites they’ve created help you create your own awe-inspiring travel site.

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




Fire & Ice Website

Example of Fire & Ice Website

Dark and light contrasts the elements of this beautiful design, with light used to highlight the gorgeous imagery. Fullscreen photography, galleries, and sliders of the most scenic places in Iceland are scattered throughout and keep people engaged.

Marvel Travels – Startup Travel Agency

Example of Marvel Travels - Startup Travel Agency

Bright and clean design dominates this well-made mockup. There’s a nice full screen hero image followed by plenty of smaller images next to calls to action and other information.

Yosemite

Example of Yosemite

Huge photography, a large and user-friendly UI, and sections of interest that take up the whole screen or more are scattered about this landing page. It’s fitting for one of the largest national parks in America.

Blog Page

Example of Blog Page

If you want to create a blog that stuns people just as much as the homepage, look here. Create a travel blog that looks like this and people are sure to quickly subscribe for more.

Yellowstone

Example of Yellowstone

Yellowstone’s gorgeous homepage is simply a masterpiece. It combines the amazing imagery of an untouched national park with a pleasing user interface and helpful info at every scroll.

Forest

Example of Forest

The tile-based design here is used well, with 3D overlays and lots of interactive media in every block. A similar design would look great for a website that relies on visuals rather than text content.

Coastal Holiday Home

Example of Coastal Holiday Home

This mockup has more of a focus on real estate. Photos of vast landscapes are replaced with pretty interior and exterior shots, and it all has a bright, fresh look to it.

Travelers: National Geographic Site

Example of Travelers: National Geographic Site

It may only be inspired by National Geographic, but this project looks completely authentic. Exciting photography is what the brand is all about, and it’s woven perfectly into its landing page.

Wandr: Iceland

Example of Wandr: Iceland

This hero image transitions from white to black, which seamlessly spills down into the rest of the page. The design is then broken up with beautiful, bright photography that stands out against the darkness. It’s a great concept for a landing page, and very inspiring.

Kayaking Trip Site

Example of Kayaking Trip Site

Pretty and functional, this is a great project to study if you’re making a business website. Calls to action are everywhere, but it never gets in the way of the landscape and portrait shots.

HutHut Adventures #1 – Landing

Example of HutHut Adventures #1 - Landing

Here’s an example of nice composition. The hero image and footer utilize photography, while the content area is the middle is light and spacious. Large images offer breathing room between text.

The Great Outdoors

Example of The Great Outdoors

Short, sweet, and simple, this landing page gets its point across quickly and stylishly. The photo header smoothly fades out to give way to image links and blog posts, before fading back in to the footer.

Travel Landing Page

Example of Travel Landing Page

A good homepage is crucial for success, and here’s a great example. Notice the focus on orange hues; they appear everywhere from UI to the photography. Strong usage of color can create a beautiful effect.

Traisl.

Example of Traisl.

Many travel sites tend to go for contrast between the photos and background, but this contrasts dark UI against snowy photography. It gives a greater focus to the text content.

Gorgeous Travel Sites

Travel websites are especially beautiful. They utilize jaw-dropping photography and videos to draw you in and get you excited to explore. Knowing how to incorporate these into a great user interface is key to creating an amazing travel design.

There’s something about seeing gorgeous natural imagery that draws people in. Use this to your advantage as you design a website that captures people with its beauty.

]]>
Proven Strategies for Building Creative Websites That Get Results https://1stwebdesigner.com/proven-strategies-for-building-creative-websites-that-get-results/ Wed, 21 Aug 2019 17:44:37 +0000 https://1stwebdesigner.com/?p=149722 Good news, not so good news, fabulous news, and a bonus.

The global market is getting bigger and bigger. That’s good news.

Clients, meanwhile, are getting more selective and demanding in their drive to share their messages with the world through the use of highly creative websites – that may not be such good news if it means a heavy dose of arduous work for you.

The fabulous news? Be Theme’s size and versatility make it the perfect web design tool for meeting the challenges brought on by the need to design creative, eye-catching websites that will pass muster with the most selective and eagle-eyed client. This is your opportunity to cash in by showing these clients what you can do for them.

The bonus is 5 simple steps to create a website your client will love and a website that converts.

5 Steps to Building Amazingly Creative Websites

Step 1: Choose a Mesmerizing Color Palette

There are 3 simple rules you need to follow when choosing your color palette.

  • It needs to immediately attract attention;
  • It needs to be on brand, and;
  • It needs to be compatible with and supportive of your messages;

Artist’s BOLD color touches immediately attract attention.

Artist WordPress Theme

This Be Theme pre-built website offers an excellent example of an attractive, eye-catching color palette.

BeCreative WordPress Theme

Carbon8, with its shades of green and contrasting colors perfectly aligns the color palette with the brand to produce a visually remarkable website.

Carbon8 WordPress Theme

The BeInsurance color palette is crisp, yet subtle; just the right combination of factors to reinforce a message and attract more clients.

BeInsurance WordPress Theme

The BeFestival color palette is a perfect example of an approach you can take to appeal to a larger audience.

BeFestival WordPress Theme

Step 2: Display Crystal-Clear Pictures

Presenting crystal clear images should be a no brainer. It’s the best way to let people know precisely what your business offers; as opposed to artsy, somewhat out of focus images that keep them guessing.

Flair and clarity always triumph over mystery and ambiguity when it comes to marketing a product – or a service for that matter.

BeStylist makes excellent use of both flair and clarity in its images. Color schemes are easier to figure out when images are sharp.

BeStylist WordPress Theme

See if you can come up with a website design similar to RansomLTD.  This website was built from scratch to display sharp, pixel-perfect digital images.  Check this one out against what’s currently out there.

RansomLTD WordPress Theme

Or, you can go with a more conventional website like Zajno.

Zajno WordPress Theme

The Design Shop offers a no-nonsense approach to displaying your products with flair, dignity, and creativity. Compelling and crisp would be a good summary description.

The Design Shop WordPress Theme

Step 3: Show Visitors How Your Creativity Benefits Them

Showing people what’s in it for them is always a powerful marketing tactic, and one way to do that is to help them imagine themselves as being actual customers.

BeMarketing’s video on the homepage shows visitors how they can expect to benefit from using your product.

BeMarketing WordPress Theme

Lane, on the other hand, expresses a structural design perspective with its example of flexibility and functionality in workplace design.

Lane WordPress Theme

BeSimple demonstrates the power of a minimalist view; attractive, yet to the point.

BeSimple WordPress Theme

If you’re a travel blogger this one’s for you. BeTravelBlogger’s graphics layout makes it a travel blogger’s dream.

BeTravelBlogger WordPress Theme

Step 4: (Over)Use “White” Space in Even in Creative Websites

“Overusing” white space is actually difficult to do. After all, it’s the #1 visual element found in many, if not most, successful websites. Don’t be hesitant about using it to highlight your creativity.

Makespace has a clean design that makes it oh-so-easy for the eye to focus on what’s most important.

Makespace WordPress Theme

You can accomplish the same with either BeSketch or The Drive New York (or both). White space is used in these two websites to enhance the overall visual experience in addition to highlighting the page’s key elements.

BeSketch WordPress Theme

The Drive New York WordPress Theme

BeIceCream might well be THE most extreme example of effective use of white space. Its use definitely supports the brand while effectively driving the message home.

BeIceCream WordPress Theme

Step 5: Make Your CTAs Grab Visitors by the Eyeballs

If a CTA button doesn’t command immediate attention, why use one at all? Why not just let the visitor try to figure out what to do next?

Not a good idea. You want big, bold, bright buttons that are impossible to ignore, buttons that compel visitors to click.

Look at BeDrawing. It has a CTA button that clearly stands out. It’s centered nicely right below the sub-headline, where it acts like a welcoming invitation to step forward.

BeDrawing WordPress Theme

Stuart has the same idea; two CTA buttons, with the main one at the bottom.

Stuart WordPress Theme

Here’s a great example of having the CTA match other elements on the page. Even though BeKids uses blue to match other blue elements, the CTA button still stands out.

BeKids WordPress Theme

Surefire Ways to Build Creative Websites

These 5 surefire tactics will take you a long way in your quest to building eye-catching websites that will convert. You should find the examples helpful in selecting your color combinations, positioning key elements, understanding the power of the generous use (or overuse) of white space, designing and placing CTA buttons that practically demand to be clicked, and of course showing your visitors, through your creativity, how they will benefit.

You’ll find the web’s most comprehensive and visually impressive gallery of fully-functional, professionally-designed creative websites on Be Theme. There are currently more than 450, and counting, pre-built websites to choose from and customize to your needs and to your liking.

]]>
9 Websites with Mesmerizing Background Animations https://1stwebdesigner.com/9-websites-with-mesmerizing-background-animations/ Wed, 21 Aug 2019 13:54:55 +0000 https://1stwebdesigner.com/?p=149686 Looking for some animation inspiration for your next design project? Some of the most stunning websites on the internet are the ones that use motion to great effect. There’s nothing quite as memorable as a site with jaw-droppingly beautiful animations.

If you want to see some of the best examples of JavaScript, WebGL, and CSS3 backgrounds, you’ve come to the right place. Here are 9 absolutely mesmerizing animated websites, collected here for your inspiration.

Prior Holdings

Example of Prior Holdings

This website starts with a calm, muted background. But as you progress through the screens and learn more about this bridal services company, you’ll see strips of white cloth begin gently moving across the screen, then a whole bolt elegantly unwinds across it.

HAUS

Example of HAUS

The first thing you’re greeted with here is an entrancing kaleidoscope animation that slowly moves and shifts between colors, even responding to your mouse. Click to see more work and the ball expands to take up the screen, switching its patterns and designs to match the portfolio piece you’re hovering.

The Frontier Within

Example of The Frontier Within

Thorne’s website experience immediately greets you with hundreds of intricately rendered particles, all responding to your mouse movements with fluidity. Watching the particles flow along and scattering them with your mouse is strangely fun. And that’s just the first screen!

Turn on your webcam and experience a shockingly accurate rendition of your respiratory, circulatory, and nervous system, all represented by these little particles.

KIKK Festival 2019

Example of KIKK Festival 2019

Nothing sets the scene quite like a great aesthetic animation, and KIKK nails it with a pretty pastel background layered with whirling snow. Even the logo appears to be dissolving into the blizzard. There are quite a few nice scrolling animations as well.

Yuen Ye

Example of Yuen Ye

When you visit this beautiful portfolio, you’ll find the best examples of photography and design fluttering in the background like flags. These flags are dynamic and swing or buffer on their own or in response to you scrolling and hovering. Explore further to find more beautiful background animations, everywhere from the about page to the portfolios themselves.

The View From Above

Example of The View From Above

These dynamic 3D birds look like something out of a movie. It’s simply stunning. As you scroll, you’ll be presented with more gorgeous forest environments and beautifully animated creatures. Plus, you can learn a little about the environment and how to help the birds in your area.

Create/Disrupt

Example of Create/Disrupt

In one page, this portfolio manages to show off a vast array of unique background animations. This is a UI/UX design company after all, so you wouldn’t expect any less. Scroll through this short piece and explore the variety of compelling animations presented to you.

Digital Present

Example of Digital Present

Upon opening Digital Present’s portfolio, you’re immediately hit with a barrage of beautiful animation. Move your mouse around, scroll, and hover each element as you browse this beautiful site to discover everything.

Creative Cruise

Example of Creative Cruise

Bright and cheerful, Creative Cruise’s homepage greets you with a fun backdrop. Try clicking and dragging the road to see it spin infinitely. Or click any link to make the clouds in the background change. It’s a simple, but super-fun site to play with.

Inspiring Background Animations

Developers and designers have done amazing things with WebGL and other browser animation APIs. The days of flat, static web design are far behind us; now any website can become an inspiring experience, or a gorgeous art exhibit.

If you want to try making your own 3D animation, one of these websites are a great place to start for getting inspired. Now that you know how the best sites pull off creating enthralling animations, it’s your turn to start designing a beautiful site of your own.

]]>
Showcase of Beautiful Dashboard Design Inspiration https://1stwebdesigner.com/a-showcase-of-beautiful-dashboard-design-inspiration/ Thu, 15 Aug 2019 17:04:20 +0000 https://1stwebdesigner.com/?p=149633 UI design is a delicate, and often overlooked, art. A beautiful user interface is half of what makes a website great. The best UI combines amazing design and useful functionality to make an app or website simple and fun to navigate.

But if you’re a designer making your own website, finding examples to draw inspiration from can be difficult. You might stumble upon an amazing creation as you browse the web, but if you need some great dashboard UI inspiration right now, we’ve got something for you.

These 13 awesome examples showcase a variety of different dashboards. From simplistic user backends to info-packed analytics reports, striking dark design to elegant light UI, those creating menus and dashboards will find some beautiful inspiration in this collection.

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




Sprint Report Dashboard by Rafał Staromłyński

Example of Sprint Report Dashboard by Rafał Staromłyński

Paat Bank by Sarah-D

Example of Paat Bank by Sarah-D

Vector Trade Dashboard for Bitcoin

Example of Vector Trade Dashboard for Bitcoin

Product Analytics Management System Dashboard by Kostia Varhatiuk

Example of Product Analytics Management System Dashboard by Kostia Varhatiuk

Money Management Dashboard by Riko Sapto Dimo

Example of Money Management Dashboard by Riko Sapto Dimo

#Exploration – Dashboard by Dwinawan

Example of #Exploration - Dashboard by Dwinawan

User Dashboard UI KIT, Human Resources, Employer

Example of User Dashboard UI KIT, Human Resources, Employer

Cryptocurrency Exchange Dashboard by Den Klenkov

Example of Cryptocurrency Exchange Dashboard by Den Klenkov

Car Dashboard Interface by Aga Ciurysek

Example of Car Dashboard Interface by Aga Ciurysek

 

Product Analytics Management System Dashboard Dark Version by Kostia Varhatiuk

Example of Product Analytics Management System Dashboard Dark Version by Kostia Varhatiuk

Robo Advisor Web App by Michal Parulski

Example of Robo Advisor Web App by Michal Parulski

Dashboard UI Concept – Dark Theme

Example of Dashboard UI Concept - Dark Theme

Create Stunning Dashboard UI

Finding great sources of inspiration is a crucial step for any designer. Unless you’ve been making interfaces and outlines for many years, it’s a good idea to draw inspiration from other sources. That way you can see what works well in action and expand on it with your own unique style.

This list was compiled with variety in mind, so no matter what kind of dashboard UI you’re creating, you can find something to base your design off of. There are user backends, helpful interfaces, graphs and analytics, and everything in between.

We hope this compilation gave you the inspiration you needed to create a beautiful dashboard of your own.

]]>
Where to Find the Top Free Templates for Your CMS https://1stwebdesigner.com/find-the-top-free-templates-for-your-cms/ Thu, 15 Aug 2019 14:55:28 +0000 https://1stwebdesigner.com/?p=149606 When you’re trying to choose a CMS, there’s a lot to keep in mind. Features, price, and overall quality are all things to pay attention to. But there might be one factor you’re not considering for your CMS: The free templates it has available.

Design is everything in a website. With premium themes being so expensive, you might not initially be able to afford one, so you’ll have to rely on the default templates provided to you.

Let’s go over some top CMS options with great free themes, so you can have a beautiful website without having to pay exorbitant amounts of money.

WordPress

Sanremo WordPress Theme

If you’re looking for sheer variety, WordPress is definitely the way to go. It comes with a handful of customizable light themes right on its website. These simple, photography-focused templates more than get the job done.

If you’re willing to pay for premium themes, you’ll discover WordPress’s true diversity. There are thousands of user-made themes out there. Sites like Envato Elements offer plenty of choices so do some searching to find what you need.

Shopify

Jumpstart Shopify Theme

Shopify is an e-commerce CMS aimed primarily at larger businesses, so many of its premium themes can come out to almost $200. Luckily, there are also 10 free themes made by Shopify itself, all offering the elegance you’ll need to show off your new online store. They even come in multiple styles.

The CMS is also fairly popular, so you can expect to find free third-party Shopify themes online.

Webflow

Versus Webflow Theme

Webflow is a code-free CMS made for designers, so you’d expect their themes to be great – and you would be right. Their free themes are very distinctive from one another. Don’t expect the same bland template over and over again.

There’s quite a few more of them than other CMS competitors tend to offer as well, available in a range of categories. And since this platform focuses on design, you’ll be able to customize them as much as you want.

Squarespace

Bedford Squarespace Theme

If your website makes use of plenty of beautiful photography, any Squarespace template would work well for you. There are over twenty themes, all available on any Squarespace plan, and each one a great example of elegant design.

The one downside to Squarespace is that there are few third-party themes available, and a majority are premium. So, if you don’t like any of the free default themes, it may be best to pick a different CMS.

Drupal

YG Glow Drupal Theme

This free and open source CMS was created by a dedicated community of developers, and they haven’t neglected to fill out the theme project with nearly 3,000 free templates.

The problem is that it isn’t very friendly to navigate. Many themes lack demos or even screenshots, so your only option is to download each one to see if you like it.

Luckily, Drupal Free Themes was created to fix this issue. This site has a clean layout and is much less confusing to navigate, and every theme comes with a demo and a list of dependencies. If you love Drupal for its features but struggle to find a good theme, you can now have the best of both worlds.

The Best CMS Templates

There are many CMS options with awesome free templates out there, and this is just a handful of them. Which should you choose?

Shopify and Squarespace offer elegant templates with no fuss. They’re good choices if you just want a beautiful theme right out the gate. Webflow also has great themes, and has a high degree of customization available as well with its design-focused CMS.

Drupal and WordPress both share a large community that’s made thousands of themes. Drupal hosts them right on its website, though its themes tend to be simpler and made with functionality in mind. WordPress themes often have a larger focus on beauty and design.

Whatever you choose, remember that you’ll be rewarded if you’re willing to do some digging. Almost every CMS has a community creating third-party themes that are entirely free to download. You just have to be able to find them.

]]>
A Guide to Selling Digital Products with WordPress https://1stwebdesigner.com/a-guide-to-selling-digital-products-with-wordpress/ Tue, 13 Aug 2019 20:05:32 +0000 https://1stwebdesigner.com/?p=149501 Looking for a highly-customizable way to sell your digital goods online? Chances are you can do it with WordPress.

The jack-of-all-trades CMS offers a number of different plugins that will help you distribute software, eBooks, music, stock photos and just about anything else that can be downloaded. And you can build a simple configuration with free tools.

But because there are a number of options available, it can be difficult to figure out which path to take. You’ll want to adopt a strategy that allows you the flexibility you need without adding a whole lot of unexpected costs and/or roadblocks.

Sound daunting? No need to worry! Today, we’ll show you a few different possibilities for selling digital products. While they won’t cover every possible need, they should at least help you determine the path that’s right for you.

A person viewing a sales report on a laptop computer.

Scenario #1: Single Product Sales

If you want to sell digital products on a one-off basis, a shopping cart is the way to go. A free plugin such as WooCommerce or Easy Digital Downloads can do all of the heavy lifting for you. Configure your products, set pricing and you’ll have a basic store up and running rather quickly.

What’s more, each of these shopping cart plugins have a wide variety of free and paid add-on components. They provide extra functionality such as the ability to tie in with specific payment gateways, offer product bundles and allow for affiliate sales – to name just a few.

The biggest decision here may be which cart to use. Each has its own strengths when it comes to digital products.

Easy Digital Downloads

As its name suggests, Easy Digital Downloads (EDD) was built specifically for selling downloadable goods. Thus, it offers a whole lot of features dedicated to this purpose.

You can, for example, use the built-in function to limit access to downloadable files by download attempts or expiration date. And if you’re selling software that requires a license key, you can add this functionality through an available paid add-on. If you’re distributing large files, there is even an add-on for storing them on Dropbox.

Or, start a community site by allowing users to post and sell their own items. Need a way to provide users with sales commissions? It’s just another plugin away.

However, at its core, EDD is also a shopping cart. Out of the box, the plugin includes things like discount codes and customer management (including front-end account profiles). About the only feature missing is the ability to ship physical goods – but again, there’s an extra piece that can allow for this as well.

Easy Digital Downloads Home Page.

WooCommerce

By now, just about everyone knows WooCommerce. It’s the dominant shopping cart in the WordPress sphere. It’s feature-packed, highly-customizable and you can use it to sell just about anything – including digital products.

This functionality is built right into the core plugin, so you can start selling right away. Like Easy Digital Downloads, the ability to limit downloads based on attempts or an expiration date is included.

Downloads also work with variable products. For example, if you’re selling images, you can allow users to pick from a number of different sizes or formats. This also enables you to price them accordingly.

Of course, WooCommerce is also famous for its large number of extensions. You’ll find a few that are specifically geared towards digital goods, including one aimed at professional photographers and another that enables you to offer downloads on subscription-based sites (we’ll get to that in a moment).

But since the plugin is used to sell so many different types of products, those who have very specific needs when it comes to digital goods may be a bit disappointed. There aren’t a lot of extra bells and whistles in this category.

That being said, if you don’t need some of the extras that EDD offers, or you’re selling a variety of physical and digital products, WooCommerce is still a great choice.

WooCommerce Home Page.

Scenario #2: Subscription-Based Service

Another typical scenario is in offering digital downloads to customers via a subscription. This is frequently becoming the preferred method for sites that sell stock photography, illustrations, icons and other types of assets. Customers pay monthly, yearly or even a single lifetime fee in exchange for access to files.

The good news is that both Easy Digital Downloads and WooCommerce have add-ons that enable subscriptions and recurring payments. Just note that you’ll need to work with a payment gateway that supports this functionality.

Making Your Site Members Only

Beyond the ability to sign up subscribers, you’ll also want to think about how you’ll protect your files from unauthorized users. This functionality is available for either of the aforementioned shopping cart plugins. But again, it will require a combination of commercial add-ons if you want to stay within their respective plugin ecosystems.

Alternatively, you could also work with a full-on membership suite. Plugins such as Paid Memberships Pro or S2Member Framework, among others, could be a good fit if you are just looking to sell access to restricted content. This may limit you quite a bit when it comes to features like download limits and licensing, however.

There may be some cases where combining both a cart and membership suite makes sense. This is a piecemeal approach, though, and could make implementing features a little more difficult. Therefore, you’ll want to weigh your options carefully.

A login form displayed on a tablet computer.

Dealing in Downloads

Setting up a basic store to sell digital products is well within reach. With the help of a free shopping cart plugin, you can go from installation to selling online in a few short hours.

If you’re looking for something a little more robust, that’s also possible through the plugins mentioned above. But it will most likely take some commercially available add-ons to bring the desired functionality to your website.

Either way, you’ll have a solid foundation for your store that can grow along with you over time.

]]>
Thoughts (Plus a Eureka Moment) from a WordPress Website Builder User https://1stwebdesigner.com/thoughts-plus-a-eureka-moment-from-a-wordpress-website-builder-user/ Tue, 13 Aug 2019 13:38:58 +0000 https://1stwebdesigner.com/?p=149576 I’m not usually the one to write reviews about products or services I’ve used unless they prove to be very good or very bad.

Writing about something that’s “OK” seems hardly worth the effort.

The past few WordPress builders I’ve been using have been “OK”, with at least one of them rating 3+ stars in my mind, but still nothing to write home about.

Two of the three didn’t have all the features I wanted in a WordPress builder. The best of the bunch did, but it could be difficult to use at times and product support wasn’t the best.

I should add that I work as a freelancer and mostly in a lone wolf capacity. Although, I do correspond and sometimes collaborate with several of my peers on social media.

One of them suggested I share my experience with others; hence this article.

The suggestion was made when I told him about my new WordPress builder and why it was not only far greater than “OK” but has proven to be a game changer.

I’m sure most of my peers are in the same boat, making do with tools that range from OK to very good indeed, and occasionally coming upon a game changer.

Like the Eureka moment that happened to me.

A person using a laptop computer in a cafe.

What I Always Wanted in a WordPress Builder – Even When I Wasn’t Always Aware of It

I look for several key things in a WordPress builder. The first ones I used appeared to be satisfactory until I found something missing or less than ideal. What I looked for and wasn’t always there generally involved one of three things:

Ease of Use

I like a learning curve that’s flat, or at worst has a very gentle slope. A steep learning curve can make it difficult to complete a project fast.

Responsive Preview

I like to see what I’ve done as soon as I’ve done it, and I like to see how it will appear on any device.

Free Templates and Elements

The more the better. But at least enough of them so I don’t have to code anything from scratch. The templates need to be easy to customize and I need to be able to place the elements (buttons, video players etc.) with ease wherever I want.

An eCommerce website on a laptop computer screen.

The Other Builders

I won’t name the 3 others I’ve used since they may work well for others.

After all, it’s not uncommon to find a product that receives both a 1- and 5-star rating and everything in between. What’s been OK for me could be a real game-changer or a terrible choice for someone else.

Like I said earlier. None of my choices made it much past a 3.

All three were easy to use, although one of them could not be described as “intuitive” and lacked helpful documentation.

One of them lacked a true WYSIWYG feature and neither of the others provided what you would consider to be a genuinely responsive live preview.

Only one of the three, the one I liked best, had templates and elements to work with. The customizable templates were fine, but the elements weren’t all that helpful.

My Deal Breaker – the Visual Composer Website Builder Free Version

Screen from Visual Composer Website Builder

I’ve heard about Visual Composer – the Page Builder used by so many WordPress themes and now known as WPBakery.

Yet, I knew nothing about the Visual Composer Website Builder – the reason being that it was only released a year ago.

Looking for something better I gave the VC Website Builder a try.

And that was my Eureka, Aha, Game-Changing moment.

I can build a website top-to-bottom (header and footer included), and since it doesn’t use shortcodes it allows me to generate clean code.

This helps avoid crashing or other nuisance problems when I disable the plugin.

I started by downloading the free version and it surprised me how intuitive and easy this website builder is to work with. The learning curve isn’t flat, but it’s not steep either. I’m sure almost any beginner could pick up on how to use this tool rather easily.

It also seemed to me that VC’s free version has more features than any other free website builder.

For example, I don’t need a third-party tool to test the responsiveness of my designs. Nor do I have to resize my browser window or check the design on my phone and waste precious time.

Responsive Views in Visual Composer Website Builder

Everything can be done in Visual Composer, with a mouse click.

The Visual Composer Website Builder isn’t perfect.

Although it seems nearly so when a project consists of building a simple, basic page or website. For more complex projects, the 10 free customizable templates and 50 free design elements that you will find in their Hub are not enough. But heck, it’s free after all.

The Visual Composer Hub does set it apart from other website builders. It’s a cloud-based marketplace of web design assets that makes unnecessary the need for extra plugins or custom coding. And it’s the place where you can search for the design templates and elements you need.

Oh, and the stunning parallax effects I could achieve were pretty cool too.

Screen from the Visual Composer Hub

Give It a Shot

Maybe someday something even better will come around. In the meantime, give the Visual Composer Website Builder a try. There’s a free version you can download.

Here’s the download link. Let me know what you think.

]]>
Outstanding Scroll and Parallax CSS Effects https://1stwebdesigner.com/outstanding-scroll-and-parallax-css-effects/ Mon, 12 Aug 2019 14:56:54 +0000 https://1stwebdesigner.com/?p=149558 CSS effects can be a great way to add some visual interest to your website. A common web design mistake is making a website that’s too static. One little parallax animation can do wonders to make your design more interesting and dynamic for visitors.

You should avoid boring web design at all costs. Get people excited by including fun and interesting animated effects in your design instead. You have to be careful not to go overboard, but with the right touch of animation, your website will massively improve.

We’ve collected some scroll and parallax CSS effects for you today. Stun your visitors and make your website fun to browse with one of these amazing effects!

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




Codevember 4 :: Sky

See the Pen
Codevember 4 :: Sky
by magnificode (@magnificode)
on CodePen.

CSS Scrollbar

See the Pen
CSS Scrollbar
by Daniel (@zkreations)
on CodePen.

CSS Snap Points

See the Pen
CSS Snap Points
by Raphael Fabeni (@raphaelfabeni)
on CodePen.

Mouse Move Parallax

See the Pen
Mouse Move Parallax ✨
by oscicen (@oscicen)
on CodePen.

3D CSS Parallax Depth Effect

See the Pen
3D CSS Parallax Depth Effect
by Adrian Payne (@dazulu)
on CodePen.

CSS-Only Parallax Effect

See the Pen
CSS-Only Parallax Effect
by Yago Estévez (@yagoestevez)
on CodePen.

Pure CSS Parallax Scrolling

See the Pen
Pure CSS Parallax Scrolling
by Keith Clark (@keithclark)
on CodePen.

Page Scroll Effects

Page Scroll Effects

[Pure CSS] – One Page Scroll

See the Pen
[Pure CSS] – One page scroll
by Quentin Veron (@VeronQ)
on CodePen.

Image Cutout Parallax Effect

See the Pen
Image cutout, parallax effect: CSS + SVG
by Alex O’Neal (@alexoneal)
on CodePen.

Skew Scrolling Effect

See the Pen
Skew Scrolling Effect ▲
by Dronca Raul (@rauldronca)
on CodePen.

Pure CSS Scroll-Icon Animation

See the Pen
pure css scroll-icon animation
by Jonas (@JonasNoldeDev)
on CodePen.

Parallax Scrolling

See the Pen
Parallax Scrolling
by Marcel Schulz (@MarcelSchulz)
on CodePen.

CSS Scroll Down Button

See the Pen
demo:CSS scroll down button
by Naoya (@nxworld)
on CodePen.

Parallax Background

See the Pen
Parallax Background
by Ravi Dhiman (@ravid7000)
on CodePen.

stroll.js – CSS3 scroll effects

stroll.js - CSS3 scroll effects

CSS Horizontal Scrolling

See the Pen
CSS Horizontal Scrolling
by lemmin (@lemmin)
on CodePen.

Page Top Parallax

See the Pen
Page top parallax
by jakob-e (@jakob-e)
on CodePen.

CSS Scroll Reveal Sections

See the Pen
CSS Scroll Reveal Sections
by Ryan Mulligan (@hexagoncircle)
on CodePen.

Beautiful Scroll Effects for Your Website

If you want to fancy up your site with a nice scrolling effect, choosing the right animation is essential. One of these CSS snippets should be just the thing to add some awesome parallax or scrolling effects to a page.

Some CSS and maybe a splash of JavaScript can make all the difference in how your site feels and acts. Most if not all of this code is free to use or base your own programming off of, so feel free to test drive any of these examples on your own website. Any one of these effects would make a great addition.

]]>
Spruce Up Your Projects With These 19 Nature Fonts https://1stwebdesigner.com/spruce-up-your-projects-with-these-19-nature-fonts/ Wed, 07 Aug 2019 15:49:29 +0000 https://1stwebdesigner.com/?p=149465 Are you on the hunt for some gorgeous decorative nature fonts to spruce up your website or design project? Nothing is better than a well-made font to complete the look. If you’re going for a flower or nature theme, these are just the thing.

You may prefer a fancy typeface with lots of decorations, or one that more subtly embodies a natural aesthetic. No matter what you’re looking for, there’s a beautiful font here that will suit your needs. Some like Into the Wild and Bouquet Flower go all out with the design, and others like Northern Passage and Autumn Leaves simply look earthy or rustic.

Take a look at this selection of nineteen wild nature fonts, and see what gems we’ve collected for yourself.

UNLIMITED DOWNLOADS: 400,000+ Fonts & Design Assets




The Golden Leaves by Innire

Example of The Golden Leaves by Innire

Peomy Extended

Example of Peomy Extended

Flash by George Williams

Example of Flash by George Williams

Autumn Embrace Floral Font by anmark

Example of Autumn Embrace Floral Font by anmark

Earth Elements Typeface by Anna Ivanir

Example of Earth Elements Typeface by Anna Ivanir

Curly Fleur Caps by Lime

Example of Curly Fleur Caps by Lime

One Two Trees by CloutierFontes

Example of One Two Trees by CloutierFontes

Lemon Grass Script by Mellow Design Lab

Example of Lemon Grass Script by Mellow Design Lab

Pinebrick Typeface

Example of Pinebrick Typeface

Tortoise and Deer by Emma Make

Example of Tortoise and Deer by Emma Make

VTKS Flowers in Our Soul by Douglas Vitkauskas

Example of VTKS Flowers in Our Soul by Douglas Vitkauskas

Bouqet Flower & Watercolor by bloomxxvi

Example of Bouqet Flower & Watercolor by bloomxxvi

Amelie Floral Display Font by Alisovna

Example of Amelie Floral Display Font by Alisovna

Northern Passage

Example of Northern Passage

Camp Fire by Typographer Mediengestaltung

Example of Camp Fire by Typographer Mediengestaltung

Forest Camp by Opus Nigrum

Example of Forest Camp by Opus Nigrum

Forests Layered Font by Zeppelin Graphics

Example of Forests Layered Font by Zeppelin Graphics

Autumn Leaves by madeDeduk

Example of Autumn Leaves by madeDeduk

Into the Wild – Double Exposure Font by Cosmic Store

Example of Into the Wild - Double Exposure Font by Cosmic Store

Try These Nature-Inspired Fonts

Flower and nature fonts are great for decoration all year round. Spring, summer, fall, or winter, remind people of the great outdoors by including a font with a lot of character. Any site with an outdoorsy theme would look that much more amazing with one of these quality typefaces.

There’s a lot of variety in this list, so finding a fitting font should be a snap. Whether you love simple typefaces or extravagant ones, try a nature font from the collection and see how it looks in your design.

]]>
A Look at Why Web Projects Stall https://1stwebdesigner.com/a-look-at-why-web-projects-stall/ Mon, 05 Aug 2019 14:18:11 +0000 https://1stwebdesigner.com/?p=149399 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 that is needed to ensure a positive end result. In some instances, you may feel like your client isn’t holding up their end of the bargain, thus throwing your life into disarray. This, as much as anything, can make it difficult to move forward (even after you finally receive those product photos).

In short, a whole lot of trouble can come out of a stalled project. And the worst part is that, from a designer’s perspective, it can sometimes seem completely unnecessary.

Toy blocks scattered on a floor.

How to Keep the Ball Rolling

While you can’t necessarily avoid every instance of a stalled project, there are some things you can do to help try and keep things moving forward. Among them:

Establish Benchmarks

Having a mutually agreed-upon schedule of project benchmarks can be just the incentive a client needs to get things done. This is something you can discuss before things start and include in your contract. If the project is rather large, you might even consider adding some level of financial penalties for missed deadlines.

However, this may be easier said than done. It’s advisable to speak with a legal professional when adding this type of language to a contract as it could backfire on you. Not only that, but some clients may balk at the terms.

Offer to Help

Not all delays are due to negligence or being too busy. Sometimes, a client may be a bit overwhelmed by the process of putting together materials for their website. They may not know where to begin or are just unsure about asking for help.

So, if things don’t appear to be moving along as you expected, reach out and offer your assistance. Check in and see if they have any questions or need some advice. You might find that, by being proactive, you can restart progress.

Break Down the Process

Another reason a client might feel overwhelmed is that they think everything needs to be taken care of at once. But for most projects this just isn’t the case.

One solution may be found in more clearly communicating the design process. Inform your clients about the steps involved and what you need to complete each one. A more iterative process might just lead to fewer fits and starts.

Person walking up a flight of stairs.

Keeping a Watchful Eye

One of the less talked-about parts of a web designer’s job is that of project management. It is so often up to us to keep things running smoothly. Although, instead of making sure employees stay on task, we’re usually focusing on clients.

This is difficult, as we can’t really control what our clients do (or don’t do). Therefore, our best weapon is communication. If we don’t lead by spelling out our processes and their requirements, the project will most likely stall at some point.

Using some or all of the tips above can help you keep clients in the loop. While they don’t guarantee success, they do put all of the expectations out in the open. This way, if your client still doesn’t deliver, it’s on them. At the very least, you can say that you made the effort to keep the project moving forward.

]]>