1stWebDesigner https://1stwebdesigner.com Helping You Build a Better Web Wed, 24 Apr 2019 12:57:32 +0000 en-US hourly 1 https://wordpress.org/?v=5.2 Free High-Resolution Marble Texture Backgrounds https://1stwebdesigner.com/free-high-resolution-marble-texture-backgrounds/ Fri, 17 May 2019 14:02:38 +0000 https://1stwebdesigner.com/?p=147629 Elegant and beautiful, marble textures make a great background for a variety of projects. Marble always brings an air of exquisite polish to a design, with its lustrous look and visually pleasing patterns. And when it comes to these backgrounds, you’ve got a lot of options.

Do you want something smooth and shiny, like a refined countertop? Or a look more rocky, imperfect, and natural? Or maybe even a colorful, out-of-this-world texture inspired by marble’s distinctive patterns?

We’ve collected examples of each, so you can choose the texture that best fits your design. Whites, grays, browns, vibrant colors and soft pastels, rough textures and shiny patterns – there’s a little bit of everything here!

10 Marble Textures Vol.4

Example of 10 Marble Textures Vol.4

Paper Marbling Textures Vol.2 by Aurora Prints & Goods

Example of Paper Marbling Textures Vol.2 by Aurora Prints & Goods

5 Marble Textures Vol.1

Example of 5 Marble Textures Vol.1

13 Free Marble Texture Backgrounds by Alex Clem

Example of 13 Free Marble Texture Backgrounds by Alex Clem

6 Marble Textures Vol.2

Example of 6 Marble Textures Vol.2

Paper Marbling Textures Vol.4 by Aurora Prints & Goods

Example of Paper Marbling Textures Vol.4 by Aurora Prints & Goods

10 Marble Paper Textures by Ari Bintara

Example of 10 Marble Paper Textures by Ari Bintara

6 Marble Textures Vol.3

Example of 6 Marble Textures Vol.3

Paper Marbling Textures Vol.3 by Aurora Prints & Goods

Example of Paper Marbling Textures Vol.3 by Aurora Prints & Goods

18 Ink Marble Paper Textures by ArtistMef

Example of 18 Ink Marble Paper Textures by ArtistMef

Paper Marbling Textures Vol.1 by Aurora Prints & Goods

Example of Paper Marbling Textures Vol.1 by Aurora Prints & Goods

Space Marble Backgrounds Set by ArtistMef

Example of Space Marble Backgrounds Set by ArtistMef

Looking for More Marble Textures?

If you’re searching for even more textures beyond the free options above, you’ll want to check out these selections below from Envato Elements. Each is available via their subscription-based service.

12 White Gold Marble Textures

Example of 12 White Gold Marble Textures

Modern Fluid Non-Seamless Marble V.3 Patterns

Example of Modern Fluid Non-Seamless Marble V.3 Patterns

10 Marble Textures

Example of 10 Marble Textures

Smooth Marble Backgrounds

Marble textures come with so much diversity. There are simple and elegant bright textures, natural cracked stone backgrounds, colorful displays, and surreal creations inspired by its unique patterns. But all share that smooth, polished style that make it a great element in your creations.

When you’re making a website, designing merchandise, or creating graphic designs that require a beautiful and subtle background, try out one of these marble textures. Posters, banners, presentations, or website backgrounds – you’ll soon see just how versatile a marble texture can be.

]]>
Beautifully Dark Website Design Inspiration https://1stwebdesigner.com/dark-gothic-web-design/ https://1stwebdesigner.com/dark-gothic-web-design/#respond Wed, 15 May 2019 08:59:26 +0000 https://1stwebdesigner.com/?p=136558 Dark websites have long captured designers’ imaginations, standing in stark contrast to the more mainstream light web design. When creating a website that’s unique, sleek, and mysterious, dark colors are often what creators go for first. In a world of white and bright websites, black stands out.

Ready to get inspired for your own creations? These websites make stunning use of a shadowy palette to create artistic, unconventional websites. Each one has something interesting to teach you!

Revelation Design

Screen capture from Revelation Design

Now this is a good first impression. When you enter this site, you’re greeted with the elegant animation of a flower slowly unfolding before you. Scroll down and text elements smoothly fade in and elements appear.

Nerisson

Screen capture from Nerisson

This site instantly shows off the creator’s skill in motion design with a cool animation as its centerpiece. The black background makes the colorful portfolio blocks that much more enticing. Each page sports a different color, but the dark UI remains consistent.

Ever & Ever

Screen capture from Ever & Ever

Awesome animations, 3D interactions, and plenty of pages to explore are what make up this website. With all these images and animations, a dimmed background is the perfect choice to frame the abundance of visual content.

G. Jezarian

Screen capture from G. Jezarian

A huge slider of crisp photography with muted colors greets you on the homepage. Click a button to learn more and you’ll be transported to a page that’s easier to read, but with plenty of gray highlights that beautifully contrast against the white.

Rocket55

Screen capture from Rocket55

Here’s a good example of how you can use white as contrast and draw the eye to important areas on a page. A splash of blue every now and then adds variety and lets you know that some elements are interactive.

Department Creatif

Screen capture from Department Creatif

Nothing makes a statement like well-placed photography. The muted images on this site contrast nicely with the white background and text, and the occasional parallax animation looks great in this box-based layout.

Black Dog Films

Screen capture from Black Dog Films

You can use a minimalistic set of colors to attract the eyes to certain content. When you visit a page, the video is framed against darkness with plenty of space. Bright text leads you down to more videos with black and white previews, which light up in color when you hover them. The effect is simple, but looks amazing.

Elephant

Screen capture from Elephant

Text on a dark website is difficult to get right, but Elephant is a good place to take inspiration from. The site uses larger text with plenty of contrast, avoiding long-form content on this black background. The smooth animations are a nice touch and a great way to fill leftover space.

Tender to Art

Screen capture from Tender to Art

The importance of a good palette can’t be stressed enough, and black, white, and a bright color tend to be popular choices on these sites. Tender to Art chooses red, and uses it well by highlighting important links and areas with it.

Davide Marchet

Screen capture from Davide Marchet

Dark design is a good choice for portfolios – it tells potential employers that you’re different, willing to take risks, and it just looks professional. This is a beautiful one-page portfolio, using just the right mix of text and images to keep you interested as you navigate.

Turn the Lights Out

White websites tend to be preferred by both creators and consumers – they’re simple, conventional, easy to read, and like a blank canvas for designers. But there is a place for dark design online.

It can be used to provide emphasis and contrast, to show off something you want to brand as new and interesting, or to display content like photography and art. And as these examples have shown you, it just looks good!

We hope you found the inspiration you needed from these beautiful websites. Next time you’re planning a website, take a risk and try dark design.

]]>
https://1stwebdesigner.com/dark-gothic-web-design/feed/ 0
Free Condensed Fonts for Designers https://1stwebdesigner.com/free-condensed-fonts-for-designers/ Mon, 13 May 2019 15:55:44 +0000 https://1stwebdesigner.com/?p=147504 Running low on space, or looking to give your designs a mature and professional look? These fonts are exactly what you need for your project.

Condensed, or narrow, fonts are made to take up less horizontal space. This makes them perfect when you’re creating something like a small pamphlet or a long headline, and also gives them a unique, modern appearance that looks great in professional works.

This compressed design does come at the cost of easy readability, so it’s best to use condensed fonts as headlines, in large text, and sparingly throughout an image or site. Mix and match condensed and more readable fonts to create a compelling design.

We’ve curated a handful of the best and boldest condensed fonts, so try a few in your project!

Morganite by Rajesh Rajput

Photo of Morganite by Rajesh Rajput

Disclaimer by Fontfabric

Photo of Disclaimer by Fontfabric

Sansterdam by NREY

Photo of Sansterdam by NREY

Fontuna Stencil by NREY

Photo of Fontuna Stencil by NREY

Stoneburg by Ilham Herry

Photo of Stoneburg by Ilham Herry

Calcio by Pixel Surplus and Graphicfresh

Photo of Calcio by Pixel Surplus and Graphicfresh

Nordin by Craft Supply Co. and Pixelify.net

Photo of Nordin by Craft Supply Co. and Pixelify.net

Calibre by Jeremy Vessey

Photo of Calibre by Jeremy Vessey

Long Johnson by Graphic Design Freebies and João Scarpim

Photo of Long Johnson by Graphic Design Freebies and João Scarpim

Compressed and Condensed

Finding the right fonts is one of the biggest time-sinks in a designer’s job, but it helps a lot to know what you’re looking for. If you think a narrow font is the way to go, then these should offer everything you need.

Condensed fonts are unique and noticeable, so use them to grab attention to the text you really want people to read. Headlines and large, all caps text are where these fonts shine. You’ll find them used in modern designs and advertising campaigns, where bold sans-serif fonts work best.

Try one of these fonts in your contemporary creations and stylish, fashionable websites, and you’ll see just how well it can work. And, of course, use them when you’re working with long headlines and little space to avoid wrapping and fit in that much more content!

]]>
Modern CSS Frameworks to Speed up the Design Process https://1stwebdesigner.com/modern-css-frameworks-to-speed-up-the-design-process/ Thu, 09 May 2019 14:19:45 +0000 https://1stwebdesigner.com/?p=147475 Designing a website from scratch can be a very time-consuming experience. And while web designers always welcome shortcuts, maintaining quality is still a top priority.

That’s the beauty of a good CSS framework. It can provide you with a comprehensive set of responsive layouts and UI elements. This helps to get your projects off to a quick start, while still allowing plenty of room for customization.

Today, we’ll introduce you to a selection of the top modern CSS frameworks available. Some you may have heard of, while others may be completely new to you. But each offers a variety of useful, cutting-edge features that can improve your workflow. Let’s get started!

Frameworks Focused on CSS

Let’s start with some frameworks that are mainly focused on CSS. You’ll find all types of layouts and UI elements to form the basis of your project. Some may even include a bit of JavaScript to help with more complex features.

Tailwind CSS

Tailwind CSS

What separates Tailwind from many other frameworks is that it doesn’t come with any prebuilt UI components. Instead, it’s focused more on utility, with CSS classes that give you a head start on building out a site. Elements such as sizing, color and positioning are key here.

Bulma

Bulma

Built around CSS Flexbox, Bulma is a free and open source framework. Inside you’ll find a number of easy-to-customize UI elements. It’s modular, meaning you can import just the elements you want – like columns or buttons.

Picnic CSS

Picnic CSS

Picnic CSS has been developed to be super lightweight and comes in under 10KB when compressed. It features Flexbox-based grid layouts, along with plenty of UI elements to get your project off to a quick start. You’ll even find a simple navigation bar and modal windows.

Materialize

Materialize

Fans of Google’s Material Design will want to check out Materialize. This framework is based on the popular design language and includes a ton of CSS and JavaScript-based elements. There is also a focus on microinteractions to make the UI more user-friendly. It’s also worth noting that Materialize features support for custom themes as well.

Pure.css

Pure.css

Coming in at just 3.8KB when compressed, Pure.css is centered around a mobile-first philosophy. And it’s modular, so you can import just the element packages you want to use. There are also a number of common layouts that you can download and install.

Base

Base

Base is a modular framework that, as its name indicates, aims to provide a solid foundation for your design projects. It’s been built on top of Normalize.css and provides basic styles that are easy to customize. You won’t find anything too fancy here, but that’s the point!

mini.css

mini.css

With mini.css, you get a package that looks to strike a balance between being lightweight and packed with features. And it really hits the mark, coming in at around 10KB compressed while boasting a fairly large number of UI elements and layouts. There’s also a good bit of documentation, so you can really dive in and see how everything works.

Concise CSS

Concise CSS

Urging designers to “give up the bloat”, Concise CSS offers a utility-based framework to get you off to a fast start. Need UI elements? You can add those in via a separate kit.

Mobi.css

Mobi.css

Mobi.css is tiny (2.6KB gzipped) and is focused mainly on speed for mobile users. However, there’s room for growth with a built-in theme and plugin system. If the basic styles don’t provide everything you’re looking for, it’s possible to build on top of the framework in a modular way.

Spectre.css

Spectre.css

Billed as being “Lightweight, Responsive, Modern”, Spectre.css is a Flexbox-based framework. Included you’ll find some basic layout, UI and typography styles. Plus, there are a number of functional components (accordions, popovers, tabs, etc.) that have been built with pure CSS. Overall there’s a nice balance achieved here.

Frameworks That Go Beyond CSS

There are scenarios that call for a more robust framework – and the selections below will do the job. They not only offer plenty of CSS-based elements, but you’ll also find healthy doses of features like HTML and JavaScript. In some ways, it’s almost like starting out with a semi-complete template that you can customize to fit your needs.

Bootstrap

Bootstrap

Created by Twitter, Bootstrap is pretty much everywhere these days. But that’s because it’s well-maintained and offers a massive library of prebuilt features. And while you can roll with the default setup, Bootstrap is also quite extensible. Adding themes or custom components to the mix will help personalize the UI even further.

Foundation

Foundation

Foundation is library of modular components that add plenty of fit and finish to your projects. There are a wide array of options here – everything from responsive layouts to animation. And that’s not even scratching the surface of what’s available. Foundation also has its own JavaScript plugin API. Last but not least, the framework comes with ARIA attributes and roles for building sites with accessibility in mind.

Semantic UI

Semantic UI

Sometimes, frameworks can include CSS class names that make sense only to their original developer. Semantic UI looks to change that narrative by using natural language. The logic is easy to follow and should make for quicker development. Beyond language, you’ll find over 3,000 theming variables – all of which you can edit or remove, depending on need. In all, there are tons of layout and UI possibilities here.

Build It Better with a Framework

Getting your project off the ground takes a lot of work – that’s why frameworks exist. They handle some of that heavy lifting for us and provide the basis for everything that comes after.

The ability to integrate a common set of layouts and UI elements allows us to better focus on content. While more robust frameworks contain all manner of extras like JavaScript and page templates to help us go even further.

Whatever type of head start you’re looking for, it’s likely that one of the selections above will be the perfect fit.

]]>
9 Tools to Help You Build Beautiful Websites Quickly and Easily https://1stwebdesigner.com/9-tools-to-help-you-build-beautiful-websites-quickly-and-easily/ Wed, 08 May 2019 12:26:52 +0000 https://1stwebdesigner.com/?p=147408 The help of social media channels can play an important role in getting your message out. That’s well and good, but rarely good enough.

There is only one way you’re going to be able to truly represent yourself. It is with the help of a website. A website that sets you and/or your company apart from the crowd.

Unlike a page on a social media network, you have total control over the content on a website. You can do a lot more in terms of providing valuable information. You can offer products for sale, and integrate third-party services.

Are you a genius at coding and you have all the time in the world to devote to it? Or, do you plan to pay a developer? If not, you need a top-tier website or page builder to make your awesome presence known.

Like one of these:

1. Elementor

Elementor

Elementor is the most advanced WordPress page builder designed for businesses looking to improve their workflow and speed up their production time. Its quick and powerful drag & drop editor lets you create professional WordPress sites and landing pages without having to code. Elementor works perfectly with any theme and plugin and will not slow down your site like many page builders. It comes packed with different super useful widgets which you use to quickly build the layout of your site: images, text, sliders, icons, testimonials, social media and more.

You can either build your website from scratch using these widgets, or use one of the hundreds of pre-designed Elementor templates which can be easily inserted to any page.

More cool features:

  • Pop-ups
  • Advanced forms
  • Integrations: Mailchimp, Zapier, HubSpot, ActiveCampaign and more
  • Clean code
  • Hover & scroll animations

2. Visual Composer Website Builder

Visual Composer Website Builder

The Visual Composer Website Builder makes building pages and websites about as easy as it gets. This popular, user-friendly, frontend drag and drop website builder makes it possible for you to design the layouts you’ve always wanted to; layouts that are guaranteed to sell more.

You’ll have access to a huge number of templates, content elements, and blocks for landing pages, portfolios, products, and more. Unlike most website builders, these website design features don’t come with the package. They exist in the Visual Composer Hub, a cloud-based marketplace of free goodies you can pick and choose from as you build your website.

Choose a page layout, put the new header builder to work, and customize headers, footers, and page content to your heart’s desire; without coding.

3. Webflow

Webflow

Webflow is more than a website builder; it’s a platform on which you can design, build, and launch a totally responsive and customized website, all without coding. Webflow even creates a custom client-friendly CMS for each site you build.

Webflow is ideal for small business websites and other small to medium-sized projects including content-driven projects that your clients can edit for themselves. You get to choose who can edit what, while at the same time limiting the type of editing that can be done by a client, so you won’t end up with a broken page.

Webflow also provides managed hosting. Plus you can use it for your prototyping needs; especially if you have a need to produce dynamic, interactive prototypes and prototypes for mobile apps.

You can start a project from a blank canvas, a free or premium template, or a UI kit.

4. Mobirise

Mobirise

If an offline website builder is your preference, Mobirise is your solution. This offline app is feature rich, and it’s free. It’s great for small to medium websites, portfolio sites, landing pages, and everything and anything in between.

Mobirise is also ideal for non-techies or anyone who prefers to avoid code and work as visually as possible. Pro-coders can use Mobirise as well for small customer projects and prototyping.

5. SP Page Builder

SP Page Builder

SP Page Builder is a Joomla drag and drop page builder; and #1 in its class. It comes with pre-made blocks, 50+ addons, a nice selection of ready-to-use layouts and third-party integrations. It also offers the fastest and most convenient web development experience you’ll likely find anywhere.

Every design element you’re likely to need is ready to drag and drop into your site. A little tweaking here and there, and you’re ready to rock!

6. Pixpa – Portfolio Websites

Pixpa - Portfolio Websites

Online store, gallery, blog, portfolio – you name it and Pixpa will deliver for you. This all-in-one website-building platform is an especially good choice for creatives. Start your project with any of Pixpa’s attractive and mobile-friendly templates.

You can customize it to your heart’s content, no coding is necessary, and Pixpa even provides functionality that allows you to make online sales, take orders, and collect payments.

7. 8b Website Builder

8b Website Builder

8b is a simple, futuristic online website builder anyone can use to create responsive, mobile-friendly websites quickly and easily – and it’s free!  It’s perfectly suited for small businesses, entrepreneurs, and anyone lacking coding expertise.

You can create a website using 8b whether you’re at work, at home, or on the go; plus, you have 16 cool starter templates and a host of website sections to get off to a fast start.

8. uKit

uKit

This website builder for small businesses is grid-based, mobile-friendly, and user friendly as well. uKit’s features and functionality give you the power to get your online presence up and running in a matter of minutes.

uKit was created with a non-techie approach in mind. Pick an element and drag and drop it to where you want it. It’s as simple as that; just the way a top-rated website builder should be.

9. uLanding

uLanding

uLanding is a fresh, code-free website-building solution that empowers anyone using it to build a professional digital presence for their business to boost sales. It can be anything from a landing page to a targeted promotion campaign.

Analyze the effectiveness of your ad campaigns using built-in analytics and launch A/B tests. Try uLanding out now by taking advantage of the free trial!

Get Your Project off the Ground

There is a beauty in this selection of top website/page builders. It is that you should have little problem finding the one that’s best for you.

Or, you could pick one at random; and the chances are good that it would still do the job you want done and do it well.

Take a little time to determine which of these products would be the best match for you. From there, you can build a stunning website in short order.

]]>
What Is WordPress Multisite? https://1stwebdesigner.com/what-is-wordpress-multisite/ Fri, 03 May 2019 18:20:41 +0000 https://1stwebdesigner.com/?p=147312 WordPress is known for being easy to use and for its ability to leverage plugins for greater functionality. But there is so much more to the popular content management system (CMS) than meets the eye.

There are tons of powerful features that lie just beneath the surface. Today, we’ll introduce you to one of the most unique among them: WordPress multisite. We’ll show you what it is, the benefits of using it and some scenarios where it may be a good fit for you.

What It Does

WordPress multisite is a feature that allows you to run multiple websites (referred to as a “network”) within a single installation of the CMS. By default, many key components are shared. Themes, plugins and even the install’s database are used by each site in the network.

However, note that multisite has to be manually enabled. To do so, check out the WordPress documentation for all the details.

There’s no hard limit on the number of sites you can run with multisite. But, like any other website, the capabilities of your hosting environment play a big role. The more sites and visitors you have, the more power you’ll need.

On the front end, users won’t be able to tell the site that they’re visiting is part of a network (that is, unless you utilize plugins that display network-related information, such as an aggregate of posts from each site). The back end will look very familiar, but with a few multisite-specific menus.

Among the biggest differences from a default single-site install of WordPress are:

A New Role to Rule Them All

The Super Admin role is added to WordPress multisite installs and does pretty much what you’re thinking. It’s the highest-level account and can administer each site in the network, along with the network itself.

For instance, a Super Admin can pick and choose which plugins and themes are available for each site in the network. They can assign site-specific administrators, install plugins and can add or remove individual sites.

An Address Structure

When setting up a network, you can choose how users will access your sites. Your options are:

Subdomain
Each new site will be a subdomain of your main website. So, if your main site is www.mygreatwpsite.com, network sites could be steve.mygreatwpsite.com or catphotos.mygreatwpsite.com. Note that each subdomain will need to be added to your domain’s DNS.

Subdirectory
Subdirectory installs are easier to maintain, as DNS doesn’t play a factor. New sites are simply added as a folder appended to your domain. Therefore, our examples above would be www.mygreatwpsite.com/steve/ or www.mygreatwpsite.com/catphotos/.

Note that, whichever type of network you choose, you can still add custom top-level domains to each site. If you do plan on using a different domain for each site, it’s easier to stick with the Subdirectory type of install.

A network diagram.

The Benefits

There are a lot of legitimate benefits to using WordPress multisite, as opposed to multiple single-site installs:

A Unified UI

Depending upon your role within the install, you can easily get from site to site (or, at least the ones you have permissions to access) without the need to log out or hop all over the web. Everything you need is just a few clicks away.

Automation, If You Want It

Want visitors to be able to create their own sites? Multisite allows people to register and create a website. However, you may want to beef up security and integrate methods for approving new sites that are added to the network.

Limit Access

Each site within a network can have its own set of users. This is great for scenarios where you only want people to make changes to specific sites.

Likewise, only Super Admins can add plugins or themes to the system, helping to avoid plugin overload. Plus, they can “Network Activate” plugins, meaning that each site must use them. Otherwise, individual site Administrators can choose to activate other installed plugins.

The Potential to Do More

Through custom code and multisite-compatible plugins, you can add powerful functionality to your network. You might, for instance, want to share media files or even blog posts among all or specific sites within the network. Plus, you can add user-friendly features like a network-wide navigation or search capabilities.

Each site may start off as its own separate entity, but you can tie them together in any number of ways.

WordPress Network Settings page.

When to Use It

WordPress multisite includes some incredible features. But, in order to decide if it’s the right solution for your project, ask yourself the following questions:

How Are My Sites Related?

Ideally, there should be some unifying factor between all of the sites within your network. Maybe they are different locations of the same company or members of the same organization. The fact that the sites are related in some way is perhaps the biggest reason for utilizing multisite.

Can My Web Server Handle the Load?

A busy multisite network can become a resource hog. Just the fact that the database is shared among sites could cause a slowdown during a traffic spike. You’ll want to make sure that your web hosting is capable of humming along during those times. Frequent site backups are also a nice thing to have, whether provided by your host or via a plugin.

Does It Make Sense for Team Members?

This goes along with whether or not your network sites are related. WordPress multisite makes for easier maintenance, particularly if you have team members who need access multiple websites. Hopefully, having everything within a single installation will streamline the process for everyone.

Is It Worth the Risks?

Multisite is not without its own potential pitfalls. For example, a database crash or a botched plugin update could take your entire network of sites down. Even a surge in traffic or a brute force attack on a single site could affect everything else. It’s crucial to weigh those risks against the potential benefits.

What Will the Future Bring?

While no one can fully predict the future, it is important to think about what could happen. Will you need to add more sites? Will any network sites eventually need to be spun off on their own? Could your network outgrow its current hosting environment? It’s better to think about those things now and determine how they may affect your decision.

A Hidden Gem

Multisite may not be among the most glamorous or talked about WordPress features, but it is certainly among the most powerful. Imagine the ability to run any number of websites, all from a single installation. It can be beneficial to anyone from a small business to a worldwide organization.

As great as it is, you’ll still want to do your homework before building a network. Once you learn more about the intricacies of WordPress Multisite, you can decide if it’s the right solution for you.

]]>
Getting Clients to Work Your Way https://1stwebdesigner.com/getting-clients-to-work-your-way/ Wed, 01 May 2019 19:24:57 +0000 https://1stwebdesigner.com/?p=147259 They say that “the customer is always right”. And while that may be true (most of the time), it certainly doesn’t mean that we have to bend over backwards for them in every instance. I should know, as I spent years attempting to contort myself to fit whatever clients wanted.

One area that is particularly tough to manage is when it comes to our process for getting things done. If you deal with multiple clients, each one of them has their own distinct way of working. Some are night owls and feel the need to send email when the moon is out. Others expect a lot of in-person meetings – something difficult for a busy web designer to fit into their schedule.

Trying to accommodate each and every client’s way of working often leads to chaos. It makes getting things done more difficult and will leave you scrambling to find some level of consistency in your workflow.

Sound terrible? Sound familiar? If you’re banging your head against the wall, know that change is possible! Let’s take a look at some ideas for getting clients to work in a way that benefits you.

Create Processes That Work for You

During the early part of my career as a freelancer, I really had no process for getting things done. That is, unless you count waking up and walking over to the home office. There wasn’t any real organization to speak of and I haphazardly went back-and-forth between tasks. Sort of like a single-player game of table tennis.

Not only that, I was often running out to meetings and taking a seemingly endless number of phone calls. This led to a lot of stress, and a pile of work that I couldn’t seem to get through. Eventually, I realized that a change was needed.

So, I started putting some processes in place. Each one acts as a bit of a boundary for both my clients and myself. They’re not perfect, but have produced some positive results. Among them:

Limit Meetings

I now avoid going out to meetings when possible, and they are usually reserved for higher-revenue clients. As most of my clients are based at least a half hour from my office, I found that, when accounting for travel, even a short meeting tended to take up several hours of work time. Replacing meetings with phone calls or video chats (which I limit to specific hours) has saved a ton of time, while keeping the lines of communication open.

Reserve Time for Each Task

Understandably, clients tend to want things done “as soon as possible”. At the same time, it’s not always possible to drop everything you’re doing (something I tried and struggled with). So, for non-emergencies, I now carve out time to take care of each task on my to-do list. I let clients know an approximate time for completion, which provides both of us with some certainty. And this little bit of organization also serves as a pretty good stress reducer for the designer.

Remain Flexible, Within Reason

Maybe it sounds counterintuitive, but I still try to maintain some flexibility when working with clients. Why? Because, in a healthy relationship, nobody gets their own way all of the time. And I’ve found that people are generally more willing to work within my guidelines if they know that I’m willing to accommodate some of their requirements, as well. The key is not in abandoning your process, but in making reasonable compromise where possible.

A woman drawing business concepts in a sketchbook.

Making It Stick

While it’s one thing to dream up a list of processes that sound good, adhering to them is a whole other ball of wax. Frankly, this is the most difficult part of the journey – especially if you’re not accustomed to placing limits on others.

I certainly fall into that category. I hate conflict and I’m not one who likes to tell others what to do. But I found that implementing these changes wasn’t about controlling others, so much as it was about self-control. That’s where it all begins.

And one of the best ways to take charge of a situation is to put it in writing. This means letting new clients know how you work. Perhaps these policies are included in your contract or a welcome letter. This sets the standard from the very start and positions you for a productive path forward.

For existing clients, particularly those who are used to doing things the old way, it’s only natural to feel a bit of trepidation. After all, the goal here is not to upset clients or drive them away. This is where clear communication can be a big help.

One way to do it is to write a letter to your clients. Explain your new policies and what it means for them. Most importantly, let them know why you’re making changes. When they recognize the reasoning behind your policies, they’re more likely to accept and adhere to them. Most people are very understanding, you just need to give them a chance.

It’s also worth noting that the transition to a new way of working isn’t always smooth. Old habits will die hard for both you and your clients. But with consistent effort, things can indeed change for the better.

Path through a forest.

The Benefits Are Real

The hardest part about running a web design business is in actually learning how business works. Quite often, we start out as designers first. Therefore, we may not have the necessary tools to run things right from the start.

That can lead to a workflow that is chaotic and disjointed. And the more clients you book, the crazier it all becomes.

However, when you start to implement the right processes, you can bring some sanity to how your business runs. You’ll get things done more efficiently, avoid constant interruption and can better prepare yourself for your projects. All the while, you can still communicate effectively with clients – just in a more structured way.

The result is a more streamlined business that is better-positioned for future growth.

]]>
Learn How to Program With These Free Online Courses https://1stwebdesigner.com/free-programming-courses-from-harvard-mit-microsoft-and-more/ Tue, 30 Apr 2019 12:46:36 +0000 https://1stwebdesigner.com/?p=147114 Did you know that you can learn computer science and programming online from institutions like Harvard, MIT, Berkeley and Microsoft on edX.org? The nonprofit site offers 2,000 online courses from 140 institutions worldwide. Courses are free to try.

edX Online Courses

Popular Courses

Here are some of the most popular courses and programs offered on edX:

CS50 from Harvard

The most popular course on edX gives you an introduction to computer science and programming. Learn how to think algorithmically and solve programming problems efficiently. Gain familiarity in a number of programming languages including C, Python, SQL, JavaScript, CSS and HTML.

Front End Web Developer from W3C

W3C (World Wide Web Consortium) is the organization that develops web standards. It was founded by the inventor of the web, Tim Berners-Lee. In this 5 course program, learn how to code with modern HTML5 tags, draw and animate fun web graphics, and play audio and video elements. Learn CSS best practices for web page design and the fundamentals of JavaScript to help you develop interactive web apps.

Introduction to Computing in Python from Georgia Tech

In this 4 course program, learn the fundamentals of computer science in one of the field’s most popular programming languages, Python 3, including writing code, executing it, interpreting the results, and revising the code based on the outcomes. Rated as one of the most in-demand and beginner-friendly programming languages, a background in Python will give you a solid foundation to build your career. Short videos (2-3 minutes each) are rapidly interwoven with live programming problems and multiple-choice questions to give you constant feedback on your progress and understanding.

C Programming with Linux from Dartmouth

Did you know that smartphones, your car’s navigation system, robots, drones, trains, and almost all electronic devices have some C-code running under the hood? Along with the C programming language comes Linux, an essential operating system that powers almost all supercomputers and most of the servers worldwide, as well as all Android devices and most “Internet of Things” devices.

In this 7-course program, develop and debug code in the C programming language. Discover the foundations of computer programming and Linux, manipulate the command line, manage processes, files and memory, and compile C code with Linux.

Data Science from Harvard

Data science is one of the hottest fields in programming. Learn key data science essentials in this 9-course program, including R and machine learning, through real-world case studies to jumpstart your career as a data scientist. Also learn statistical concepts such as probability, inference, and modeling and how to apply them in practice. Gain experience with data visualization with ggplot2 and data wrangling with dplyr. Become familiar with essential tools for practicing data scientists such as Unix/Linux, git and GitHub, and RStudio. This is one of the most popular programs on edX.

Blockchain for Business from the Linux Foundation

Everyone has heard of blockchain, but most don’t understand how it can apply to their business. Learn exactly what a blockchain is, its impact and potential for change around the world, and analyze use cases in technology, business, and enterprise products and institutions in this fundamental course from the experts at the Linux Foundation.

Microsoft Courses

Some of the popular Microsoft courses include:

Introduction to Typescript

Want to write organized code for your website that you can easily manage and maintain? TypeScript is the answer to building scalable web applications. TypeScript lets you write JavaScript the way you want to. TypeScript is a typed superset of JavaScript that compiles to plain JavaScript. It works on any browser. Any host. Any OS.

Introduction to Bootstrap

Bootstrap is an open source project originally created by Twitter to enable creation of responsive, mobile first web pages. Bootstrap has a standard set of classes that allow developers to quickly create applications that scale to devices of all sizes, and incorporate common components such as dialog boxes and validation. Bootstrap has become a de facto standard for web design.

Introduction to jQuery

jQuery is the most popular library for JavaScript. In this course, you will learn how to use jQuery to add additional power and interactivity to your web pages. You’ll see how to take advantage of jQuery in your web pages, how to work with the HTML document, and even make server-side calls.

Introduction to Angular

In this course, you will learn about the basics of how Angular works, and why Angular has emerged as a popular framework for JavaScript/TypeScript application development. You will also learn how to properly set up your development environment for creating an Angular app, including installing VS Code, Node.JS, TypeScript, and the Angular CLI.

Introduction to ReactJS

ReactJS is the latest JavaScript framework to capture the hearts and attention of the frontend developer community. Developers love ReactJS because it’s highly performant and renders changes almost instantly. The best part about ReactJS is that it is a relatively small framework and does not take too much time to learn!

Start Learning Today

If you are looking for something else, edX offers beginner to advanced programming courses in C++, C#, Java, Power BI, Artificial Intelligence, Machine Learning, Deep Learning, Cybersecurity, IoT, Cloud Computing, AWS, Azure, DevOps, and more. View more courses here.

]]>
Free One-Page Portfolio Website Builders https://1stwebdesigner.com/free-one-page-portfolio-website-builders/ https://1stwebdesigner.com/free-one-page-portfolio-website-builders/#respond Mon, 29 Apr 2019 13:06:51 +0000 https://1stwebdesigner.com/?p=144092 In the growing world of designers, developers and other online service providers, having a great portfolio is essential to getting hired. You won’t get work if you don’t put yourself out there, and what better way than with a portfolio? These one-page website builders are free, easy to use, and simple to set up, so you can get your portfolio online fast.

Carrd

Carrd

Carrd is a one-page site maker that uses a super straightforward interface to help you set up your portfolio. If you’re looking to create something elegant and minimalistic, you’ll love this. Many builders can be overwhelming before you get used to them, but Carrd is easy to use right from the get-go. Just pick a theme and click one button to add elements.

There’s a really cheap Pro version, which offers various forms, custom domain compatibility, and custom code + third party widgets. At $9 a year, this is about as affordable as it gets. However, all the core features are free, so feel free to test it out and even publish your website.

Mobirise

Mobirise

An offline web builder solution for Mac and Windows, Mobirise allows you to easily create mobile-friendly websites. It was specifically designed to be as easy to use as possible for non-programmers and visual thinkers. If you’re new to this, try it out.

Once you’ve finished putting together your website in this block-based builder, publish it for free wherever you want. No domain? Mobirise can publish to Github Pages at no cost to you.

About.me

About.me

Simple and professional, creating an about.me website is a great way to introduce yourself. Just type in some info about yourself, pick from one of three clean themes, and you have a mini portfolio! From there you can customize the website further, changing text and adding links. There’s also a nifty email signature feature, which adds your about.me as an email signature.

The Pro version has various other features, testimonials, image and video embeds, messages, appointment scheduling and newsletter building. With the free version, you can still build a professional biography.

WordPress

WordPress

If you’d rather do it yourself than use a simple website builder, but don’t have the technical know-how to create a website from scratch, WordPress is probably the solution. Choosing a one-page WordPress template still gives you something to work off of, but you’ll be more in control of your website’s appearance. And there’s hundreds of thousands of themes – no website builder can boast that.

Customizing and making it your own may require HTML and CSS knowledge, and you’ll also need to handle hosting, domain and WordPress installation. WordPress itself is free and open source, but these aspects will probably cost money.

Diving blindly into WordPress is not for the faint of heart, but if you’re up for a challenge, this might be the solution for you.

Wix

Wix

Wix is considered by many to be similar to WordPress, but much easier to use. Its interface is intuitive enough, and setting up and publishing a website is super easy. There’s a ton of functionality in this builder if you’re willing to learn it.

The free version of Wix allows you to create and publish your site under a Wix domain. Premium plans let you get a custom domain, remove Wix ads from the site, or add apps, but it isn’t necessary to make your portfolio public.

Persona

Persona

Persona does absolutely no beating around the bush. Just click to get started, pick a theme, and start editing. The WYSIWYG editor is super powerful. It takes some adjusting to, but once you have the hang of it, you can create basically whatever you want.

However, note that you can only create a private Persona without upgrading. If you want to publish your portfolio, it will cost a relatively cheap $24/year or $4/month. Trying before you buy will at least let you know if this is the right tool for you.

Building a Simple One-Page Portfolio

Never underestimate the power of a one-page portfolio. A site that’s too complex can drive away potential clients, especially if you can’t hold their interest long enough to direct them to the contact page. But a well-crafted one-page website is concise and gets the point across quickly, while still showing off your skills to visitors.

]]>
https://1stwebdesigner.com/free-one-page-portfolio-website-builders/feed/ 0
Tools and Guides for Web Design Accessibility https://1stwebdesigner.com/tools-and-guides-for-web-design-accessibility/ Wed, 24 Apr 2019 12:57:32 +0000 https://1stwebdesigner.com/?p=146880 Fifteen years ago, web accessibility wasn’t a thought in many designers’ minds. Online standards did exist as far back as 1996. But they were followed much less often than they are now, leaving many struggling just to use the internet.

Over the past ten years, the web has made huge strides in making sites accessible. But it’s up to you, the designers and developers, to optimize your own websites. Not sure where to begin? These tools and guides for web accessibility will help you design a better web.

Introduction to Web Accessibility

What is web accessibility, why should you implement it, and – most importantly – how can you do so? This invaluable resource introduces you to the basics of accessibility and can help you get started in optimizing your site.

W3C Introduction to Web Accessibility

The A11Y Project

Accessibility isn’t an easy topic to broach. With dozens of standards and hours of reading material, some people just don’t bother. The Accessibility Project aims to make the topic much more approachable, with easy-to-read articles, bite-sized tips, and plenty of helpful guides.

Contrast

High contrast colors are very important for those with visual impairments. There are tools to check your site’s color contrast, but that disrupts your design flow. This macOS app scores colors instantly. No more guessing or spending minutes inputting hex codes.

Contrast accessibility tool.

Stark

What if there was a tool that let you design with accessibility in mind from the beginning? Stark is an Adobe XD and Sketch plugin that does just that. Check contrast, run colorblind simulations, and get quick color suggestions. Now you can create a site that’s beautiful and accessible even during the mockup phase.

tota11y

Tota11y is an extremely useful tool that activates from your browser bookmarks and notifies you of accessibility violations on a page. It’s open source and comes with many plugins that all detect a range of issues. Activate it on your site and see if you pass!

Accessible Color Matrix

Picking a palette? This tool shows you how your palette will work in action, and notes when it doesn’t meet the contrast requirements. Now no one will struggle to read text on your site.

Accessible Color Matrix tool.

WAVE Web Accessibility Tool

WAVE is a webpage checker that runs a page through a variety of standards, reporting back errors, alerts, and correctly implemented features in an interactive panel. While it’s no replacement for human testing, it can help set you on the right design path.

Web Accessibility Checker

This accessibility checker reports issues on a page in a simple list segmented by known, likely, and possible problems. This one also comes with extra features, like the ability to upload or paste an HTML file. You can also check against different standards!

HTML5 Accessibility

Wondering what accessibility features are supported by major browsers? This nifty resource details info about individual elements and how they test for support by browsers.

HTML5 Accessibility Tool

18F Accessibility Guide

This is a fantastic collection of resources, guides, and articles about web accessibility. If you need even more reading material, start here! It’s also a great source of testing tools for businesses.

AccessLint

GitHub user? This accessibility checker automatically detects and points out violations, simple as that. It also re-reviews code changes to let you know if you’ve really fixed the issue. For open source projects it’s totally free, but you’ll need a monthly subscription if you run a private project.

Lighthouse

Lighthouse is an advanced tool available right from Google Chrome’s developer tools. Along with performance issues it also checks for accessibility errors. You can run it from Chrome, the command line, or as a Node module.

Lighthouse tool for Chrome.

Making the Web More Accessible

Nearly 1 in 5 people in the US have a disability. 3.2 million Americans are visually impaired, while 8.2 million have vision problems, and that number is only growing. You should do your best to follow accessibility standards, so that everyone can browse your site without having to contend with garbled screen reader output, difficulty reading, and headaches.

Something as simple as adding alt text to images and increasing contrast can make a huge difference to your disabled users, but there’s always more you can do. Don’t make accessibility an afterthought.

]]>