Yes, you can, and it doesn’t really matter in what order. A CSS preprocessor is not required. It works in regular CSS.

This works:

@supports(--a: b) {
  @media (min-width: 1px) {
    body {
      background: red;
    }
  }
}

And so does this, the reverse nesting of the above:

@media (min-width: 1px) {
  @supports(--a: b) {
    body {
      background: green;
    }
  }
}

You can keep going with the nesting, if it ever makes sense:

@media (min-width: 2px) {
  @media (min-width: 1px) {
    @supports (--a: b) {
      @supports (display: flex) {
        body {
          background: pink;
        }
      }
    }
  }
}

There is probably a point where the logic of that gets out of hand, so careful. But hey, it works. Presumably, you can “infinitely” nest at-rules.

To look at nested code like that looks a little like a CSS preprocessor is in use, but that’s not the case here. Regular ol’ CSS handles this just fine, and in fact, CSS preprocessors don’t meaningfully manipulate it at all (tested Sass, Less, and Stylus).

The post Can you nest @media and @support queries? appeared first on CSS-Tricks.

Here’s a wonderful reminder from Charlie Owen that everyone in the web design industry isn’t using the latest and greatest technology. And that’s okay! Charlie writes:

Most web developers are working on very “boring” teams. They’re producing workhorse products that serve the organisation needs. They aren’t trying to innovate. They aren’t trying to impress the next recruiter with their CV. They simply want to get paid, produce a solution that works, and go home.

Yet they are told, mostly implicitly, sometimes directly, that if they’re not innovating and using the latest tools that they are somehow a failure. This feeling of failure for not implementing the latest tech permeates our industry.

This feeling needs to end.

I feel that this is a big problem for our community because there are a small number of folks on the bleeding edge that happen to be quite loud about their work (even here at CSS-Tricks) – and that’s great! We all need to learn from folks that are doing this work. However, we need to remind ourselves that this is a very small number of folks and not every project has to be a technical marvel to be a success.

Take Michelle Barker’s personal site, for example. It’s slick but is also dependency-free so she could focus on writing the languages she loves: HTML and CSS. Not a bad goal, nor a bad outcome.

This also harkens back to something Chris mentioned when discussing complexity in web development:

There are more developers these days working on in-house teams or agencies with big-ticket clients. That is, more and more developers on large-scope, long-scale, highly-complex jobs. So that’s where their minds are at. Big complicated problems with big complicated solutions. That’s what gets talked about. That’s what gets blogged about. That’s what gets argued about. That’s the topic at a lot of conferences I’ve been to.

While you certainly can make a soup-of-the-day website with an index.html file and FTP, blog posts about that are fewer and farther between and don’t get as many claps.

It’s not so much that we need cheers to validate our work; it’s merely recognizing that not everything has to be on the bleeding edge of technology. There’s something to be said about “simple and boring” projects.

Perhaps the real thing to fear is less about what we’re sharing and more about what we’re not sharing.

Direct Link to Article — Permalink

The post The Real Dark Web appeared first on CSS-Tricks.

Have you ever purchased something online? Perhaps from an online boutique or Amazon?

The odds you saying yes are pretty high.

eCommerce is skyrocketing for the past decade and people tend to stay home and shop rather than driving to the nearest mall. People feel more comfortable spending money cuddled up on their sofa while playing a mental tennis match between their Netflix screens and smartphones.

DigitalMarketingInstitute says that eCommerce has grown by 300% over the last few years.

Also, According to Sleeknote, in 2017, 21.8% of the World’s population was using online tools to purchase goods, and the forecasted number of online shoppers for 2021 is 2.14 Billion.

A pretty good number to have as a potential customer base, right?

So whenever a person has some products in their hand, setting up an online shop seems a lot more inviting rather than going and looking for rental places for their brick-and-mortar shop.

As eCommerce handles nearly all of the aspects of a deal through the internet, the owner can save a lot on the advertisement, rental, staff costs, time and can reach out to a bigger and more tailored potential (global)customer base.

If you got enough of the eCommerce flattery, we can move on to the most crucial part of an eCommerce business; actually getting paid online.

One of the most popular and easy to set up ways to get paid online is, wait for it, online forms. The online form industry often goes unrecognized since it has become so common and most of the people are using it to get the contact information of a visitor of their website. But actually, the area of usage of online forms can be quite the Mariana trench.

When one does a quick search, he/she can find out many different options of form builders. JotForm and Typeform seem to be the top players in the game.

When you dig a little deeper, for online payment options, JotForm leaves its competitor behind. There are many different options of payment processors, and you can select the one that fits your business needs the best — news flash — there are other payment processors than PayPal 🙂

JotForm’s payment integration list is definitely something to see with more than 30 different payment processor integrations. As soon as you create your custom online form, you are ready to select the payment processor you need.

Here are some examples of different payment processor options and how they work with JotForm.

PayPal

Yes, you already know it! PayPal has been the leader of accepting and making online payments for more than 20 years, and it’s here to stay. They’ve also adapted themselves to the customers’ needs with their different solutions other than PayPal Standard.

One other option is PayPal Checkout which enables you to give your customers more payment choices, like Paypal Credit, Venmo and other sources. Providing various payment choices to your customers increases the likelihood of you getting paid on time.

If you have customers who do not use PayPal, you can use PayPal Pro. PayPal Pro enables your customers to pay via their credit cards.

Using PayPal is easy, but PayPal Invoicing makes it easier. If you need to create, track and process your invoices online, you should try this feature. PayPal Invoicing forms perfectly fit your eCommerce business since it will help you with getting rid of your invoice books and keeping better track of your payments and orders.

Worldpay

Worldpay offers secure payment services that can be used by everyone. Their prominent feature is security, which is quite important for collecting and receiving payment.

It is especially popular in the UK and Europe, in fact, WorldpayUK is the largest payment processor in the UK. You don’t have to worry If you plan to start up your online store in the US, because WorldpayUS is also available

BrainTree

BrainTree is a global payment platform focusing on mobile and web payments for eCommerce companies, so it might be a good platform for building your business. You can accept payments in more than 130 currencies from 45 countries around the world.

BrainTree also offers customer tools for small businesses like recurring billing and customizable sales reporting.

GoCardless

GoCardless is a platform for collecting Direct Debit payments. As you can understand from the name, you don’t need a card. The payment is directly from your customer’s bank to your bank. It’s an easy, fast and secure automated payment collection method.

Authorize.net

You can accept payment via credit cards and electronic checks by using Authorize.net. It is a trusted leader in processing credit card payments. It is named “Best API Integration” two years in a row.

Now that we got the payment out of the way, there is nothing else stopping you from opening up your online store. Don’t get left out from this eCommerce craze. So what are you waiting for?

Photo by Mein Deal on Unsplash

Which Is Best: A Loyalty Program PWA or Mobile App?

Suzanne Scacca

2019-08-05T14:00:00+02:002019-08-05T14:48:02+00:00

Customer loyalty is a critical component in the success of any business. In some cases, loyalty can be earned by providing a high-quality service and dedicated support. In other cases, customers expect more from a business than just the products or services they put before them.

So, don’t be surprised when clients ask you to design a loyalty app for them.

Loyalty programs are a great way to dish out rewards to the most loyal base of customers while also giving them a reason to stay engaged with a brand. This isn’t superficial engagement like views or clicks either. If the rewards are valuable enough, customers will stay committed to a business for longer (even when faced with a negative experience) and also spend more money than one-time customers.

There’s a lot of value in creating a loyalty program. Now, it’s up to you to determine the best way to design it for your clients:

Should it be a PWA or mobile app?

Why Is Mobile The Key To Loyalty?

Using the 2018 Loyalty Program Consumer Survey from CodeBroker, let’s shed some light on why mobile is where you need to design your clients’ loyalty apps.

To start, there are a number of businesses that would benefit from loyalty programs. For example:

• Retailers
• e-Commerce
• Restaurants
• Hotels
• Airlines and other travel providers
• Credit card companies

With many of these options, there’s an in-person component at play, which is why it’s important to give users access to their loyalty program and rewards on mobile.

But be careful. Of the top concerns expressed by CodeBroker’s survey respondents, 54% said it was too difficult to access rewards information from their mobile devices.

What’s more, many consumers were frustrated with having to install a mobile app in order to get rewards updates. And, yet, 75% indicated they’d be more likely to sign up for a rewards program if it were convenient to use from their mobile device.

Now, the main gripe from this report is that consumers want communications about rewards points and other program details sent via text and email. They don’t want to have to log into a mobile app to get them.

It’s a valid argument to make. If a brand were proactive in emailing Jane Doe to say, “Hey! You have 2,500 points to use by the end of the month!”, that would be a much better experience than Jane Doe having to take the initiative to check on her points standing.

However, this ignores the fact that customer loyalty is more than just the act of counting how many points one has to spend.

“

True customer loyalty comes about when brands can anticipate their customers’ needs and provide a more personalized, fast and convenient experience.

Which is why we have to look beyond mobile communications and look at how to actually design the program’s experience for mobile.

Designing Loyalty Programs For Mobile

While mobile apps and PWAs can both provide a good experience, consumers have already expressed a disinterest in installing mobile apps to manage their loyalty programs. That said, I don’t think it’s fair to throw native mobile apps out of the race solely based on that feedback. If you make a mobile app worthwhile, consumers will use it.

Plus, PWAs can work offline… but will only display cached content. Which means that customers who want to use their loyalty app to place orders on the go, pay in store from their app or do something else when they’re out of service range won’t be able to do so with a PWA.

That’s why I’m going to argue that you should design your loyalty program as a PWA only if there’s no in-person counterpart. So, basically, e-commerce companies can skip the mobile app. Those in the credit card space might be able to get away with it, too, though security will need to be extra tight.

Everyone else, will need to build a mobile app. And, based on what I’m seeing, you should create a matching PWA, too.

For example, this is the Starbucks rewards app as a PWA:

And this is the Starbucks loyalty program as a mobile app:

There are a number of discrepancies between the two, but, for the most part, it’s an identical experience. I’d even argue that the PWA looks a lot cleaner and more welcoming to users. However, the mobile app is necessary for customers that want to order while they’re on the road or to pay from their phone at the counter or drive-through.

With that out of the way, I’d like to quickly review some strategies for designing loyalty program apps for your mobile users. I’ll use both PWAs and native apps in these examples, just so you can see that there isn’t a whole lot of difference in how you design them:

1. Ask Your Users for More Than a Username and Password

Unlike something like an email subscription form or a free SaaS signup, you should be collecting more than just a username and password from your users. And they should be happy to give it to you.

It’s up to you to decide where and when it’s best to ask for this information though:

Do you want to ask for it on the login screen? Or do you want them to provide personal details and preferences later on?

Let’s look at how The North Face‘s VIPeak program handles it:

This signup screen asks for four things:

• First Name
• Last Name
• Email
• Password

It’s a couple extra fields to fill in, but I don’t think many customers will take issue with it. Plus, signing up doesn’t just let them start collecting rewards immediately. They automatically get 10% off their first purchase from the website.

Now, what I like about how this one is handled is that users aren’t pestered with extra questions at signup. Instead, they have the ability to customize what sort of promotions they receive at a time when it’s more convenient for them.

This is just one way to make the signup process go more smoothly on mobile. You can use this post-signup customization for more than just email preferences, too. You can plant a number of additional fields or questions in their account settings.

For instance, you could ask for their mailing address if the loyalty app also does order-and-delivery services. Or if you want to go old school with your marketing and send them a mailer.

You could also ask for their birthday. This would work in your favor two-fold. First, a birthday discount or free gift offer is a great way to re-engage a user who’s potentially lost interest or forgotten about the brand. Plus, everyone loves a birthday gift, so that “free” bonus would be useful in holding onto their loyalty.

2. Always Lead with Points

There’s a reason why the CodeBroker report focuses heavily on the points aspect of loyalty programs.

Even if the brand offers other rewards with memberships, customers first and foremost want to know how much “free” money they have to play with.

“

So, when you design your loyalty PWA or mobile app, don’t be coy with that data. Put it front and center.

This is the Chick-fil-A One app:

As you can see, the main focus in the “Rewards” tab is on how many points are available to redeem.

This is a good idea for two reasons:

1. If someone comes to the app wanting to spend their points, there’s no need to hunt them down. This makes the experience better for them and speeds up the time to conversion.
2. If someone comes to the app to do something else, that big red number might be enough to get them thinking, “Hmmm… maybe I should deal with those points while I’m here.”

Either way, the prioritization of points available gives them a reason to re-engage and spend.

Plus, it’s really easy to redeem available points.

If users click the “Redeem my points” button under their points counter or they click on the “Redeem” tab at the top, they’ll be taken to this page:

Items that are unavailable (based on the user’s point total) will be greyed out. The ones they do have enough points to spend on will appear in full color.

It’s a smart design strategy as it simplifies the redemption process while also motivating users to open their wallets and spent a little more to get the items they can’t afford with points just yet.

3. Motivate Them to Spend More By Using FOMO

Feature comparison tables aren’t just a great way to upsell product tiers to customers. You can use them to communicate the value of spending more money through a loyalty program.

Sephora‘s Beauty Insider program uses this technique:

First, it simply explains that users earn 1 point for every $1.00 spent. But the comparison table below reveals that there’s more to the program than that:

As Beauty Insider members reach certain spending tiers, even more benefits become available. For instance, after they’ve spent their first $350, they’ll start getting 1.25 points for every $1.00 spent. New rewards become available, too, like full-size beauty product samples and celebration gifts.

If you want to motivate users to install your loyalty app and keep spending money through it, clearly show them what they’re missing.

4. Simplify Future Purchases

The whole point in creating a loyalty program is to retain a customer’s business for the long run. To do that, you have to find ways to make them buy again and again.

Now, a lot of that rests on your client’s shoulders as they’re the ones who will shape the offers that entice them back to the app. However, you have a part to play as well.

Let’s use World of Hyatt to demonstrate how you might do this.

This is Hyatt Hotels’ loyalty program app. Users can view points accumulation, manage account preferences and book new hotel stays.

Users can also quickly rebook previous reservations:

And if that isn’t helpful enough, users can set custom room preferences from their account settings:

This way, the World of Hyatt app won’t waste their time showing rooms that don’t fit their ideal specifications as they try to book something new.

While the simplification of preferences and setting up repeat or recurring purchases will look differently from app to app, it’s an important feature to build in whenever you can. If you can show your users that you understand how tedious it is to enter the same details every time or to repeat a process even though nothing has changed, they’ll be more likely to return.

Wrap-Up

There’s one other thing I want to add here and it’s this:

When your client asks you to build a loyalty app, make sure it’s the right thing to do. Because if their business is new and they have absolutely no brand name recognition or long-term trust to leverage, it might be difficult to get people to subscribe to the program. No matter how beautifully you design the app experience.

And because loyalty members want access to their rewards on mobile, that’s going to leave you with two costlier choices than a website.

It might be best to explain the risks of creating a loyalty program without a huge demand for one. And, instead, recommend creating on-site promotions and offers they can share through email to start.

Then, when they’re ready, you can sit down with them and explain how a PWA or mobile app loyalty program will help them attract a better quality of customer and hold onto them for longer.

(yk, ra)

It’s August, which means the rain is finally slowing down, and I have a chance to get my roof fixed. While I wait here under a literal tarp-fort that I hung up in my office, I thought I might as well compile some of the best recent portfolios for you all to look at.

We have a mix of sites this month, both colorful and, shall we say, color-minimalist. We’ve got more than a few specimens of one-column layouts, and some superb CSS Grid-based affairs. Enjoy.

Note: I’m judging these sites by how good they look to me. If they’re creative and original, or classic but really well-done, it’s all good to me. Sometimes, UX and accessibility suffer. For example, many of these sites depend on JavaScript to display their content at all; this is a Bad Idea, kids. If you find an idea you like and want to adapt to your own site, remember to implement it responsibly.

Mike Harrison

Mike Harrison’s portfolio is all about “big”: big text, big pictures, and a great big “M” that all fill up big screens (and yes, the small ones too). It’s dead simple, eye-catching, and might have a little bit of a blue thing going on. (It’s subtle, but it’s there [/sarcasm])

I sure would like it if the logo mark in the header took you back to the home page, like most sites do, but otherwise we have a solid (blue) first site for this list.

Platform: WordPress

Rules Creative

Who needs a power-point-style site when there’s actual 3D graphics to be had? Rules Creative uses both 3D and pseudo-3D effects combined with some light brutalism(?) to create a brash, but lovely-looking site. And it’s the first site this month to use yellow effectively, so it gets bonus points from me.

They could use a bit more contrast for the navigation menu at the bottom, perhaps, but it’s otherwise great.

Platform: Contentful

PWNK Digital

PWNK Digital brings more 3D WebGL graphics, a whole lot of pink, and a cyberpunk aesthetic, which makes their logotype alone very clever. The rest of the site is brilliantly atmospheric, whether you’re browsing through their work or their social feeds. It’s a great showcase of what can be achieved with WebGL and 3D graphics on the web in general.

Platform: Static Site (I think)

Caleb Barclay

Caleb Barclay’s site has that monospaced-type and thin borders look that was everywhere for a while. Combined with the pastels and grays, along with some light animation, the whole things is pleasant to browse through while listening to piano covers of ‘90s pop hits. I know that’s a bit specific, but it’s true.

It’s also another great example of what the Webflow platform can do. I do still prefer custom coding my sites, but man, the drag and drop builders are getting better.

Platform: Webflow

Zomorrodi Associates

The site for Zomorrodi Associates is a sleek, monochromatic design that makes excellent use of mild animation, for the most part, but hits you with a couple of big ones in just the right places. I kind of love the “broken” effect that they’re applied to a couple of elements, including their logo.

Platform: WordPress

Brightscout

Brightscout’s portfolio uses clean type, tons of futuristic vector illustrations, and a general aesthetic that I sort of remember seeing from the better designers on DeviantArt right as Web 2.0 was slowing down. Don’t get me wrong, I love it, and I love the way their using the green tones. If just using green made a company eco-friendly, these guys could have fixed the rainforest already.

Platform: WordPress

Rootsy

Rootsy has more pastels and grays to look at, but it’s mostly a brighter design. It’s also got a layout that works fantastically on larger screens, which I always like to see. As one-page portfolios go, this one feels downright elegant and sophisticated, while still managing to feel a bit techy.

Platform: Static Site

Kervin Tan

Kervin Tan’s portfolio has a lovely background animation, a good dark layout, and generally just looks pretty. Go look at the pretty thing.

Platform: Static Site

Isaac Powell

By contrast, Isaac Powell’s website is a lot brighter, though also very pretty. Go look at the other pretty thing. Well, I’ll admit that their approach to case studies is also pretty solid. They still let the images do most of the talking, but there’s a enough text to give you a feel for how they approach problems.

Platform: Statis Site

Ashley Sheekey

Ashley Sheekey’s portfolio looks less like a classic website, and more like a very elegant database. Nerd that I am, this does it for me. There’s something about that typography, grid-based organization, and the use of filters that just makes me happy.

Besides, when you have as much work to show off as Ashley does, filters just make sense. Someone please hold me down and tell me my own site doesn’t need filters. Oh, and do click on the “About” page, because I wasn’t kidding about that typography.

Platform: Static Site (I think)

Netbluez

Netbluez’ portfolio is modern, colorful, and it has lovely illustrations to boot. This one-pager keeps things mostly pretty simple, but then, I’m never going to get over how much my inner five-year-old likes space stuff. I love my minimalism, but I also like seeing designers go nuts with the illustration and graphics.

Platform: Static Site

Wesley van ‘t Hart

This portfolio, well… I’ve seen a lot of minimalism in my admittedly limited time, but not many go for this much white space unless they have no content to speak of. Here, the white space is embraced, loved, and very well-used to frame a simple—but by no means empty—portfolio.

Platform: Static Site

Guillame Colombel

Guillame Colombel’s portfolio goes for the slideshow on the home page as their primary method of showing off their work. In general, animation is used to show off the images, and keep things looking fancy. And well, it does look fancy.

Platform: Static Site

EVERGIB

Want to see what CSS Grid can do for you? Look no further than the layout over at EVERGIB, with its print-like feel, and generally great use of white space. It’s a simple site, but simplicity is hard, and I get excited for the future of the web every time I see something this well-built.

Platform: WordPress

Stereo

Stereo is a site with smooth animation, a beautiful palette, and gorgeous type. It is a bit odd though, to have the navigation menu on the home page scrolling across the screen marquee-style (you can drag it manually, too, to get the link you want). It’s not an approach I’d recommend to everyone, but it’s certainly striking… and usable enough for short menus.

Plus, they managed to work memes into their actual website design in a way that made sense and amused me. I’m genuinely impressed with that.

Platform: WordPress

Christian Coan

Christian Coan’s portfolio is another one that leans hard into the use of yellow, but the real star of the show is that typography. I’m not sure I would have put the actual work all the way at the bottom, myself, but this one-pager is just that pretty.

Platform: Static Site

Kev Adamson

Not gonna lie, I am in love with Kev Adamson’s site for nostalgia reasons. It’s a bit ’90s, a bit early 2000s, and all built with more modern development techniques. I’m never going to say that we should all go back to skeuomorphism, but maybe some of us could, sometimes. This Kev person certainly can, I think.

Plus, they’re an illustrator. The aesthetic totally works.

Platform: Custom CMS

Cam Dales

Cam Dales’ portfolio is a fine example of both highly modern minimalism, and one-column layouts. It stands as a reminder that sometimes, when you’ve got very simple content, there’s no need to over complicate your design.

Platform: Cargo Collective, Backdrop

Studio 313

Studio 313 is coming in hot with a modern aesthetic, fantastic type, gradients, and A PUG WITH SUNGLASSES IT’S SO CUTE I WANT HIM BUT THEY HAVE SO MANY HEALTH PROBLEMS… and I have cats anyway. They’d go full Garfield on that poor thing.

It could use a bit more text contrast in places, but overall this site has quirky personal touches all over it, while still maintaining a professional image. That’s an approach I can respect.

Platform: WordPress

Kévin Chassagne

Kévin Chassagne’s portfolio is living (or at least functioning) proof that you can have and elegant, fancy website with great-looking animation, that also works without JavaScript. Sure, you don’t see the fancy ripples in the background, but everything important and functional still functions.

Sure, it’s a one-page portfolio with links to external sites, but my point stands. Content can load without JS. Oh, and I should probably mention that the site has fairly sold typography, and that I adore the color scheme. In this age of digital screens, it’s literally easy on the eyes.

Platform: Static Site

And you know what? If I’m honest, a part of me will really miss this tarp fort when it’s gone. It’s a fort. In my grown up office. Everyone should have one.

Source

Every week users submit a lot of interesting stuff on our sister site Webdesigner News, highlighting great content from around the web that can be of interest to web designers.

The best way to keep track of all the great stories and news being posted is simply to check out the Webdesigner News site, however, in case you missed some here’s a quick and useful compilation of the most popular designer news that we curated from the past week.

Note that this is only a very small selection of the links that were posted, so don’t miss out and subscribe to our newsletter and follow the site daily for all the news.

Drama – The Ultimate All?in?one UI Design Tool

Amazon Didn’t Hire this Guy, but Still Used his Photo on their Jobs Website

8 Rebranding Examples Showing Superb Rebranding Strategy

17 Tips to Improve your Design Skills

Freelance Design Pricing Survey 2019

? on Margin

The Hidden Secrets of UX

This is What Photoshop was like in 1988

How to Design When the UI is not the Point

How to Structure an Effective Typographic Hierarchy

How to Build a High-Converting FAQ Page on your Website

Bruce Vansteenwinkel’s Graphic Design Revolves Around Personal Identity and Experience

Apple is Regressing to their 1990s Identity

The Best Newsletters to Subscribe to for a Frontend Developer

Tokyo Subway’s Humble Duct-tape Typographer

Website Optimization: 17 Tools to Help Improve your Website in 2019

Forget the Computer – Here’s Why You Should Write and Design by Hand

Figma Isn’t the Best Tool for Designers, it’s the Best Tool for Design

New Bill Would Ban Autoplay Videos and Endless Scrolling

Bringing CSS Grid to WordPress Layouts

Web Designer Job Description Written by Designers

Top Vue.js Open Source Projects

Free Font: Ugly Gerry

How to Take a Selfie, According to Rembrandt

Yours Truly, Freelance Design Advice

Want more? No problem! Keep track of top design news from around the web with Webdesigner News.

Source

I like the term Front-End Developer. It’s encapsulates the nature of your job if your concerns are:

• Building UIs for web browsers
• The spectrum of devices and platforms those web browsers run on
• The people who use those web browsers and related assistive technology

The breadth of knowledge for all-things front-end development has gotten super deep. I’ve found that front-end developers that have stretched themselves to the point they are thinking of themselves as full-stack developers more and more. I think that’s kinda cool and empowering, but it doesn’t mean that everyone needs to go that wide.

Brad Frost referred to sides of the spectrum as “back of the front” and “front of the front.” I once drew the line, in The Great Divide, as heavy JavaScript vs. not. These distinctions aren’t to divide people, but to acknowledge the spectrum and that there are people all over it.

In a new article called “Frontend Design, React, and a Bridge over the Great Divide,” Brad makes the point that the role of “Front-End Designer” exists on the spectrum right smack in the middle between design and development, where “development” refers to the back-end or deeper JavaScript stuff.

The jobs?

• Crafting semantic HTML markup
• Creating CSS code
• Authoring JavaScript that primarily manipulates objects in the DOM
• Testing across browsers and devices
• Optimizing the performance of front-end code
• Working with designers
• Working with back-end and application developers

That sounds like the “traditional” explanation of a front-end developer to me — if there is such a thing — but it makes sense to rename that role since front-end development is the term that got so wide.

Brad adds these responsibilties to the list:

• Create a library of presentational UI components
• Author and document a robust, intuitive component API for each presentational component
• Determine how flexible or rigid the component library should be
• Maintain the presentational components as a product

That’s where I think this metaphor comes in:

Me, Brad and a slew of you out there are front-end developers. We work in browsers and we care about the users and where and how they interact with those browsers. We do the things on Brad’s first list like craft HTML and CSS, work with designs and do testing. We share that common trunk of skills on the tree above.

But Brad is more of a systems designer than I am. His dot lands somewhere differently on that tree. I don’t know if I’m particularly skilled at anything, but my dot definitely falls elsewhere on that tree. Perhaps on an entirely different branch, as I quite like working with JavaScript tooling and logic and APIs and such. The bulk of Brad’s article is about React and finding a place in the realm of front-end development where the job isn’t ignoring React, but working with it in such a way that doesn’t mean every other aspect of development doesn’t have to come along for the ride.

The post Branching Out from the Great Divide appeared first on CSS-Tricks.

Building and maintaining your own website is a great idea. Not only do you own your platform, but you get to experiment with web technologies along the way. Recently, I dug into a concept called serverless functions, starting with my own website. I’d like to share the results and what I learned along the way, so you can get your hands dirty, too!

But first, a 1-minute intro to serverless functions

A serverless function (sometimes called a lambda function or cloud function) is a piece of code that you can write, host, and run independently of your website, app, or any other code. Despite the name, serverless functions do, indeed, run on a server; but it’s a server you don’t have to build or maintain. Serverless functions are exciting because they take a lot of the legwork out of making powerful, scalable, apps.

There’s lots of great information on serverless functions out there, and a great place to start is CSS Trick’s own guide: The Power of Serverless Front-End Developers.

The Challenge: Build a Mailing List Sign Up Form

I started my journey with a challenge: I wanted to have an email list sign-up form on my site. The rules are as follows:

• It should work without JavaScript. I’d like to see how much I can get by with just CSS and HTML. Progressive enhancements are OK.
• It shouldn’t require external dependencies. This is a learning project, so I want to write 100% of the code if possible.
• It should use serverless functions. Instead of sending data to my email list service client-side, let’s do it server(less)-side!

Meet the team: 11ty, Netlify, and Buttondown

My website is built using a static site framework called 11ty. 11ty allows me to write templates and components in HTML, so that’s how we’ll build our email form. (Chris recently wrote a great article about his experience with 11ty if you’re interested in learning more.)

The website is then deployed using a service called Netlify) and it is the key player on our team here: the point guard, the quarterback, the captain. That’s because Netlify has three features that work together to produce serverless excellence:

• Netlify can deploy automatically from a GitHub repo. This means I can write my code, create a pull request, and instantly see if my code works. While there are tools to test serverless functions locally, Netlify makes it super easy to test live.
• Netlify Forms handles any form submissions my site gets. This is one part of the serverless equation: instead of writing code to collect submissions, I’ll configure the HTML with a few simple attributes and let Netlify handle the rest.
• Netlify Functions allows me to take action with the data from my forms. I’ll write some code to send emails off to my email list provider, and tell Netlify when to run that code.

Finally, I’ll manage my email list with a service called Buttondown. It’s a no-frills email newsletter provider, with an easy-to-use API.

Bonus: for personal sites like mine, 11ty, Netlify, and Buttondown are free. You can’t beat that.

The form

The HTML for my email subscription form is very minimal, with a few extras for Netlify Forms to work.

<form class="email-form" name="newsletter" method="POST" data-netlify="true" netlify-honeypot="bot-field">
  <div hidden aria-hidden="true">
    <label>
      Don't fill this out if you're human: 
      <input name="bot-field" />
    </label>
  </div>
  <label for="email">Your email address</label>
  <div>
    <input type="email" name="email" placeholder="Email"  id="email" required />
    <button type="submit">Subscribe</button>
  </div>
</form>

First, I set the data-netlify attribute to true to tell Netlify to handle this form.

The first input in the form is named bot-field. This tricks robots into revealing themselves: I tell Netlify to watch for any suspicious submissions by setting the netlify-honeypot attribute to bot-field. I then hide the field from humans using the html hidden and aria-hidden values — users with and without assistive technology won’t be able to fill out the fake input.

If the form gets submitted with anything in the bot-field input, Netlify knows it’s coming from a robot, and ignores the input. In addition to this layer of protection, Netlify automatically filters suspicious submissions with Askimethttps://www.netlify.com/blog/2019/02/12/improved-netlify-forms-spam-filtering-using-akismet/). I don’t have to worry about spam!

The next input in the form is named email. This is where the email address goes! I’ve specified the input-type as email, and indicated that is required; this means that the browser will do all my validation for me, and won’t let users submit anything other than a valid email address.

Progressive enhancement with JavaScript

One neat feature of Netlify Forms is the ability to automatically redirect users to a “thank you” page when they submit a form. But ideally, I’d like to keep my users on the page. I wrote a short function to submit the form without a redirect.

const processForm = form => {
  const data = new FormData(form)
  data.append('form-name', 'newsletter');
  fetch('/', {
    method: 'POST',
    body: data,
  })
  .then(() => {
    form.innerHTML = `<div class="form--success">Almost there! Check your inbox for a confirmation e-mail.</div>`;
  })
  .catch(error => {
    form.innerHTML = `<div class="form--error">Error: ${error}</div>`;
  })
}

When I provide the content of my email form to this function via the form value, it submits the form using JavaScript’s built-in Fetch API. If the function was successful, it shows a pleasant message to the user. If the function hits a snag, it’ll tell my users that something went wrong.

This function is called whenever a user clicks the “submit” button on the form:

const emailForm = document.querySelector('.email-form')
if (emailForm) {
  emailForm.addEventListener('submit', e => {
    e.preventDefault();
    processForm(emailForm);
  })
}

This listener progressively enhances the default behavior of the form. This means that if the user has JavaScript disabled, the form still works!

The serverless function

Now that we have a working email submission form, it’s time to do some automation with a serverless function.

The way Netlify functions work is as follows:

1. Write the function in a JavaScript file in your project.
2. Tell Netlify where to look for your function via the netlify.toml file in your project.
3. Add any environment variables you’ll need via Netlify’s admin interface. An environment variable is something like an API key that you need to keep secret.

That’s it! The next time you deploy your site, the function will be ready to go.

The function for my site is going to be in the functions folder, so I have the following in my netlify.toml file:

[build]
  base = "."
  functions = "./functions"

Then, I’ll add a file in the functions folder called submission-created.js. It’s important to name the file submission-created so that Netlify knows to run it every time a new form submission occurs. A full list of events you can script against can be found in Netlify’s documentation. If you’ve correctly named and configured your function, you should see it on Netlify’s Functions dashboard:

The content in submission-created.js looks like this:

require('dotenv').config()
const fetch = require('node-fetch')
const { EMAIL_TOKEN } = process.env
exports.handler = async event => {
  const email = JSON.parse(event.body).payload.email
  console.log(`Recieved a submission: ${email}`)
  return fetch('https://api.buttondown.email/v1/subscribers', {
    method: 'POST',
    headers: {
      Authorization: `Token ${EMAIL_TOKEN}`,
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({ email }),
  })
    .then(response => response.json())
    .then(data => {
      console.log(`Submitted to Buttondown:n ${data}`)
    })
    .catch(error => ({ statusCode: 422, body: String(error) }))
}

Let’s look at this line-by-line.

Line 1 includes a library called dotenv. This will help me use environment variables. Environment variables are useful to hold information that I don’t want to make public, like an API key. If I’m running my project locally, I set my environment variables with a .env file in the repo, and make sure it’s listed my .gitignore file. In order to deploy on Netlify, I also set up environment variables in Netlify’s web interface.

On line 2, I add a small library called node-fetch. This allows me to use Javascript’s Fetch API in node, which is how we’ll send data to Buttondown. Netlify automatically includes this dependency, as long as it’s listed in my project’s package.json file.

On line 3, I import my API key from the environment variables object, process.env.

Line 4 is where the function is defined. The exports.handler value is where Netlify expects to find our function, so we define it there. The only input we’ll need is the event value, which will contain all of the data from the form submission.

After retrieving the email address from the event value using JSON.parse, I’m ready to send it off to Buttondown. Here’s where I use the node-fetch library I imported earlier: I send a POST request to https://api.buttondown.email/v1/subscribers, including my API key in the header. Buttondown’s API doesn’t have many features, so it doesn’t take long to read through the documentation if you’d like to learn more.

The body of my POST request consists of the email address we retrieved.

Then (using the neat .then() syntax), I collect the response from Buttondown’s server. I do this so I can diagnose any issues that are happening with the process — Netlify makes it easy to check your function’s logs, so use console.log often!

Deploying the function

Now that I’ve written my function, configured my netlify.toml file, and added my environment variables, everything is ready to go. Deploying is painless: just set up Netlify’s GitHub integration, and your function will be deployed when your project is pushed.

Netlify projects can also be tested locally using Netlify Dev. Depending on the complexity of your code, it can be faster to develop locally: just run npm i netlify -g, then netlify dev. Netlify Dev will use the netlify.toml file to configure and run the project locally, including any serverless functions. Neat, right? One caveat: Netlify Dev currently can’t trigger serverless functions on form submissions, so you’ll have to test that using preview builds.

An idea for the future

Buttondown’s API has a few possible responses when I submit a new email. For instance, if a user submits an email that’s already subscribed to the list, I’d love to be able to tell them as soon as they submit the form.

Conclusion

All in all, I only had to write about 50 lines of code to have a functional email newsletter sign-up form available on my website. I wrote it all in HTML, CSS, and JavaScript, without having to fret with the server side of the equation. The form handles spam, and my readers get a nice experience whether they have JavaScript enabled or not.

The post Using Netlify Forms and Netlify Functions to Build an Email Sign-Up Widget appeared first on CSS-Tricks.

Making Peace With The Feast Or Famine Of Freelancing

Liz Elcoate

2019-08-02T14:00:59+02:002019-08-02T19:05:59+00:00

It’s embarrassing to admit — particularly as I host a podcast about this very subject — but I dramatically dropped the ball when it came to booking in projects for this past spring. It just suddenly happened. I was finishing up two major contracts and had the next one in the pipeline. Then out of the blue that client postponed indefinitely and my two big contracts finished and I was left with no work — nothing, zip, zilch.

I’ve been here before for a week or two at a time so the panic didn’t kick in immediately. A week passed and I caught up on a few things and wrote a bit. I updated my portfolio and recorded some podcast episodes. When week two rolled around with no enquiries I put out a lazy tweet saying I was looking for work at the same time as contacting some previous clients and colleagues to see if they had anything that they might need me on. Still nothing. Then week three and week four came and went rapidly and by the end of the first month I was feeling physically ill with panic and worry.

The Panic

The worry wasn’t just financial – financially I was okay for a little while – it was also centred around what this lack of work said about my abilities and my worth.

“

By the beginning of month two I’d stopped sleeping. I was round robin-ing friends and colleagues in wild eyed desperation hoping that they might miraculously have an answer for me. I felt isolated and scared. I was also scattergun-ing job advertisements for anything — full time, contract, part time, freelance — something that would end the worry. And that was the strangest thing of all. The worry wasn’t just financial — financially I was okay for a little while — it was also centred around what this lack of work said about my abilities and my worth.

I just kept wondering why this had happened. I blamed Brexit, the patriarchy, my sex, my age, but more than anything I blamed myself and my obvious huge lack of talent. Why hadn’t I realised it before, why had no one else realised it before?

The Shame

While this inner turmoil was going on I was maintaining an aura of calm to the outside world as I didn’t want anyone to realise I had spectacularly failed. I didn’t want anyone to know how I’d gone from being a relatively successful designer — who’d worked on some brilliant projects with some brilliant people, who wrote about brand design, who hosted a successful podcast, who got asked to speak regularly on the subject of design — to being found out as a talentless fake. I can’t put into words how isolating this was. Feeling it was impossible to be honest about the position I was in to the majority of the people I cared about. I think a few people guessed and I was honest with others close to me but I was in a downward spiral of shame.

The Truth

As I always do when things are tough I decided honesty was the best policy. I thought I would write an article about the position I’d found myself in and the impact it was having on my mental health. I didn’t want to write a how-to-find work piece — there are a million of those — but a piece on the mental implications quiet times can have. Firstly though I needed to talk to other freelancers about their experiences and what better place to do that than on Twitter.

So I asked the question:

I’m writing a thing about freelancing and the feast or famine merry-go-round. If you’re a freelancer what’s the longest period you’ve been without work/new project coming in?

— Liz Elcoate (@liz_e) June 26, 2019

It’s fair to say the answers took me by surprise. Not only had other freelancers been through this but they had also had significant periods of time without work, it was far more common than I had realised.

Times varied from one month to six months to two years without paid work. Most common was around two to three months. But quite a few people also mentioned that they had sustained periods where they had work but it wasn’t enough to pay the bills (something I had definitely experienced). It was also suggested that the quiet times are seasonal which seemed obvious when mentioned but not something I’d really thought about until then.

One person who replied had had to go on benefits, a few others had taken full time roles (of course with the result being that the minute they accepted the position they had a deluge of enquiries from new clients). There were others who had had to use tax money to live on.

Some freelancers had taken on alternative types of creative work such as writing, journalism or creating their own courses.

The Fallout

It was clear that I was not alone and that this was a common pattern for a lot of people. The thing I was most concerned about though was how people coped with this from a mental health stand point. Did it affect other people as dramatically as it effected me?

So I asked Twitter, “What did you do to stay on top of the anxiety and worry when work was dead? Did you manage or did it impact your mental health?”

This to me was the most important question of all. Until this point I hadn’t realised that my self esteem is utterly tied up in my work, so when I’m busy I think “Brilliant, I must be pretty good at this” and when it went quiet I immediately thought “Everybody has realised I’m a talentless idiot”.

Worryingly it seems that I am not alone and this is an all too common feeling. Pavithra Muthalagan replied saying that

Sometimes I feel unemployed even when my bank account is telling me things are fine.

and

… There’s some ingrained mentality defining “success” in a extremely limited/limiting way… imposter syndrome is always hovering over my shoulder

I get this on all levels, it was exactly my experience. My bank account was okay but I felt profoundly unemployed and unemployable. This was far more worrying to me than just the financial impact. I was deeply disappointed that my self esteem and identity were so tied up in how many projects I had on.

Katherine Cory replied to my question about the impact these quiet periods have had on her mental health:

It definitely can. Just the worry of not being able to pay bills can be paralysing but then it becomes a downwards spiral. You take on work you probably wouldn’t normally (jobs with red flags) just to be able to pay the bills & then that impacts your mental health even more.

— Katherine Cory ? (@KatherineCory) June 26, 2019

This is a scenario I have also experienced in the past, taking on difficult clients for little money just to get some work in but then the whole project being a nightmare and ending up worse off financially and mentally.

The Positives

But it seems these difficult and stressful times can also be used for growth.

Ben Tallon wrote:

Early on, it used to savage me – self doubt, why is this happening etc. These days they often become the most valuable windows to develop/create the work that brings the good stuff in.

— Ben Tallon Illustration Studio (@BenTallon) June 26, 2019

I love this idea and Ben’s attitude. Viewing these times philosophically and finding value in them is a great way to make peace with the up and down nature of freelancing.

Jon Hicks shared his experience:

The anxiety can be crippling, and demotivates you from doing the things you enjoy that can actually help (in my case cycling). I rediscovered birding, and being out in nature has definitely been the best cure.

— Jon Hicks (@Hicksdesign) June 27, 2019

This was a common theme. Getting outside in nature and pursuing your passions or just having a ramble. Running and upping the time you exercise in quiet times was another great suggestion that several people made. Anything that takes you out of your head and into your body and reminds you of the world outside.

My biggest problem was obsessing over the lack of work and how this defined me as a designer and person. Matt Essam who is a business coach said that he works with clients on this and refers to it as a “scarcity” mindset. He wrote:

I’ve found the only cure to be massive, consistent action. Picking up the phone, going networking etc.

I completely agree with this point however I need to acknowledge it is more easily said than done, especially when your confidence is already rock bottom and you’re riddled with anxiety.

There were other great ideas too. Several people suggested alternative unpaid work — maybe writing or volunteering. Others used their time to learn something new — a coding language or design technique.

One particular reply that really stood out came from Jesse Gardner:

I actually started a little side project where I walked the streets of our nearest city and photographed/interviewed people. It brought me great joy in a time of potential anxiety/depression.

— Jesse Gardner (@plasticmind) June 27, 2019

Jesse started a project where he walked the streets of his neighbourhood photographing and interviewing people. There is a lot in this idea — not only does this kind of project keep you being creative and active, it also creates connection with other people, something fundamental to our mental well being. The completed project called Troy Stories: Stories from people of Troy, NY is inspiring and beautiful.

The Why

It’s clear from the response I had to my Twitter questions that at times freelancing can be high risk both financially and for our overall well-being. Three months, six months or even two years without work is devastating. Being in a position where you have to claim benefits or you’re forced to use up all of your carefully saved tax money can lead to crippling anxiety and dramatic changes in circumstances. So it begs the question — why do we do it?

Ok another freelance ques. Reading all your answers today about periods of uncertainty, mental health issues, financial challenges begs the question – why do we choose to be freelance? Is it worth it?

— Liz Elcoate (@liz_e) June 26, 2019

My particular reasons for freelancing were complex — family, commitments, location, flexibility. I’m a lone parent without financial support and I live in a location where there aren’t many design agencies — particularly ones who would let me work flexibly. But everyone has their own particular reasons that make the uncertainty of freelancing worthwhile.

Naomi Atkinson wrote:

Absolutely. It can be scary/strained at times.

But the creative freedom, flexibility of working hours (grabbing that walk/park bench to mull things over), control of working with who we want, and the ability to have as many side projects or businesses as we please… priceless ?

— Naomi Atkinson (@BrandedByNaomi) June 27, 2019

This next reply could have been written by me. For many people being able to get outside and walk their dog, and spend time with them is vital to their health and well-being.

I second Naomi. I’m a huge lover of having dogs in my life. Without being freelance/self employed I wouldn’t be able to have one. Can’t imagine a employer would be happy with me escaping for 2-3 hours midday to explore with the dog while making my hours up if needed on evenings!

— AnyForty™ (@AnyForty) June 27, 2019

Steve Morgan makes an excellent point that freelance gives him the opportunity to work with the type of clients he wants to work with in a way that he choses and in the hours that suit him. They’re some pretty compelling reasons.

I missed this tweet earlier. For me it’s:
– Having the freedom to pick-&-choose clients,
– Having the freedom to do the work the way *I* want to do it,
– Having the flexibility to work whenever I want, e.g. not feeling forced into Mon-Fri 9-5.

— Steve Morgan (@steviephil) June 26, 2019

For many, employment just isn’t an option as Katie Cory and Adam Greenough confirmed in their replies.

One word: necessity.

— Katherine Cory ? (@KatherineCory) June 26, 2019

Katie sums it up with one word: necessity. As someone who has ME or Chronic Fatigue Syndrome — Katie has to be able to look after her health, take days out and manage stress. Work when she can and rest when she needs to.

As someone receiving ongoing mental health treatment being freelance gives me freedom to be in control of my own workload and freedom to choose work that I want to do.

— Adam Greenough ???? (@adam_greenough) June 26, 2019

Adam’s reply shows that freelancing gives him the flexibility to be able to manage his mental health with ongoing treatment and operate his workload around that.

Personally, if I wanted to I am in a position to go back to being employed (my daughter is now at University) and I’d be lying if I said it wasn’t tempting after the last few months. The thought of a regular income and being able to focus on the creative side of my work without the worry sounds very appealing. But there are also all the things I love and take for granted about freelancing — having time to spend outside, structuring my day how I want, the feeling of accomplishment when a project launches, the autonomy — so for now I am still on this crazy freelance merry-go-round and I’ve learnt a lot over this difficult period.

The Feast Or Famine Toolkit

So what can we keep in our physical and mental tool kit for those inevitable times when work is quiet?

Don’t attach our value to our lack of work.

We must define success for ourselves. It is ludicrous to feel worthy when we have a lot of work on and unworthy when we don’t.

This is based on an outdated limiting model of what success should look like, created during and peddled since the industrial revolution. We are one of the first generations trying to do things differently and redefine “success”. Success that encompasses life and health as well as work, and we should be proud of ourselves for that.

Drop the scattergun approach to finding work.

Don’t do what I did and sit at your desk everyday for 12 hours applying for literally anything — full time jobs, contract, freelance, temping, dog walking. Whilst I think that action is important, it has to be structured. I had got to the point where I had lost direction and was just taking a “throw enough mud at the wall and something will stick” approach. I feel the only thing I was projecting to potential clients/employers at this point was an air of desperation.

I feel the only thing I was projecting to potential clients/employers at this point was an air of desperation.

“

Schedule a specific amount of time each day that is dedicated to finding work. Determine your desired market and then target them in a way that works best for you. One book I read during my time of quiet was Anti-Sell by Steve Morgan. It has some brilliant tips for finding work and generating sales for people who hate selling, like me.

Connect with people.

Kind people have saved my life and my sanity over this period. My mate Andy was always up for a dog walk and let me moan at him, my friends on Twitter were amazing (shout out to Dave Smyth and Naomi Atkinson). Try and attend events where you can meet up with other freelancers. Evenings like Design x Business are great because they remind you why you do what you do and are filled with other freelancers. Never underestimate the power of a good freelance podcast too, there are tons out there.

Keep learning and studying in your chosen field.

Use this time to read some of those design or CSS books you bought but never had time to look at. Think about doing a course — they don’t need to be expensive, places like Skillshare have an enormous choice of brilliant subjects.

Create time in your day to do the work you really want to do.

Set a design challenge (like we used to have in the old days). You could create a brief for a made up dream client and a problem they need solving. Then go to town! Enjoy it, be creative. Remember why you chose this career. It’ll be fun and you’ll have something of value to add to your portfolio.

The work you do while you procrastinate is probably the work you should be doing for the rest of your life.

— Jessica Hische

Get out in nature, it is life saving and it is free.

Studies have proven that nature-based activities have a direct and positive affect on mental health, anxiety and stress. Gardening, conservation and walking are all incredibly good for your mental and physical well-being. If you are able then exercising and running outside is also a great way to combat depression and help with sleeping.

Pursue your hobbies — creative or not.

This was a big one for me. I became locked into nothing but my inability to find work. Going back to the hobbies I enjoyed helped so much. They don’t have to be expensive. Films, cycling, painting, model making, knitting, woodwork, pottery, cooking — whatever takes your fancy. And never underestimate the joys of a good book for pure escapism.

Most importantly, don’t be ashamed.

As my conversation on twitter proved this happens to EVERYONE at some point or another. Even people who we assume are constantly over booked with work. Speak to people and be open and honest. It’s important to let people know you’re available for work. Constantly peddling this outward appearance of being super busy and successful can backfire and mean that people don’t approach you for a project as they assume you will be booked up. I know this has meant that I’ve missed out on exciting things in the past as potential clients assumed I’d be too busy.

Finally, try to grow a financial buffer.

I know, I know — easier said than done. If you’re reading this during a quiet period of work and you’re struggling financially then you may feel this is a case of closing the door after the horse has bolted. And if that is the case then try to focus on the points above and not too much on money. You’re more likely to get out of the dip sooner and with your mental health in better shape if you stay positive and don’t get in the scarcity mindset that I did. Money worries are so pervasive, I know whenever I experience them they can render me completely ineffectual.

With that in mind, when work has picked up again (which it will) start setting aside a little each month for a financial buffer. It is so easy to set up a savings account online. Sometimes you don’t even need to do that. Banks like Starling let you set up Goals on your current account which are like little individual pots that you can save money in and then just shift into your account when you need them. I was lucky I had some savings, other people tweeted stated that they used money they’d saved for tax (which can be a little risky depending on the time of year). The point is, that if you can have an account with a couple of months of money in then that will definitely ease the anxiety.

It is always worth remembering that a quiet period will pass, work will come back in — maybe even tomorrow. My biggest regret is that I let it affect my self esteem and self worth so much and made me doubt all of my accomplishments. It isn’t that your work is rubbish or everyone has finally found out you know nothing. Its just that at this particular moment in time you’ve not reached the people you need to reach or your services just aren’t needed. But rest assured they will be again very soon.

(yk, ra)

A design system helps everyone in your business to maintain brand consistency. It’s a collection of guidelines that explains how your branding assets should be used in everyday communication and marketing efforts.

A design system usually consists of general brand guidelines, color usage, brand tone and voice, typography, patterns, and any other visual element that helps convey your brand principles. Use them as an inspiration and a learning material to help you create a cohesive design system for your own business and brand.

1. Material

Material is a modern design system developed by Google. The design system itself is a treasure trove of useful guides and helpful tools that can be used by app developers to design an app that adheres to Material style as well as anyone else that wants to create a modern and trendy design. You will find a color palette picker, typography guidelines, icon design best practices, the ability to create a dark material theme, and much more.

2. Fluent

The Fluent design system was developed by Microsoft and it aims to create simplicity and coherence through open design systems developed for all the platforms. It focuses on uniting the fundamentals of principled design, tech innovation, and customer needs. The system is based around five key components: light, depth, motion, material, and scale. It also lays out guidelines for developing apps for Windows, Android, and iOS devices.

3. Shopify Polaris

Shopify Polaris was developed so all Shopify merchants could enjoy a great experience and benefit from a beautiful store design. This design system has guidelines for crafting every part of the Shopify experience; from admin screens down to product experience and various apps for Shopify. It covers content, components, design, and pattern guidelines. You will also find helpful links to third-party tools that can serve as an inspiration or help you learn how to effectively design for Shopify.

4. Mailchimp

Mailchimp is always cited as one of the best examples for a detailed company brand tone and voice guide but they also have a pretty thorough design system that is focused on a pattern library. You can find detailed guidelines for colors, buttons, alert messages, and every other aspect of their marketing platform. What’s more, the guidelines have plenty of examples and explanation that break down the most important concepts.

5. Atlassian

Atlassian is an Australian software company best known for their issue tracking application, Jira. Their design system describes not only how to use their logo, brand colors, fonts, and other design elements but they also let their brand personality shine through. With color names such as Dragon’s Blood and Herky Jerky, it’s easy to see why they describe their style as bold, optimistic, and practical with a wink.

6. Apple

Apple’s design system is meant to facilitate the design of apps and Apple’s suite of products but there’s plenty to learn and admire in their style guide. For starters, you can download the SF icons which are meant to complement the system font for Apple’s devices. You will also find guidelines and instructions for UX design, making apps more accessible, and accessories.

7. IBM Design Language

The guiding principle behind IBM’s design system is building bonds. Their design system goes beyond documenting their style guidelines and brand assets usage; they also share their philosophy as well as a gallery full of examples of their design system in action. The design system itself covers colors, typography, logos, icons, pictograms, photography, and motion.

8. AirBnB

AirBnB shares a comprehensive overview of their design system through a series of articles that go in-depth about the decisions behind each design choice as well as practical application examples and lessons learned from it. The main characteristic of their design language is that each component can live on its own as a separate entity and even evolve further while also being a part of a larger cohesive unit, comparing their design system to a living, breathing organism.

9. Uber

Uber describes its brand as a bold, new brand and their design system does an excellent job of portraying those principles. The design system covers the entirety of their brand visuals, from logo usage to color, composition, and even photography, and motion. Uber’s design system revolves around elegant simplicity and subtly recreating the famous U wherever possible.

10. Lightning Design System

Lastly, the Lightning Design System was developed by Salesforce as a way to keep everything unified and easy to access for anyone designing for the platform. Instead of focusing on pixels, the design system focuses on application logic, user experience, interactions, and flows. You will find in-depth guidelines and examples that cover not only design guidelines but also accessibility issues and component blueprints.

Source