Best JavaScript Frameworks, Libraries and Tools to Use in 2019

Original Source: https://www.sitepoint.com/top-javascript-frameworks-libraries-tools-use/

It seems there are more JavaScript frameworks, libraries, and tools than there are developers. As of May 2017, a quick search on GitHub reveals more than 1.1 million JavaScript projects. There are 500 thousand usable packages on npmjs.org with almost 10 billion downloads every month.

This article endeavors to explain the basics and rudimentary differences between the most popular client-side JavaScript frameworks, libraries, and tools. Whether they are “best” for you is another question. Choose something and stick with it for a while. Just be aware your favorite option will be superseded by something “better” no matter what you select!

Please accept the following terms and conditions before reading this article…!

The JavaScript landscape changes on a daily basis. This article will be out of date the moment it’s published!
By “best” I mean “the most popular general-purpose projects”. All are free/open source but the list may not include your favorites.
Discontinued projects such as YUI are not included even though they may still have high use across the web.
Only client-side projects are referenced. Some can work server-side but the list does not include pure server-based frameworks such as Express.js or Hapi.
Information about each project is intentionally brief to provide an overview for further research.
Each project provides a usage popularity indicator but statistics are notoriously difficult to collate and can be misleading.
I’m biased. You’re biased. Everyone else is biased! I haven’t tried every tool here and will declare my favorites but you should make your own assessment based on your requirements.
Neither I nor SitePoint are liable for any disastrous decisions you make!

Tricky Terminology

The terms “framework”, “library” and “tool” can mean different things to different people at different times depending on the context. The general definitions used here:

Libraries

A library is an organized collection of useful functionality. A typical library could include functions to handle strings, dates, HTML DOM elements, events, cookies, animations, network requests, and more. Each function returns values to the calling application which can be implemented however you choose. Think of it like a selection of car components: you’re free to use any to help construct a working vehicle but you must build the engine yourself.

Libraries normally provide a higher level of abstraction which smooths over implementation details and inconsistencies. For example, Ajax normally relies on the XMLHttpRequest API but this requires several lines of code and there are subtle differences across browsers. A library may provide a simpler ajax() function so you’re free to concentrate on higher-level business logic.

A library could cut development time by 20% because you don’t have to worry about the finer details. The downsides:

a bug within a library can be difficult to locate and fix
there’s no guarantee the development team will release a patch quickly
a patch could change the API and incur significant changes to your code.

Frameworks

A framework is an application skeleton. It requires you to approach software design in a specific way and insert your own logic at certain points. Functionality such as events, storage, and data binding are normally provided for you. Using the car analogy, a framework provides a working chassis, body, and engine. You can add, remove or tinker with some components presuming the vehicle remains operational.

A framework normally provides a higher level of abstraction than a library and will help you rapidly build the first 80% of your project. The downsides:

the last 20% can be tough going if your application moves beyond the confines of the framework
framework updates can be difficult – if not impossible
core framework code and concepts rarely age well. Developers will always discover a better way to do the same thing.

Tools

A tool aids development but is not an integral part of your project. Tools include build systems, compilers, transpilers, code minifiers, image compressors, deployment mechanisms and more.

Tools should provide an easier development process. For example, many coders prefer Sass to CSS because it provides code separation, nesting, render-time variables, loops, and functions. Browsers do not understand Sass/SCSS syntax so the code must be compiled to CSS using an appropriate tool before testing and deployment.

Don’t Label Me!

The distinction between libraries, frameworks, and tools is rarely clear. A framework could include a library. A library may implement framework-like methods. Tools could be essential for either. I’ve attempted to label each project but the scope can vary.

If this sounds too complicated, you could consider coding vanilla JavaScript. That’s fine, but you will inevitably write your own library and/or framework code which must be maintained. JavaScript itself is an abstraction on a tower of browser and OS abstractions!

JavaScript Frameworks and Libraries

Projects in order of popularity…

jQuery

jQuery

type
library

website
jquery.com

repository
github.com/jquery/jquery

current version
3.2.1

developer
jQuery team

launch date
August 2006

typical size
30kb min

typical use
general purpose

usage
72.4% of all websites

jQuery remains the most-used JavaScript library ever created and is distributed with WordPress, ASP.NET and several other frameworks. It revolutionized client-side development by introducing CSS selector to DOM node retrieval plus chaining to apply event handlers, animations, and Ajax calls.

jQuery has fallen from favor in recent years but remains a viable option for projects which require a sprinkling of JavaScript functionality.

Pros:

small distribution size
shallow learning curve, considerable online help
concise syntax
easy to extend

Cons:

adds a speed overhead to native APIs
less essential now that browser compatibility has improved
usage has flat-lined
some industry backlash against unnecessary use.

React

React

type
library

website
facebook.github.io/react/

repository
github.com/facebook/react

current version
15.5.4

developer
Facebook and contributors

launch date
March 2013

typical size
21kb min

typical use
single-page applications

usage
low

Perhaps the most-talked about library of the past year, React claims to be a JavaScript library for building user interfaces. It focuses on the “View” part of Model-View-Controller (MVC) development and makes it easy to create UI components which retain state. It was one of the first libraries to implement a virtual DOM; the in-memory structure computes the differences and updates the page efficiently.

React usage appears low in statistics perhaps because it’s used in applications rather than websites. Almost 38% of developers claim to be using the library.

Pros:

small, efficient, fast and flexible
simple component model
good documentation and online resources
server-side rendering is possible
currently popular and experiencing rapid growth

Cons:

new concepts and syntaxes to learn
build tools are essential
can require other libraries or frameworks to provide the model and controller aspects
can be incompatible with code and other libraries which modify the DOM

Learn more about React with our Premium course, React the ES6 Way

The post Best JavaScript Frameworks, Libraries and Tools to Use in 2019 appeared first on SitePoint.

Xbox Game Pass: Dive Into 100+ Hit Games for One Low Monthly Price

Original Source: http://feedproxy.google.com/~r/Designrfix/~3/V7SMBbDIXhI/xbox-game-pass-subscription

What is Xbox Game Pass? Xbox Game Pass is a subscription service from Microsoft for use with its Xbox One games console. Described by many as the Netfilx of video games, it gives you access to more than 200 games on your Xbox One, including highly-anticipated Xbox exclusives for one low monthy fee. It is […]

The post Xbox Game Pass: Dive Into 100+ Hit Games for One Low Monthly Price appeared first on designrfix.com.

9 Free Open Source Flipping Clocks Using CSS and JavaScript

Original Source: http://feedproxy.google.com/~r/1stwebdesigner/~3/JTvdjcdi4hc/

The classic flip-style clock was a staple for years and it’s just one more thing the digital era made obsolete – although not quite forgotten.

We can find a bunch of cool clock designs in PSD form, but it’s more difficult to find working flip-style clocks in code. So I went on a mission to find some awesome examples online.

This gallery features 9 totally free flipping clock designs with a variety of styles and coding techniques.

Whether you want to build something like this for practice or add a working clock onto your page, these snippets are sure to help.

Flip Clock & Countdown

See the Pen Flip Clock & Countdown by Shaw (@shshaw) on CodePen.

So here’s a really interesting project that features a flipping countdown running in pure JS.

There is a bit of CSS for styling but the entire animation setup and the structure all runs on JavaScript. Even the HTML gets embedded through JavaScript.

But there’s also a lot to learn from this pen if you study the code carefully. You’ll find some great snippets to reuse and this makes a nice base for experimenting in JavaScript.

React Flip Clock

See the Pen React Flip Clock by Libor Gabrhel (@Libor_G) on CodePen.

Frontend developers love React for its power and massive community.

With it, you can build lighting-fast web applications and this clock design is just one example.

Developer Libor Gabrhel created this as a small project for testing React. It works so smoothly and the design is exquisite.

Note that while the JS is a bit complex, I also think this would make a great learning project for someone who’s just starting to learn React.

FlipDown.js Example

See the Pen FlipDown.js Example by Peter Butcher (@PButcher) on CodePen.

Developer Peter Butcher created this neat experiment using a simple custom plugin called FlipDown.js.

This runs on vanilla JavaScript – so it has no dependencies. It’s also a really easy plugin to edit, tinker with and expand with your own features.

I can’t say that this flipping animation is perfect because I did spot a few laggy jumps.

But for a really simple plugin I’m definitely impressed.

Pomodoro Timer

See the Pen Pomodoro Timer by Yoong Ti Lee (@yoongtilee) on CodePen.

There aren’t enough adjectives in the world to describe the awesomeness of this timer app.

It’s built around the Pomodoro Technique and it runs natively right in your web browser. You basically set the timer and click “start”. From there, a flipping clock animation counts down until your first break.

You can even alter the total break time and the total work session time.

Plus, the UI design is phenomenal and it’s cleverly designed to across the board.

Countdown Clock

See the Pen Countdown Clock by nir (@nirlodsn) on CodePen.

So maybe you don’t like basic JavaScript for your projects. Maybe you’re more of a jQuery person who prefers working with plugins. No problem.

Have a look at this jQuery script featuring a very basic countdown clock. I noticed the animation styles are incredibly smooth and easy on the eyes regardless of web browser.

Each flipping effect almost looks like a native 3D transform because the items that flip really feel like they’re moving. It takes some effort to get that just right.

If you want a clean, smooth clock effect for your homepage or landing page then definitely keep this snippet in mind.

Flipping Clock

See the Pen Flipping Clock by Harsha Bhat (@harshabhat86) on CodePen.

Okay, so this example doesn’t exactly fit the mold of a “flipping” clock.

But I do think that this pen looks awesome and it captures the spirit of a flipping clock animation.

Developer Harsha Bhat created this effect using Haml, Sass and some clean vanilla JavaScript.

It’s funny how all the free web frameworks in the world still can’t touch plain JavaScript.

I liken this effect to a minimalist design technique that can work with clean, simple websites. Try it out if you’re working on a project that would mesh nicely with this style.

Pure CSS

See the Pen 3D Flip Clock Counter in Pure CSS (Rebound) by Jerry Low (@jerrylow) on CodePen.

Moving away from JavaScript, you might be looking for a pure CSS3 alternative. In that case be sure to save this pen since it’s the best one I could find.

CSS3 has a long way to go in the animation department and I don’t think it’ll ever catch up to JavaScript.

But you can produce some really nice effects with pure CSS code if you know what you’re doing.

I really like this snippet as a starting point for a flipping clock. The animation doesn’t feel as 3D as you’d expect, but it does give the same illusion of natural motion – which is crucial for this kind of feature.

Lighter Design

See the Pen Flip Clock by Ed Hicks (@blucube) on CodePen.

Most of the flipping clock designs you’ll find online feature black squares with lighter text. But this design is different.

Developer Ed Hicks created this lighter flipping clock as an alternate design running on CSS and JS code. It’s actually a fairly complex project, but the JS is simplified since it runs on top of jQuery.

Anyone looking to add a lighter styled clock on their site will surely enjoy digging around in this code snippet.

Clock in Vue.js

See the Pen Flip clock & countdown, Vue by Shaw (@shshaw) on CodePen.

One thing I like about this Vue-powered clock is that all the digits are combined into single squares.

On most clocks you’ll find that the seconds and minutes all have their own blocks for each digit.

This clock looks a whole lot smoother in my opinion. Not to mention that it’s a great practice piece to study if you’re just starting to learn Vue.js.

You’ll notice that this list has a ton of variety in coding styles and many don’t even use frameworks. If you’d like to see more of what’s out there, you can find many other examples if you spend some time digging around CodePen.


How Much Should You Get Paid To Build Websites In 2019?

Original Source: https://www.smashingmagazine.com/2019/01/costs-building-websites-2019/

How Much Should You Get Paid To Build Websites In 2019?

How Much Should You Get Paid To Build Websites In 2019?

Suzanne Scacca

2019-01-03T13:50:00+01:00
2019-01-03T20:20:24+00:00

(This is a sponsored post.) When a business owner is in need of a new website, one of the first answers they’re going to go in search of is: “How much should I pay for a website?”

Most of the articles they’ll find tell business owners that there are a few contributing factors when it comes to pricing:

Type of website (e.g. personal blog, small business website, booming e-commerce shop)
Size of website
Complexity of website

And some say that pricing should differ based on who builds your website (i.e. web designer vs. design agency).

The problem with this answer is that it teaches business owners to think about a website in terms of hours and manpower put into it. As you already know, this leaves many website clients focused on:

“How much work are you gonna do for me?”

Instead of:

“What will be the outcome of this investment?”

As you go out into the world, trying to reverse this faulty logic and convince customers to pay a fair wage for your web design services, you should do some calculations of your own. I’m going to provide you with a number of ways to set your prices and get paid well to create a website in 2019.

Different Ways To Get Paid To Build Websites

There are a few different ways you can get paid to build websites:

Charge an hourly rate
Charge a flat rate
Charge a monthly rate.

There are pros and cons to each option. Let’s review what they are before we take a look at how to come up with a numerical value.

1. Charge An Hourly Rate

In this scenario, you set a value to each hour of work you put in. Then, when the project is done, you bill the client for total hours worked. Sources like Upwork put average hourly freelance rates between $15 and $75 an hour.

Here’s what you need to know about setting an hourly rate that works in both your favor and the client’s:

Client-Friendly (Pro)

As I explained above, many clients expect this form of payment. You put X amount of hours into designing their website and, in exchange, they’ll pay you for every hour worked.

Just remember to employ a time tracker, so you can later provide evidence of how much time was spent on the project (in case they ask for it).

The dashboard of the AND CO time trackerAn example of the in-app time tracker from AND CO.

AND CO has a great in-app time tracker that you can also add as a browser extension. What’s especially nice about this is that it integrates with your contract and invoicing software, so you can manage most of your financial relationship with clients in the same place.

Easy to Calculate (Pro)

For many new web designers, charging an hourly rate is an attractive prospect. Since you might not know how long a project will take — especially if it’s a kind you’ve never designed before — you still have an idea of what sort of hourly rate you want to charge.

If you don’t, I’d suggest using this web design calculator from BeeWits:

The dashboard of the AND CO time trackerBeeWits provides a simple design calculator tool to help you determine an hourly

Input the estimated hours for each part of the website you’re contracted to do. Then apply what you think your hourly rate should be.

Take a look at the total. If it looks like a worthy value, commit to it and provide that to your clients.

You can adjust your hourly rate as you take on more projects and get a better sense for how long it actually takes. This is what Nela Dunato did:

“I charged per-project rates and logged my working hours so I knew what my hourly rate was on each project. At the end of the project I’d compare my actual hourly rate with my desired hourly rate and if it ended up lower I knew that I’d need to charge more on the next project of similar scope.”

Secure Your Income (Pro)

Web designers have the unfortunate luck of running into clients that want to squeeze as much free work out of them as possible. However, when you agree to an hourly rate with a client, it’s very difficult for them to work their way around it.

Lisa Webster told SkillCrush:

“I’ve worked with too many entrepreneurs who keep adding changes that affect the entire design. This can result in hours of extra work that wouldn’t have been anticipated if you charged them per project.”

So, in a sense, an hourly rate does seem like a smart choice if you have clients trying to get the biggest bang for their buck — all at your expense. (I’ll talk a bit more about this below.)

Micro-Managing Clients (Con)

Although there are clear benefits to charging an hourly rate, there is a tradeoff which I hinted at earlier. In other words:

When clients associate a website with the hourly work put into it, they fail to see the value of it.

In turn, this puts a lot of pressure on you in the wrong way.

For instance, you’ll find that clients become super cognizant of the time you’re spending on something. When they see that beautiful mockup you’ve created for them, one of the first things they’ll ask is:

“How much time did you spend on this?”

This detracts from having more meaningful conversations that they’d otherwise initiate if they weren’t so focused on what you’re billing them.

Then, there are the inevitable interruptions that arise when you have to stop working to respond to clients who want to know what their total bill is to date. Worse, they might go the route of doubting how truthful you’re being:

“My nephew built a website for his team and he said it only took 8 hours. Why am I paying you for 50 hours if he can do it in a fifth of the time?”

You also might encounter clients who decide to cherry-pick what’s included in their website. Rather than allow you to develop a website from start to finish, you’ll end up committing to fractions of the website work which will lead to a disjointed experience on the frontend when the design conflicts with the copy and the SEO was dropped from the scope completely. (You get the idea.)

Earning Potential Cap (Con)

You have to be very careful about the hourly rate you charge for a website. While you might be okay with profit margins that come from a $30/hour rate… is it sustainable?

Think about it like this: You’re trying to be mindful of your clients. You know they need websites. You know they’re probably strapped for cash. And you don’t want to scare anyone away with high rates. So you compromise. $30 an hour will still net you a good chunk of change.

That said, when your business model is contingent on how much work you put into a website, that limits your earning potential. Let’s say you’re willing to work 50 hours a week and are able to bill clients for about 40 of it (the rest of the time is spent on business management).

40 hours × $30/hour = $1,200/week

That’s it. That is all the money you will ever be able to make.

If you choose to automate your workflows with software to free up time to work on more projects simultaneously, that reduces the number of billable hours you can charge. Automation just doesn’t work with this business model.

That said, I do think this is a viable option for new web designers. Until you have made a name for yourself, have an impressive portfolio to show off as well as clients who’ve given you rave reviews, it’ll be difficult to charge clients any other way. Just be careful with how much you set that hourly rate for.

2. Charge A Flat Rate

In this scenario, you charge a single flat rate for web design. You can also create a tier of web design packages that allow you to charge varying flat fees based on website type.

WebsiteSetup estimates these rates to be:

Between $1,000 and $3,000 for solo freelancers.
Between $10,000 and $15,000 for full-scale design agencies.

Here’s what you need to know to find your perfect flat rate:

Focus On Value (Pro)

The clear differentiator between charging website clients per hour and charging a flat rate is the mindset — both for you and the client. Instead of obsessing over how many hours went into the building of a website, both of you remain focused on the ultimate value of the product.

Because the client has a clearer understanding that they’re paying for the outcome, you can charge more as well.

Study Web Development breaks this logic down nicely:

“[I]f the business sells an average of ten 3D printers at an average of $2,000 each per month… and after calculating that I could potentially increase sales by 30% month after month, it then equals an extra three sales per month (or $6,000).”

In other words, your rate must reflect the true value of the website to the client.

That’s not to say you would charge $6,000 (in this specific case) and call it a day. You should think about what sort of ROI they’re going to get. Decide on a flat rate that reflects that and commit to it.

Faster Sales Process (Pro)

You’re not just a web designer. You’re also in charge of finding prospects and convincing them to become clients.

When you charge clients an hourly rate, you could certainly publish it to your website. But it leaves the matter open-ended, right? You might be able to say your web design services go for $100/hour… but they’re still going to want an idea of the invoice they can expect at the end.

Drawing up custom quotes for prospective clients takes time — time away from makes sales and designing websites. Rather than get wrapped up in the quoting process where prospects take their time looking over the numbers and question why certain parts of it would take so long (and whether they’re needed), a flat rate simplifies all of this.

Here is an example from Connective Web Design:

A screenshot of the conntective pricing website pricing calculator, where you can select between pre-designed WordPress templates, custom designs, high-end custom designs, and moreConnective Web Design simplifies pricing with flat rates

As you can see here, website types are explained in the most basic of terms (the ones that matter most to clients) and then a clear value is assigned to them. Clients also have the option to add more to the website, if they feel it’s necessary.

For those of you who are nervous about publishing your rates online, that’s okay. You don’t have to.

You can still charge flat rates — and the same ones for certain website types — even if it’s not publicly available. Just create a pricing sheet that you can send to prospects that inquire about your services.

Efficiency (Pro)

Because you’re not tied to the expectation that you’ll put in a certain number of hours in exchange for X amount of dollars, you can utilize more efficient ways of designing websites.

To start, you can templatize your workflow. You can do this with everything from communications you send to clients (e.g. contracts and emails) to the baseline frameworks you build websites from (like sitemaps and wireframes).

Smashing Magazine is an example of a source that provides templates and design kits that ease the amount of work designers have to do from-scratch:

A screenshot of the smashing Freebie sectionSmashing Magazine offers free design templates and sets for designers to use.

Basically, anything that doesn’t require creativity and is repetitive in nature can be turned into a template.

You should also look for ways to offload menial and ill-fitting tasks. Anything that would be better handled by software should be automated. Anything else that doesn’t belong on your plate (maybe copywriting, QA and so on) should be outsourced to a team member or a third-party provider.

There are a number of benefits to this:

You’ll maximize your efforts and be able to boost profit margins as you spend less money but accomplish more.
You’ll enjoy the work you do because you won’t be tied down to tasks that don’t belong on your plate. Your happiness will have a direct impact on the quality of work you produce.
As you delegate tasks to others and automate with software, you can multiply your efforts and take on more website projects simultaneously. Which means more money for you!

It Takes Time (Con)

Charging a flat rate to build websites is the best way to run and scale a design business. That said, it will be difficult to convince clients to pay that much if you don’t have enough experience behind you and proof to back it up.

Unlike hourly rates that are great for newer designers, this approach is one you probably can’t jump into right away.

That said, if you’re bringing extensive experience with you from a well-known design agency or another business and can demonstrate that you have the skills to meet client expectations, go for it. Just be aware that you’re more likely to face pushback if your business isn’t ready for it.

Scope Creep (Con)

Inevitably, you’re going to encounter clients that want you to do more without them having to pay for it. Some of them will be more blatant than others, asking how much you’re willing to give away in order to earn or retain their business.

Then, there are others who try a subtler approach.

“I really love Version 3 [of the design], but was wondering if you could add a live chat button to the bottom corner real quick. I saw another website that had it and I thought it looked great. Our customers would love it!”

That request, in and of itself, is not a problem. What is a problem is how you handle it.

If you have no contract in place, seemingly small changes like these can add up and eat away at your profit margins. Without a contract that limits how many revision requests are allowed or what exactly you’re to build, clients can technically ask for whatever they want and you’d have no recourse for charging more.

Now, let’s say you do have a contract in place. The terms of that agreement lay out what you are obligated to do. However, it’s an issue when you agree to make “small” changes that exceed those terms that it becomes an issue.

Even though the client has made it seem easy enough to add a button to the design, that button actually has to function on the website… which means they’re asking for much more than a design tweak. You now have to find a live chat platform, pay for it, integrate it with the site and make sure the button works properly.

Give a client an inch and they’ll run a mile with it. So, always make sure you have a strict contract in place and be willing to enforce those terms when clients try to push the limits of it.

3. Charge A Monthly Rate

In this scenario, you charge a flat rate, but it’s for a recurring web design service; not just a one-off build. The pros and cons of this are essentially the same as charging a flat, one-time fee.

The key difference is that this allows you to retain clients over the long-term — which is fantastic for creating a steady stream of predictable revenue for your business.

In terms of why you would do this, consider the following:

There are DIY website solutions like Wix and Weebly that appear to make the process of building one’s own site easy and cheap.

Then, there are traditional content management systems like WordPress that are more and more going the way of the user-friendly page builder, hoping to appeal to a larger set of users.

A screenshot of WordPress’ new Gutenberg editorWordPress has recently implemented a more user-friendly page builder.

It’s already hard enough trying to convince clients that they need to hire a professional designer and to pay them a fair wage to build a website. Now, page builder tools are telling them that they really don’t need you.

That said, if you become an end-to-end website provider, you can not only charge a flat rate for your design services, you can do so month after month. It would simply require a shift in mindset from you, an adjustment to your branding and advertising, as well as some additional services.

In terms of how you would do this, consider offering a total solution so they don’t have to go anywhere else. The added convenience of entrusting all website-related matters to one professional could be the tipping point between you and the other options.

Think about rounding out your offering with:

Domain and web hosting management
SSL installation
CDN implementation
Premium theme licensing
Premium plugins licensing
Third-party storage services
Website maintenance
Marketing and SEO

You would also want ongoing web design edits and annual design audits to be a part of your ongoing service

Just as you would do with flat-rate design services, you could outsource items above that aren’t in your wheelhouse to others. Then, add a markup to the price when you sell the website package to the client. You’re still making money without having to increase your workload.

As you might imagine, this option for getting paid is for the experienced designer who has everything else in order and is in a position to comfortably shift their offering to one of greater value.

How To Decide How Much To Charge For Websites

Finally, we come to the valuation of your web design services.

Ask yourself the following in order to determine your best rate:

What kinds of websites are you capable of building?

Put them into buckets:

Small blogs,
Small- to medium-sized company websites,
Small- to medium-sized digital e-commerce stores,
Large e-commerce stores with physical and digital products,
Large e-commerce stores with brick-and-mortar presences,
Membership sites,
And so on.

Choose no more than three types to build. Then, break down how many pages as well as the key features you will need to build. This should tell you how much work is involved in creating a website of this nature. You can determine basic timelines and “manpower” based on this.

Who is your target client?

This is a slightly different question as it forces you to ask yourself who exactly you want to work for. This might mean defining a business by its size or it might mean choosing a niche industry to work in.

Either way, figure out who you want to build sites for and make sure they can afford your rates. (Check the competition’s rates to get an idea for what price range they’re willing to pay in.) If they can’t afford what you want to charge, they might be better off with the DIY approach and you should look for a new pool to play in.

How will these websites convert?

This is where the value question comes into play. In other words, what will your clients expect these websites to do for them:

Subscribe readers?
Schedule demos with prospective customers?
Sell goods?
Gain members?
Make money through advertising?
Something else?

You might not know exactly how much of a boost in conversions a new website will lead to, but you can estimate how much each new conversion is worth to them.

These three questions help you determine how much you should get paid to build websites. But there’s one more thing to think about:

“What do you have to spend to make this happen?”

You’re providing a valuable service here, but you’re not doing it all on your own, from a 10-year-old computer and in a rent-free apartment.

You have bills to pay that enable you to run your business in a way that leads to the top results you bring to clients. As such, you have to factor in your costs when determining the cost of your services.

The Bottom Line

Ultimately, it’s up to you to decide what monetary value you want to sign to your web design rates. However, if you want to remain competitive within the space, make sure to charge within one of the estimated ranges mentioned earlier — at least, to start. Then, as your business grows, you can steadily raise your prices in line with the increasing value of the websites you build.

Smashing Editorial
(ms, ra, il)

10 Ways to Contribute to The Open Source Community

Original Source: https://www.hongkiat.com/blog/open-source-community-give-back/

Open source software has helped accelerated the development of information technology, generating opportunities never seen before. Just think about startups and small businesses using free CMS such…

Visit hongkiat.com for full content.

The Witches’ Guide to Design

Original Source: https://www.webdesignerdepot.com/2019/01/the-witches-guide-to-design/

No, no. I didn’t go researching modern-day witchcraft or anything like I did with Taoism. No, I’m taking web design lessons from a set of entirely fictional witches who live on a flat, circular world which rests on the back of four elephants, who in turn stand on the back of the Great A’Tuin, a turtle that swims through space.

It’s called the Discworld, and it is the subject of forty-one of the best darned books I’ve ever read in my life. The witches of the kingdom of Lancre are the protagonists of several of these books. They’re a cross between village doctors, local magistrates, and (on relatively rare occasions) magical troubleshooters.

If they were designers, they’d be the scariest and probably the best designers in the business. Here’s what I’ve learned from them:

[Note: All illustrations are by Paul Kidby.]

Trust Yourself

If you want to change the world around you, you first have to know who you are. And then, you have to have absolute confidence in who you are, knowing both your capabilities and your limits. Esmeralda Weatherwax defines this trait. It is her nearly unshakable confidence and her will, which make her the most powerful witch known. Officially, the witches don’t have leaders, and Granny Weatherwax is the leader that they definitely don’t have.

Designers, of course, have to learn how to be wrong, and then deal with it. Granny does, too. The problem is, if you get too used to thinking you’re wrong all the time, it can become a hard habit to break. You can’t do your best work by second-guessing yourself at every turn. You have to see if you’re actually right or wrong first, and go from there.

Granny trusts her knowledge and experience, and when she is proven wrong, she trusts the new knowledge and experience. Eventually.

Enjoy Yourself

What’s the point of any of this if you can’t enjoy yourself? Looking after a whole community isn’t easy, but Gytha “Nanny” Ogg finds the time to eat and drink rather heavily, dance whenever she feels like it, and sing loudly enough to send her entire village literally running for cover. She’s been married three times, has fifteen children, and still she checks under her bed for strange men at night because “you never know your luck”. She takes full advantage of everything she can get from being the village witch, and matriarch to half the people in the village besides.

In learning about (and selling) the importance of our work as designers, it’s easy to get lost in all of the grand ideas. We’re trying to make sites that are accessible, usable, beautiful, and hopefully profitable, and each of these is almost a discipline unto itself. It’s worth taking the time to just sit there and marvel at all the cool stuff the web can do, and enjoy being a part of it.

People Want Magic…

The witches of the Discworld very rarely use “actual” magic, beyond their flying brooms. They can. Granny Weatherwax in particular is terrifyingly powerful. Mostly, though, they practice a generalist sort of medicine, and a whole lot of what they call “Headology”. People are always coming and asking for magical solutions to things that can be fixed by far more practical means. Headology is mostly a means of making people think something magical is going on, leaving the witches free to do what’s necessary in peace.

For most users, everything we do seems magical. The very act of making a static web page seems mystical to them, especially if you do it with [gasp] a text editor. And the simple truth is that like the villagers in Lancre, they don’t want that illusion broken most of the time. They want something to magically fix their problem. If you can help them to solve their problems, but make it feel like them was magic, you’ve got a winning formula.

… But People Have to Work Things Out For Themselves

The younger witches often ask questions like, “But why can’t we just use magic to solve all of these problems?” The answer, of course, is that magic can cause as many problems as it solves. Magic is a blunt instrument, and most situations with people need something more like a scalpel, a screwdriver, or even a small paintbrush.

Ask any therapist. Lasting change comes when you guide people to the solutions, and let them do the rest. Trying to force your solutions on them basically always backfires. For example, I could point at the many ways algorithms are going horribly wrong in the world of social media. You can do your best as a designer to make things easier for your users, but you can’t do everything for them, and you shouldn’t try.

Know When to Go For Help

Over the course of the books, there are a few witches in training, including Magrat Garlick, Agnes Knitt, and Tiffany Aching. While they all have amazing story arcs that I just don’t have space for in this article, there was one thing they all had to learn: when to ask for help. The witches of Lancre are fiercely independent, and they are mostly expected to handle problems—even the big ones—for themselves, but occasionally they run into problems too big for any one witch.

Designers are going to run into those sorts of problems a lot more often, frankly. There’s so much to learn out there, and it’s rare that any one designer will come up with perfect solutions all on their own. Everything we do is built on the work of thousands who came before, and keeping all of that in one head just isn’t going to happen. You have to stand on your own as a designer, and take responsibility for what you build, but you can’t do everything alone.

When in doubt, try to get at least two outside opinions. Remember: you need three witches for a coven; two witches is just an argument.

 

Featured image via DepositPhotos.

Add Realistic Chalk and Sketch Lettering Effects with Sketch’it – only $5!

Source

p img {display:inline-block; margin-right:10px;}
.alignleft {float:left;}
p.showcase {clear:both;}
body#browserfriendly p, body#podcast p, div#emailbody p{margin:0;}

A Look Back at 2018: Round-up of Codrops Resources

Original Source: http://feedproxy.google.com/~r/tympanus/~3/mxJogBVSnlI/

2018

It has become a little tradition at Codrops to share a summary of all our resources in the end of the year. 2018 was really an exciting year for the web and we are stoked to be part of an ever-changing and inspiring community of creatives who don’t hesitate to push the boundaries, to make bold design statements and use new, experimental technologies. We hope you had a wonderful, creative and fulfilling 2018!

Come and join us for a look at our yearly round-up.

A big big thank you to all our fantastic readers, supporters, contributors and sponsors! Have a wonderful new year full of positivity, health and love! Let’s make good stuff!

With love,
Pedro, Manoela & little Lucas

A Look Back at 2018: Round-up of Codrops Resources was written by Mary Lou and published on Codrops.

Survive Office: 10 Tips For Moving Up Corporate Ladder

Original Source: https://www.hongkiat.com/blog/survive-office-moving-up-corporate-ladder/

A majority of employees seek opportunities to climb up the corporate ladder. However, in the corporate world having mere ambition is not enough. What matters is whether you have the discipline and…

Visit hongkiat.com for full content.

95% Off: Get the Complete Beginner’s Guide to Animation Bundle for Only $24.99

Original Source: http://feedproxy.google.com/~r/Designrfix/~3/AzpL698L9-M/95-off-get-the-complete-beginners-guide-to-animation-bundle-for-only-24-99

Animations are now booming like never before. Today, it is not only used in movies, but also in other industries. Even small businesses use animated videos to engage their audience. Whether you crave a life in design and animation or you just want to refresh your skills, the Complete Beginner’s Guide to Animation Bundle has […]

The post 95% Off: Get the Complete Beginner’s Guide to Animation Bundle for Only $24.99 appeared first on designrfix.com.

Why design resolutions fail – and how to smash your goals this year

Original Source: http://feedproxy.google.com/~r/CreativeBloq/~3/MFhcC1KWgx0/why-design-resolutions-fail-and-how-to-smash-your-goals-this-year

It’s not clear why, but something about a change in the calendar makes us mega-confident that this year, we really will turn things around. Yet you only have to look at February’s empty gym changing rooms to know that keeping to resolutions is harder than it might seem. 

In this article, leading creatives share previous design-related resolutions, why they failed, and what we can learn from their experiences. 

01. Learning a new skill

“My New Year’s resolutions have often involved learning a new skill to keep pace with the ever-changing digital world,” says Dan Bradshaw, design director at TH_NK. “This year, I wanted to learn how to design for AR and VR, which then took on the form of having to pick up 3D as a skill.”

But this turned out to be his first stumbling block. “Whilst I read and immersed myself in the world of VR and AR – both literally and metaphorically – when it came to learning the 3D software I hit a wall,” he explains. “Learning the new software is expensive and finding time were factors – least not because they’re not needed at the moment in my day to day work. 

“So far, I have a much better understanding, and have explored the worlds of AR and VR from a design theory point of view. Now I just need to do it. So a key resolution for 2019 is: set a much more pointed goal, a time frame, and actually set aside time to do it.”

There’s much more to VR than meets the eye. Image credit: Jeshoots.com

It was a similar story for Tom Moran, UX lead at TH_NK. “My 2018 new year’s resolution was to draw more,” he explains. “My design put a lot of value in craft and as a UX lead it’s critical for me to be able to communicate an idea clearly and articulately. A good scamp or mock-up, even of boxes on a page, can go a long way.

“I used this as an opportunity to learn how to draw with a tablet too… and this could be the reason resolution didn’t stick,” he muses. “A bad workman quarrels with his tools, and in time I probably would have got there, but in the short run it was enough to fall by the wayside. Next year, my plan is to draw more, but maybe stick to paper.”

Lesson learned: If you hit a wall, take a step back and see what is achievable. Rather than just giving up, be like Bradshaw. Reframe your resolution (in his case: not becoming an expert practitioner, but still having a rounded knowledge of the subject). And then craft a more suitable resolution to carry things forward the following year.

02. Taking on creative challenges

"As a social media addict, I find myself constantly scrolling and finding design challenges in hashtags such as #inktober or #36daysoftype," says Alexandra Francis, junior designer at Flow Creative. "Every year I have tried to participate in more hashtags but found myself excited to start and never finishing."

So at the start of 2018, she resolved to do things differently this year. "I decided to tweak the 36 days of type challenge to suit me, and made a new year’s resolution to draw the alphabet," she explains. 

"But instead of completing the challenge in 36 days I posted a letter on my Instagram whenever I had time, aiming for once a week. Once a week fitted better into my schedule, didn’t give me added stress and meant I actually enjoyed drawing each letter as opposed to rushing my way through the alphabet.

Alexandra Francis tweaked her resolution for 2018, and got a job as a result

And the result couldn't have been better. "On top of making the challenge suit me, I accidentally lined up my Instagram grid so that each letter appeared directly on top of each other. Liking how this looked and wanting my Instagram to act as a mini portfolio, it forced me to draw a letter so that this was maintained. In doing this I was headhunted by Flow Creative, who saw my feed and I landed my dream job!

"I am now on the letter Z and in giving myself a weekly brief, I have been able to really push my style and technique," she concludes. "I have gone from only traditional drawing to experimenting with Paint, Procreate and Illustrator."

Lesson learned: A daily design challenge sounds like a fun thing. But are you really that flexible with your time and schedule that you can realistic fulfil it? Consider whether changing it to weekly, fortnightly or monthly might be more achievable.

03. Better work/life balance

Designer, artist and illustrator Craig Minchington made one major resolution at the start of 2018: having a better work-life balance. But soon after coming back after his Christmas break, he slid back into old habits.

“I found myself diving head first back in to work,” he recalls. “Twelve to 14-hour days were standard. I would finish client work and then work in to the early hours doing personal projects, chasing new business, working on my portfolio.” 

He soon realised that he was ignoring all his past mistakes, and actually being less work effective. “So then I made a conscious effort to balance out my work and down time hours. 

Craig Minchington design work

Craig Minchington, who specialises in 3D illustration, typography and high end image creation, has perservered with his 2019 resolution

"Non-working hours didn’t mean I wasn’t creative as I became obsessed with gardening." he continues, "but also began running seriously again for some mindful reflection time. I realised I needed these alternative to decompress, reflect, sleep better and evidently make me more effective in my 9am-6pm hours.” 

“I am not sure if those early months of chasing new business helped, or whether things just occurred naturally, but for the rest of the year work seemed to keep coming in, whilst balancing out my life and most importantly – avoiding burnout,” he adds.

Lesson learned: Just because you fall off the wagon doesn’t mean you can’t jump right on it again. Stick to your guns, and you’ll get there in the end.

04. Saying no 

“I think the resolution to ‘say no more often’ is probably on many lists every year in most industries,” says Darren Ammar, a designer at Purple Creative. “But the reality is that it's a luxury not every agency or freelancer can afford. And it is not always clear at the beginning of a project whether it is worth doing or not. I've seen dead ducks become KPI-beating swans, and a pearl of a project become a complete nightmare.”

Jessica Hische's client email helper

Learning to say no is a useful skill. Trying out Jessica Hische’s client email helper can be a good start. 

So what he’s learned to do more of over the last 12 months is the importance of spending time considering why something is a great thing to do. 

“When you get that initial desire to turn a project down, make sure you fully kick it around and understand what is driving it, and whether it's justified,” he advises. “If it is, then the answer should always be no.”

Lesson learned: If your resolution requires willpower, then to stick to it you’ll need to build up a habit of taking decisions more slowly and carefully. Otherwise, you’ll end up panicking and breaking your resolution through a rush to judgement.

05. Doing more side projects

Sometimes you don’t quite achieve your resolution in full because other things get in the way that are, let’s face it, more important. That’s just what happened to freelance web designer Robert Fenech in 2018. “I made a resolution to do one mobile app design/layout per week to hone my skills on that side of things,” he explains. 

Ninja avatar

Web designer and “wannabe ninja” Rob Fenech notes that resolutions aren’t the be-all and end-all

"Random brands and ideas, but just 52 unique designs. I managed a total of 39. I ended up skipping weeks due to work commitments rather than it just fading out. It was always client work that got in the way, but that is never a bad thing.”

Lesson learned: Sometimes other things are simply more important than keeping to your resolution. As long as you’ve given it a good go, and you’re happy with the compromise you made, there's no point in beating yourself up. 

8 tips to help you keep your resolution

We can learn as much from creatives who have kept their resolutions, as those who haven’t. Here we here the stories of New Year’s resolutions that went well, and some lessons that can help us pull off the same level of success ourselves.

01. Revisit previous resolutions

There’s no rule to say that you need to make fresh resolution each New York. Revisiting the same resolutions can be just as, if not more important.

“Every year I resolve to step away from the computer, detach from all the blog inspiration that we are sent and get outside,” says Claudia Morris, design director at B&B Studio. 

“To get sketching, really look, immerse in the unfamiliar. Getting this headspace to explore, away from our online world continues to be a resolution that I need to keep revisiting! It’s one that always pays off and one that we encourage across the design team.”

02. Build on your resolutions from year to year

As well as just setting the ‘reset’ button on previous resolutions, it’s also good to develop and evolve your resolutions from year to year. Mark Davis, co-founder and creative director of property branding agency me&dave, offers an example. 

“At the start of 2018 we resolved to work towards changing the way all parties approach the pitching process. We wanted to work out how it could be done better and in a way that benefits all parties. As it stands, it’s not good for clients, it drains agencies’ resources, and it’s certainly not good for the creative process.” 

Such an endeavour, of course, can’t be fully realised in just 12 months. “So our 2019 resolution is to endeavour to make the pitching process more relevant for today’s industry and market. 

"We’re set out three manageable steps towards achieving our goal: insisting on chemistry meetings, refusing to pitch against more than two other agencies, and advising prospective clients that a pitch should be a direction to interpretation, not an exposition.”

03. Make it a regular thing

If your resolution is something you can do at any time, chances are, you’ll never do it. So it can be useful to turn it into a regular ritual. 

At the start of the year, Becca Mitchell, head of agency operations at Purple Creative, made a resolution to “Be inspired more and be more inspiring”. She explains: “You know what it’s like when you’re working to tight deadlines day in, day out? You get tired. Then you decide not to go to that gallery or exhibition that evening because you’re too exhausted.”

So she set up a monthly creative get-together she called Sidekick Series. “The objective was to put randomly selected people together every month – so they can spend time with each other and learn what each do – and get one pair to ‘host’ a creative evening for about two hours. 

“It’s their job to decide what we do: things like invite in someone inspirational to talk, go somewhere new, learn something. To date we’ve had a guided architectural tour of the Barbican, a candle-making workshop, a talk by a photographer and a pasta-making class. What I love about it is that it’s a group activity; it gets people together, excited and inspired.”  

04. Apply focus

At the end of the day, you need to focus hard on keeping your resolution; it won’t happen just by itself. Dave Bowers, head of strategy at Likely Story, offers an example from 2018. 

“This year, we wanted to get better at understanding our utilisation,” he explains. “So we started using Asana for our tasks, which lets us see what time we need to spend on each task so we don’t over-service and end up out-of-pocket. It took some discipline for a couple of months, but now it’s helping us keep our profit margins.”

05. Find the appropriate time

Too many people fail to keep their resolutions because of a ‘lack of time’, but if you need time, you have to proactively make time. 

Jamie Fleming, copywriter at Purple Creative, made a 2018 resolution to get in the habit of creativity by writing more. He reached it by finding a specific time to do so, and sticking to it. 

Jamie Fleming kept to his 2018 resolution by resisting the pull of Angry Birds

“I commute into work, which can take anywhere between 60 and 90 minutes over the course of a day,” he explains. “It’s dead time really – so I decided that I’d stop podcasting, Angry Birding and Spotifying and put pen to pad. It wasn’t always good, I didn’t always want to do it, but eventually the ideas start coming and the writing started flowing.”

The last creative we’ll hear from is Neil Richards, who (almost totally) fulfilled a New Year’s resolution he called 'Analogue 366'. 

“As I primarily work with computers, I tried to do something 'non-digital',” he explains. “So throughout the year I took a screen printing course, fixed and shot film cameras, did more hand drawn sketches, did some Lino printing, printed digital photographs – and more. If you check out the Instagram tag you can see the 362 photos I posted, so somewhere along the line I messed up! I possibly ended up in hospital; I can't remember!”

To our minds, 362 out of 366 counts as a success. And so here are Richard’s two tips for fulfilling your design-related New Year’s resolutions.

06. Take a step back

“Think of the bigger picture," says Richards. "It's so satisfying to look back at the end of the year and see how it was shaped by your resolution.”

08. Be flexible

“Don't beat yourself up if you have to skip a day, or change the parameters. The only person that it matters to is YOU, so do what's right for YOU.

"There will be hits and there will be misses, but you probably wouldn't get the hits without learning from the misses. I loved the fact that I learned new skills on my year, and some of the smaller projects made the bigger ones better."

Read more: 

9 must-have design tools for 20195 ways to get more freelance work in 20197 hot web trends for 2019