Archive

Author Archive

Help Shape the Future of CSS-Tricks!

June 28th, 2022 No comments

Hey, so it’s been a minute since we announced that CSS-Tricks is now part of the DigitalOcean family. Things are pretty much business as usual and hopefully it feels that way to you, too. Now that we’re getting settled, we’re eager to start poking at the future of this site.

What sort of things are we poking at? Well, that’s where you come in. You see, there’s no shortage of ideas for CSS-Tricks, but we only want to work on things that continue to make CSS-Tricks one of the spots you come to time and again for all things front-end (including actual CSS tricks).

So, we put together a short little survey for you. Nothing crazy, just a few questions to help us vet those ideas and ultimately shape the future of CSS-Tricks.

Thanks so much for your help! And while I have you, thanks for continuing to hang with us. In the seven years I’ve been working here at CSS-Tricks, I know this site wouldn’t even be here today without y’all. Here’s to the future of CSS-Tricks and learning together!

CSS-Tricks Newsletter

Oh, and one more update for all of you who miss the newsletter: it will be back! But we had to drop a ton of you off the list (seriously, like 80% of all subscribers) to be compliant with legal stuff that’s over my head. No worries, though, because you can re-subscribe right down here with your email address.


Help Shape the Future of CSS-Tricks! originally published on CSS-Tricks. You should get the newsletter.

Categories: Designing, Others Tags:

3 Essential Design Trends, July 2022

June 27th, 2022 No comments

There are a lot of dark, retro vibes trending in website design right now. Although there are still some light projects popping up – including a pastel trend below – a lot of what we are seeing has a quite moody feel.

Here’s what’s trending in design this month.

Pastel Color Palettes

Let’s start with the trend with a lighter feel – pastel color palettes. While much of the web is trending toward dark aesthetics, there’s a segment that’s going in the exact opposite direction. Those sites feature soft, pastel color palettes that serve as a balance to all the super dark websites out there.

One thing about this website design trend is that it jumps out because of the stark contrast with all of the dark color palettes out there.

Each of these designs seems to use a pastel color palette as the basis for a background. A blur effect is paired with the colors to use pastels in a way that has a natural feel without appearing too feminine or light.

Robust uses blue and earth tones for a pastel background that feels modern and strong when paired with the hard-edged headline font.

Atmos uses a light pastel theme that takes you through the clouds with blues, and pinks, and purples. The pastel color scheme works well with the content which is airline-themed and makes you feel like you are flying through the sky. The colors are also soft enough to provide an easy reading experience.

Klezma is another design with the same pastel background with graduated color. The peach tones are fairly neutral and give plenty of room to the content.

Fonts with a Distinct Retro Look

Every one of these websites uses a typeface with a similar look and feel. This retro headline style is trending in a major way.

The best way to use this design element is for short words. This typeface design isn’t meant for a lot of words or when readability is a high priority.

This style is all about creating a specific kind of vibe for your website. The typefaces in this trend have a quite retro look and feel with an almost 1960s or ’70s feel to them. The rest of the design mimics this feel as well with colors and surrounding elements that contribute to the overall look.

A couple of common elements here include the use of all capitals font sets and letterforms that include odd shapes and lines.

Sretks not only uses a retro typeface but bends and twists it a bit too to add to the old-school feel. The background color helps add to the groovy vibe.

Barge 166 uses a retro typeface with the same design feel as the other examples but with a sharper, more serif-style edge. It’s easier to read but still carries a retro look and feel. Use a typeface similar to this if you want to capture that retro font style for a trending look while maintaining as much readability as possible. This option works best for multiple lines of words in a large size.

Picky Joe uses a retro typeface with rounded letters and a bit of a tilt to the characters to create a distinct feel. This is definitely a style that has to be used sparingly but can be a fun option, depending on the content of your website design.

Dark “Product” Sites

Dark mode design is probably the biggest design trend of 2022. Everywhere you look, websites are using dark color palettes and styles. Designers are creating more projects with a dark/light toggle so users can control their experience.

This visual concept is carried over to website designs that feature products as well. This is one of the last places the dark aesthetic had not touched. It’s been a bit of an unwritten rule that product images should be on white or light backgrounds to help make them easy to see and inspect digitally.

This design trend bucks that idea and features products on dark backgrounds – some with so little contrast that you almost have a hard time seeing the products. (Maybe these brands are banking on the idea that you already know them or are selling a lifestyle product.)

HQBC sells bike accessories such as glasses and helmets and the site has a sleek look and feel. You know it is cool from the second you land on it. The question though – is there enough visual information with the dark background to help you make a purchase? This design probably works because it only encourages you to find a physical location to make a purchase rather than buy online.

Doggystyle Shop also banks on the idea of you knowing the shopping experience or brand when you arrive. What the design does do though is put products on white backgrounds after you have clicked through far enough to make a commitment to buy. This helps you see the product well one final time before making a purchase. (The challenge is that it is three to four clicks in for the most part.)

FirstFit uses the design trend in a way that’s similar to the first example. They are showing a product, but not actually trying to convert sales on the website. Other links take you to more product information and content – using a lighter background and color scheme – and the dark background with the product serves mostly as a highly visual landing page that will help entice users to learn more. When it comes to dark mode and products, this seems to be the best option for most website designs.

Conclusion

The state of the world around us and our emotions can play hard into websites and other design projects. Some of the darker elements that are popular now may be a reflection of that or it could be more of a lean into dark mode schemes.

Either way, the web has a pretty dark feel right now.

Source

The post 3 Essential Design Trends, July 2022 first appeared on Webdesigner Depot.

Categories: Designing, Others Tags:

Great (and Free!) Web Development Books You Can Get Online

June 27th, 2022 No comments

Right after “Where is the best place to learn?” perhaps the most commonly asked question I hear from folks getting into code is “What web development books should I get to learn?” Well, consider this an answer to that question as I’ve curated a list of books that are not only great for getting into front-end development but also freely available.

Books on CSS

This is the bulk of where we’re going to hang out because, well, this is a site mostly about CSS!

The Magic of CSS by Adam Schwartz

  • Perfect for: Next steps in your CSS journey
  • Learning level: Intermediate
  • Requires: Some basic understanding of CSS

Adam Schwartz covers six CSS concepts in this book, including the box model, layout, tables, color, typography, and transitions. These are things even stump some seasoned CSSers, some of these concepts might be confusing. Adam has gone to a great length to demystify each.

In addition to the book being a great primer on complex CSS concepts, I love how each of the CSS properties mentioned throughout the book is clickable so you can always click on them to see how each is applied. There are many illustrative examples and recommendations for further reading, should you desire to learn more about each chapter.

I found the chapter on colors very interesting not only because it gets into the best practices for using color accessibly, but also because there’s super practical applications, like when Adam gets into using CSS to support an organization’s branding.

Resilient Web Design by Jeremy Keith

  • Perfect for: Developing strategies for writing code
  • Learning level: Intermediate
  • Requires: Some basic understanding of CSS

Straight from the introduction:

You won’t find any code in here to help you build better websites. But you will find ideas and approaches. Ideas are more resilient than code. I’ve tried to combine the most resilient ideas from the history of web design into an approach for building the websites of the future.

What Jeremy does so well is describing soft skills, like planning, outlining, and approaches for writing code. So, rather than dropping in code snippets throughout the book, what you’ll find are details about code strategies, such as progressive enhancement, deciding on what tooling to use, and the challenges of writing future-friendly code.

And for those of you who have not had the pleasure of listening to Jeremy narrate content (like he does in the Web History series), there’s an audio file available to download.

Beginning CSS Web Development: From Novice to Professional by Simon Collison

  • Perfect for: The fundamentals of CSS
  • Learning level: Absolute beginners
  • Requires: Nothing but time and motivation

It may be written in 2006, but Simon’s coverage of web standards and accessibility is timeless and relevant today. He provides an understanding of interoperability as well as approaches for building web applications, including the early planning phases that often go overlooked.

The book has two broad parts which are further divided into 16 chapters. Part 1 covers CSS topics, like working with text, links, lists, backgrounds, images, tables, and forms. It really doesn’t skimp on the details either.

Part 2 is all about layout, shedding light on usability and layout manipulation, plus a handy case study. The chapters are arranged in such a way that one chapter naturally flows into the next. Each chapter also contains a concluding section that highlights all the important concepts covered in the chapter.

Indeed, the book provides novice developers a solid background in CSS and helps them gradually with more advanced concepts. It will make your CSS journey easier.

Books on HTML & CSS

CSS and HTML are often taught together, which can be especially helpful when you’re writing your first lines of code and want to know how the two languages interact with one another.

Learn to Code HTML & CSS by Shay Howe

  • Perfect for: Starting your front-end journey
  • Learning level: Beginners
  • Requires: No prior experience at all

Shay refers to this book as a simple and comprehensive guide dedicated to helping beginners learn HTML and CSS. He does this by focusing on common elements of front-end design and development. Some of the lessons covered are Box Model, Positioning, Typography, Background and Gradients, Lists, Media, Forms, and Tables. In the first chapter *Building Your First Web Page, Shay analyzed the contents of a typical website including elements, attributes and setting up the HTML document structure, code validation, selectors and CSS resets. I find the book very instructive especially as it went beyond the surface to address many key concepts with code samples, which you can follow along.

One profound thing about this great book is that, Shay built a complete project from scratch throughout the 12 lessons and at the end of each lesson, he provided a summary and links to the current state of that website (so you can compare with yours if you follow along) and the source code at every stage of the lessons.

If you’re a learner who learns by doing, you will find this material very useful and by the time you’re done, you will have developed a multi page functional website.

An advanced sequel of the course is also available free via the same link.

HTML & CSS: Learn the Fundamentals in 7 Days by Michael Knapp

  • Perfect for: Starting your front-end journey
  • Learning level: Beginners
  • Requires: No prior experience at all

Can you possibly learn everything there is to know about the HTML and CSS in seven days? Probably not, but that’s why this 2017 book by Michael Knapp is focused straight on the fundamentals. Michael delves into a brief history lesson before launching into HTML and CSS structure, logic, and presentation. You’re going to get all up to speed to the point where you should feel pretty confident about putting a basic webpage together, plus a few extras along the way as the book touches on SEO and analytics.

The book is comprised of simple programs that you can run on your computer if you wish to follow along.

The ebook version is available for free on Apple Books, but there is a Kindle version as well if you already have a subscription there.

The Greatest CSS Tricks Vol. 1 by Chris Coyier

  • Perfect for: Marveling at what CSS can do
  • Learning level: Intermediate
  • Requires: Some CSS experience

Did you know that CSS-Tricks has a book on CSS too? It would be silly to leave that off this list because what you get is a collection of classic CSS trickery that’s explained by none other than Chris Coyier. In fact, Chris handpicked all of the examples covered in the book from his many, many (many!) years running this here site from the plentitude of tricks that have crossed his desk.

Each trick solves a particular pain point. For instance, the first “Pin Scrolling to Bottom” trickdemonstrates how the overflow-anchor CSS property can be used to create the same chat-like interface of a tool like Slack, where the screen is anchored at the bottom in a way that feels as though the page is scrolling for you as new items are added.

Books on process

Code is just as much about how we write code and collaborate on projects with others as it is about the actual code we write. The following books are great starting points for everything from planning and project management to communicating and collaborating with others.

Collaborate: Bring People Together Around Digital Projects by Ellen De Vries

  • Perfect for: Being a better collaborator
  • Learning level: N/A
  • Requires: An open mind to working well with others!

Ellen addresses something in this book that we all have to deal with: collaborating with others. And it’s no small deal — the book is divided into four parts that go super deep into things we can go to work well with others:

  • Know how to prepare the ground and create the right conditions for collaboration.
  • Nurture the group culture in the early stages of collaboration.
  • Maintain a healthy collaborative process.
  • Reap the rewards of a collaboration.

As a content strategist, Ellen has the right kind of experience to help anyone be part of a collaborative project, or get the most from a collaboration.

The Modern Web Design Process by webflow

  • Perfect for: Senior designers, project managers
  • Learning level: N/A
  • Requires: Some basic understanding of CSS

This free ebook features a seven-step design process that’s meant to help define the workflow for today’s brand of web design.

That includes:

  • Setting goals
  • Defining scope
  • Sitemaps and wireframes
  • Working with content
  • Handling visual elements
  • Testing
  • Shipping

Anyone starting a new design project or in the middle of a design project will find the invaluable insights throughout the book. And what’s most remarkable is how this is written in a way that almost feels as though you are being hand-held through an entire project from concept to completion.

Designing for the Web by Mark Boulton

  • Perfect for: Learning to work with clients
  • Learning level: Beginners
  • Requires: A genuine interest in design

It seems many organizations tackle design differently. But author Mark Boulton documents a thorough design workflow in Designing for the Web that de-mystifies many challenges and covers everything you need to know.

What’s unique about this book is that it’s really about work. Sure, there’s a bunch of hugely valuable information on design best practices for things like typography, color, and layout, but what you’re really going to take away from this book is how these fit into a design workflow. It teaches you how to research, the technologies we have to implement ideas, and ultimately, how to work with others as well as clients — perfect fodder for folks including design leads, project managers, freelancers, or anyone who’s involved in the project delivery process.

Learn Version Control with Git by Tower

  • Perfect for: Mastering Git
  • Learning level: All levels welcome
  • Requires: No prior knowledge at all

In this book, the team behind the popular Tower client for Git introduce learners to the crux of version control system using Git. Developers who work in teams will particularly find this very useful, as it helps in effectively collaborating with team members building different features of a project even when you’re thousands of miles apart. That said, it’s still really great for anyone who might be shy of the command line and wants to build confidence there.

And since the book is by the maker of an application that interacts with Git, you’re going to get a nice dose of using Tower as a GUI in addition to working directly on the command line.

So, whether it’s committing, branching, merging, pull requests, forking work, or handling merge conflicts, you’re going to get a whole lot from this book.

Books on JavaScript

Learning JavaScript always seems to be en vogue. In fact, Jason Rodriguez wrote about the JavaScript learning landscape in 2018 and provided a nice list of free books. Not too much has cropped up since then, but here are my thoughts on the following books.

Eloquent JavaScript by Marijn Haverbeke

  • Perfect for: Getting better at writing JavaScript
  • Learning level: Intermediate to seasoned developers
  • Requires: Prior JavaScript experience

Eloquent JavaScript really lives up to its name. Personally, I consider this one of the best-written JavaScript books I have ever come across. Marjin’s writing style is engaging, especially with how he introduces programming concepts and carries the reader along. In his words, the book is simply about instructing computers and making them do what you want them to do.

The book is a deep dive into JavaScript spread across three parts and 21 chapters. You’re going to read a bunch about basic programming concepts, such as values, types, operators and functions, to advanced concepts like regular expressions, modules, the DOM, and asynchronous programming. He starts every chapter with a somewhat philosophical quote to prepare the reader for what lies ahead and then dives straight into the topic.

Plus, there’s three projects to help you practice your newfound skills.

Understanding JavaScript Promises by Nicholas C. Zakas

  • Perfect for: Those who want to learn all about asynchronous programming with promises in JavaScript.
  • Learning level: Intermediate
  • Requires: Basic JavaScript chops

JavaScript promises were introduced in 2015 as part of the ES6 specification to handle asynchronous functions in JavaScript. According to MDN:

A promise is an object representing the eventual completion or failure of an asynchronous operation

In this 51-page book, Nicholas explains the concept of Promises over three chapters: Basics, Chaining Promises, and Working with Multiple Promises. Although the link to the book we’re providing is the free community version, the full version (available on Amazon) has two more chapters on Async Functions and Unhandled Rejection Tracking. Nicholas simplified the concept of Promises with several illustrations and examples. You will learn how to use then(), catch(), and finally() and understand how to chain multiple promises together. Nicholas also covers the assignment of rejection and settlement handlers. You may want to give the book a read to solidify your understanding of the topic.

Nicholas is a veteran JavaScript book author who has been writing about JavaScript for over 15 years. He brings his wealth of experience to bear in this book (just as he has in his work here at CSS-Tricks).

Speaking JavaScript by Alex Rauschmayer

  • Perfect for: Leveling up from beginning JavaScript
  • Learning level: Intermediate
  • Requires: Knowledge of object oriented programming

This book is presented in four chapters covering more than 30 topics. Here’s how it breaks down:

  1. The first chapter is a nice refresher on syntax, variable types, functions and exception handling.
  2. The second chapter offers historical perspective into JavaScript as a prelude for the types of features covered throughout the rest of the book.
  3. Chapter 3 is presented as more or less a reference book with short, clean examples.
  4. The final chapter outlines tips, tools and libraries to help write better JavaScript and follow best practices.

Secrets of the JavaScript Ninja by John Resig and Bear Bibeault

  • Perfect for: Creating a cross-browser JavaScript library from the ground up
  • Learning level: Intermediate
  • Requires: Some prior programming experience

There’s actually a newer edition of this book, but the 2012 edition is the one that’s free. Either way, it’s a good opportunity to learn from John Resig; you know, the guy who created jQuery.

The techniques covered here include closures, functions, the DOM, object orientation with prototypes, and cross-browser strategies. One nice perk is that each chapter is followed by a brief recap that’s perfect for a reference once you’ve finished the book.

Learning JavaScript Design Patterns by Addy Osmani

  • Perfect for: Learning to write more efficient JavaScript
  • Learning level: Intermediate
  • Requires: A decent level of JavaScript experience

The concept of design pattern refers to a reusable solution to a commonly recurring problem in application development. In this book, Addy Osmani covers the implementation of common design patterns using ES6 and beyond, as well as React-specific design patterns, which can be super handy when working on complex React apps where maintainability is a primary goal.

Some of the patterns covered include Singleton, Proxy, Provider, Prototype and Observer patterns. In some cases, Addy includes pros and cons of using some of these patterns and how they may affect the performance of your application.

You Don’t Know JS by Kyle Simpson

  • Perfect for: Mastering JavaScript
  • Learning level: Beginner
  • Requires: Little or no prior programming experience

While the title might be a bit provocative, what Kyle is implying here is that he writes this book assuming you have no prior JavaScript experience whatsoever.

Kyle begins starts by going through the rudiments of programming as seen through the lens of JavaScript. He then proceeds, in subsequent chapters, to introduce more advanced concepts like scope and closure, the this keyword, object prototypes, async, and performance.

There’s a lot of excellent details and explanations in here, and Kyle makes it super easy to understand by avoiding super technical jargon. There is also many exercises designed to reinforce your learning. This book will definitely get you up to speed with JavaScript. There’s second edition of the book in the works that you can track in GitHub.

The JavaScript Beginner’s Handbook by Flavio Copes

  • Perfect for: A beginner’s reference
  • Learning level: Just getting started
  • Requires: Email sign-up, maybe some prior experience

Flavio has put together a very useful JavaScript reference for those just starting out. It’s more like a quick reference guide than a textbook, so those of you just starting out might want to consider this as something you keep on your desk rather than something you sit with for long periods of time.

JavaScript for Data Science by Gans, Hodges & Wilson

  • Perfect for: Getting into data visualizations
  • Learning level: Intermediate to advanced
  • Requires: A decent handle on JavaScript

The authors cover core features of modern JavScript, including callbacks, promises, inheritance, objects and classes. They also get into testing using Mocha, React, and data vizualization, all of which are great for anyone looking to level up their code and how its written. The book doesn’t get as deep into many the concepts as some of the other books, but it really shines when it gets into data science.

The book uses Data-Forge; a JavaScript library designed for working with tabular data. There are numerous exercises to help readers keep up to speed with the subject of discussion. The last chapter also includes a capstone project that pulls everything together.

Wrapping up

I sure hope this collection of books help you, whether you’re taking your first steps in front-end web development, have a dozen years under or belt, or you fall somewhere in between. I know how hard it is to get into something new for the first time and the feeling of not knowing where to look. I also know how it feels to hit a plateau and need something to level me up. There should be something for everyone here, regardless of where you are in your learning journey.

And, hey, if you have any other books that are available to snag for free online, please share them in the comments! I bet we can get an even bigger list going.


Great (and Free!) Web Development Books You Can Get Online originally published on CSS-Tricks. You should get the newsletter.

Categories: Designing, Others Tags:

Popular Design News of the Week: June 20, 2022 – June 26, 2022

June 26th, 2022 No comments

Every day design fans submit incredible industry stories to our sister-site, Webdesigner News. Our colleagues sift through it, selecting the very best stories from the design, UX, tech, and development worlds and posting them live on the site.

The best way to keep up with the most important stories for web professionals is to subscribe to Webdesigner News or check out the site regularly. However, in case you missed a day this week, here’s a handy compilation of the top curated stories from the last seven days. Enjoy!

How to Create Simple CSS Grid System

Why are You Running?

15+ VS Code Extensions for Web Developers

10 of the Biggest SEO Mistakes [Infographic]

SVG Loading Animations

AI Pixel Art Human Face

VSLook – Customize the Look of your VSCode

One Line of CSS to Add Basic Dark/light Mode

Basicons – Basic Icons for Product Design & Development

Touch-first Cursor: Round Pointers Vs Mouse Arrows

7 UX Laws You’re Probably Getting Wrong

“Google” Programmers – How One Idiot Hired a Couple More Idiots

Bunny Fonts – Privacy Respecting Drop-in Replacement for Google Fonts

Source

The post Popular Design News of the Week: June 20, 2022 – June 26, 2022 first appeared on Webdesigner Depot.

Categories: Designing, Others Tags:

Single Element Loaders: The Bars

June 24th, 2022 No comments

We’ve looked at spinners. We’ve looked at dots. Now we’re going to tackle another common pattern for loaders: bars. And we’re going to do the same thing in this third article of the series as we have the others by making it with only one element and with flexible CSS that makes it easy to create variations.

Article series

Let’s start with not one, not two, but 20 examples of bar loaders.

CodePen Embed Fallback
CodePen Embed Fallback

What?! Are you going to detail each one of them? That’s too much for an article!

It might seem like that at first glance! But all of them rely on the same code structure and we only update a few values to create variations. That’s all the power of CSS. We don’t learn how to create one loader, but we learn different techniques that allow us to create as much loader as we want using merely the same code structure.

Let’s make some bars!

We start by defining the dimensions for them using width (or height) with aspect-ratio to maintain proportion:

.bars {
  width: 45px;
  aspect-ratio: 1;
}

We sort of “fake” three bars with a linear gradient on the background — very similar to how we created dot loaders in Part 2 of this series.

.bars {
  width: 45px;
  aspect-ratio: 1;
  --c: no-repeat linear-gradient(#000 0 0); /* we define the color here */
  background: 
    var(--c) 0%   50%,
    var(--c) 50%  50%,
    var(--c) 100% 50%;
  background-size: 20% 100%; /* 20% * (3 bars + 2 spaces) = 100% */
}

The above code will give us the following result:

Like the other articles in this series, we are going to deal with a lot of background trickery. So, if you ever feel like we’re jumping around too fast or feel you need a little more detail, please do check those out. You can also read my Stack Overflow answer where I give a detailed explanation on how all this works.

Animating the bars

We either animate the element’s size or position to create the bar loader. Let’s animate the size by defining the following animation keyframes:

@keyframes load {
  0%   { background-size: 20% 100%, 20% 100%, 20% 100%; }  /* 1 */
  33%  { background-size: 20% 10% , 20% 100%, 20% 100%; }  /* 2 */
  50%  { background-size: 20% 100%, 20% 10% , 20% 100%; }  /* 3 */
  66%  { background-size: 20% 100%, 20% 100%, 20% 10%;  }  /* 4 */
  100% { background-size: 20% 100%, 20% 100%, 20% 100%; }  /* 5 */
}

See what’s happening there? Between 0% and 100%, the animation changes the background-size of the element’s background gradient. Each keyframe sets three background sizes (one for each gradient).

And here’s what we get:

CodePen Embed Fallback

Can you start to imagine all the possible variations we can get by playing with different animation configurations for the sizes or the positions?

Let’s fix the size to 20% 50% and update the positions this time:

.loader {
  width: 45px;
  aspect-ratio: .75;
  --c: no-repeat linear-gradient(#000 0 0);
  background: 
    var(--c),
    var(--c),
    var(--c);
  background-size: 20% 50%;
  animation: load 1s infinite linear;
}
@keyframes load {
  0%   { background-position: 0% 100%, 50% 100%, 100% 100%; } /* 1 */
  20%  { background-position: 0% 50% , 50% 100%, 100% 100%; } /* 2 */
  40%  { background-position: 0% 0%  , 50% 50% , 100% 100%; } /* 3 */
  60%  { background-position: 0% 100%, 50% 0%  , 100% 50%;  } /* 4 */
  80%  { background-position: 0% 100%, 50% 100%, 100% 0%;   } /* 5 */ 
  100% { background-position: 0% 100%, 50% 100%, 100% 100%; } /* 6 */
}

…which gets us another loader!

CodePen Embed Fallback

You’ve probably got the trick by now. All you need is to define a timeline that you translate into a keyframe. By animating the size, the position — or both! — there’s an infinite number of loader possibilities at our fingertips.

And once we get comfortable with such a technique we can go further and use a more complex gradient to create even more loaders.

CodePen Embed Fallback

Expect for the last two examples in that demo, all of the bar loaders use the same underlying markup and styles and different combinations of animations. Open the code and try to visualize each frame independently; you’ll see how relatively trivial it is to make dozens — if not hundreds — of variations.

Getting fancy

Did you remember the mask trick we did with the dot loaders in the second article of this series? We can do the same here!

If we apply all the above logic inside the mask property we can use any background configuration to add a fancy coloration to our loaders.

Let’s take one demo and update it:

CodePen Embed Fallback

All I did is updating all the background-* with mask-* and I added a gradient coloration. As simple as that and yet we get another cool loader.

So there is no difference between the dots and the bars?

No difference! I wrote two different articles to cover as many examples as possible but in both, I am relying on the same techniques:

  1. Gradients to create the shapes (dots or bars or maybe something else)
  2. Animating background-size and/or background-position to create the loader animation
  3. Adding mask to add a touch of colors

Rounding the bars

Let’s try something different this time where we can round the edges of our bars.

CodePen Embed Fallback

Using one element and its ::before and ::after pseudos, we define three identical bars:

.loader {
  --s: 100px; /* control the size */

  display: grid;
  place-items: center;
  place-content: center;
  margin: 0 calc(var(--s) / 2); /* 50px */
}
.loader::before,
.loader::after {
  content: "";
  grid-area: 1/1;
}
.loader,
.loader::before,
.loader::after {
  height: var(--s);
  width: calc(var(--s) / 5); /* 20px */
  border-radius: var(--s);
  transform: translate(calc(var(--_i, 0) * 200%));
}
.loader::before { --_i: -1; }
.loader::after { --_i:  1; }

That gives us three bars, this time without relying on a linear gradient:

Now the trick is to fill in those bars with a lovely gradient. To simulate a continuous gradient, we need to play with background properties. In the above figure, the green area defines the area covered by the loader. That area should be the size of the gradient and, if we do the math, it’s equal to multiplying both sides labeled S in the diagram, or background-size: var(--s) var(--s).

Since our elements are individually placed, we need to update the position of the gradient inside each one to make sure all of them overlap. This way, we’re simulating one continuous gradient even though it’s really three of them.

For the main element (placed at the center), the background needs to be at the center. We use the following:

.loader {
  /* etc. */
  background: linear-gradient() 50% / var(--s) var(--s);
}

For the pseudo-element on the left, we need the background on the left

.loader::before {
  /* etc. */
  background: linear-gradient() 0% / var(--s) var(--s);
}

And for the pseudo on the right, the background needs to be positioned to the right:

.loader::after {
  background: linear-gradient() 100% / var(--s) var(--s);
}

Using the same CSS variable, --_i, that we used for the translate, we can write the code like this:

.loader {
  --s: 100px; /* control the size */
  --c: linear-gradient(/* etc. */); /* control the coloration */

  display: grid;
  place-items: center;
  place-content: center;
}
.loader::before,
.loader::after{
  content: "";
  grid-area: 1/1;
}
.loader,
.loader::before,
.loader::after{
  height: var(--s);
  width: calc(var(--s) / 5);
  border-radius: var(--s);
  background: var(--c) calc(50% + var(--_i, 0) * 50%) / var(--s) var(--s);
  transform: translate(calc(var(--_i, 0) * 200%));
}
.loader::before { --_i: -1; }
.loader::after  { --_i:  1; }

Now, all we have to do is to animate the height and add some delays! Here are three examples where all that’s different are the colors and sizes:

CodePen Embed Fallback

Wrapping up

I hope so far you are feeling super encouraged by all the powers you have to make complex-looking loading animations. All we need is one element, either gradients or pseudos to draw the bars, then some keyframes to move things around. That’s the entire recipe for getting an endless number of possibilities, so go out and starting cooking up some neat stuff!

Until the next article, I will leave you with a funny collection of loaders where I am combining the dots and the bars!

CodePen Embed Fallback
CodePen Embed Fallback

Article series


Single Element Loaders: The Bars originally published on CSS-Tricks. You should get the newsletter.

Categories: Designing, Others Tags:

How to Bootstrap a Web Design Business

June 22nd, 2022 No comments

Starting your own business is a process with a fair share of challenges. Even in the web design world, where you can potentially minimize costs by working from home and collaborating with freelance contractors, many expenses exist. 

To run a successful web design business, you need enough money to invest in everything from skilled colleagues to resources (like fonts and themes), software subscriptions, and technology tools. Finding a way to fund your company can be the most complicated part of ensuring its success.

For most new companies, the easiest option to generate opportunities is “bootstrapping.” Learning how to bootstrap a web design business means knowing how to bring your business to life with virtually no starting capital. 

Here’s how to get started.

What is Bootstrapping? 

Successful bootstrappers take an idea, such as creating a web design company and create a fantastic company without the backing of investors. It takes significant dedication, commitment, and single-mindedness to accomplish your goals, but some of the world’s greatest entrepreneurs, like Steve Jobs and Sam Walton, got their start this way. 

The term “bootstrapping” comes from the phrase “to pull yourself up by the bootstraps,” which indicates overcoming challenges on your own without any external support. 

The pros and cons of bootstrapping include:

Pros:

  • Full control: Bootstrapping allows entrepreneurs to retain full ownership over their business. Alternatively, engaging with investors means allowing other professionals to own a portion of your company or make a share of the decisions. 
  • Innovation: Business owners in a bootstrapping model are forced to invest in agile and innovative business models. You must develop processes to produce immediate, lasting cash flow from day one. 
  • Accomplishment: Building something from the ground up creates a powerful sense of satisfaction and accomplishment. 
  • Ownership: You won’t have to sell any equity in your business to other investors, which means you can benefit fully from the company as it grows.

Cons:

  • Risks: Self-funded businesses generally run out of funds faster and struggle to scale as quickly as other companies, limiting the brand’s ability to reach its potential.
  • Limited support: Traditional financing methods (like working with investors) also provide networking opportunities and support from specialists who want to see your company succeed. 
  • Pressure: Bootstrapping businesses need to be meticulous about everything from keeping books to making the right decisions for brand growth. 
  • Hard work: With limited resources, connections, and options, bootstrapping entrepreneurs need to work harder than most and take on more roles.

How to Bootstrap Your Web Design Business: Step by Step

Bootstrapping a web design business can be complicated, but it works for many companies if you follow the right strategy. The good news is web design companies generally don’t require as much initial capital as some other types of companies, like standard retail brands or companies with a need for brick and mortar offices.

However, there are still steps you’ll need to follow to ensure success.

Step 1: Source Some Initial Funds

While you might not work with investors when bootstrapping your web design business, you’ll still need some essential initial funds. To run a web design business, you won’t necessarily need a massive initial investment, but you will need something. 

To determine how much capital you need to raise from your income, savings, a line of credit, or other common bootstrapping sources, think about:

  • Where you’re going to work: The upfront costs of operating your own web design business will be a lot lower if you choose to work from home and with remote specialists. The less you have to pay for office space, the better.
  • Business fees: You may need to pay fees for registering your business name, hosting your own website for advertising, and dealing with any registration costs.
  • Equipment and software: Think about what you will use daily for web design. Subscription-based services like Adobe Creative Cloud can cost quite a bit to access. You’ll also need a good computer, and perhaps a tablet for sketching.

Step 2: Find a USP 

The easiest way to ensure a bootstrapped web design business is a success is to ensure you are offering specific clients something they genuinely need. In a service-based landscape like web design, you need to know what your customers want and offer something they can’t get elsewhere.

For instance, can you differentiate yourself from other web design companies by helping with modern trends like 360-degree video and XR-ready design? Can you build apps for companies from scratch and provide ongoing maintenance for the websites you make?

An excellent way to find your USP is to examine your competitors. Find out what other companies in your area are offering their customers, and listen to consumers in your industry when they talk about what they need from a website designer. 

Step 3: Choose a Cash Flow Optimized Model 

Since you’re relying only on your cash and the money you make from your web design business to fuel its growth, choosing a model optimized for consistent cash flow is essential. Bootstrapping a business often means you place most of the profit you gain from your company back into the development of the brand. 

With this in mind, consider how you’ll offer services and charge your customers. Are you going to ask for a portion of the fees up-front before starting a web design project? Can you provide your customers with subscription models to improve your revenue consistently?

For instance, you could provide help with ongoing maintenance, development, and support rather than just offering to build websites for companies. Another way to make additional income is with professional services, like consulting. 

Make sure there’s a market for the services you’ll offer before launching your business by examining the surrounding environments and services your competitors provide.

Step 4: Keep Costs Low and Profits High

Keeping costs low will be essential to ensuring your success when bootstrapping a business. Fortunately for web designers, it’s relatively easy to cut down on fees. For instance, WordPress is free to use for your development projects, making it an excellent choice for many web design strategies. 

You can also look into common free and cheap alternatives to web design tools online, like GIMP. Shop around for the things you will be paying ongoing fees with. For instance, it’s best to check out multiple vendors when looking for web hosting and marketing support. 

While keeping your costs low, it’s also essential to accelerate profits as much as possible. You can look for ways to boost customer retention by building stronger relationships with your clients and offering them deals on long-term subscriptions. 

If you have time outside of your web design business, you can also try taking on some side hustles. Options include:

  • Selling web design assets on sites like ThemeForest
  • Offering your services on a freelance basis with sites like Dribbble and Toptal
  • Designing and selling NFTs for the metaverse
  • Teaching web design or selling webinars

Step 5: Grow Cautiously

Finally, while the goal of successfully bootstrapping your web design business will be to grow as rapidly and consistently as possible, it’s important to be cautious. For instance, you’ll need to be able to afford the fees of every new designer you bring onto your team, so consider looking for freelancers and contractors rather than permanent hires.

Use organic channels for marketing your services, like blogging and content marketing which can help improve your SEO standing and attract attention among clients. Plus, encourage your customers to recommend your services to other brands. 

As new clients approach your business, ensure you only take on as many customers as you can reasonably handle. Compromising on quality will damage your relationships with customers and harm your reputation. 

Good Luck Bootstrapping Your Business

When you’re bootstrapping a business, you get the benefit of being able to eliminate any outside influences from your growth. You’re free to focus on building relationships with companies of your choice, and you get to make decisions about your growth. However, there are downsides, too, like significant stress and limited financial opportunities.

While bootstrapping your business is tough, if you manage to complete the process successfully, the results can be fantastic. 

 

Featured image via Unsplash.

Source

The post How to Bootstrap a Web Design Business first appeared on Webdesigner Depot.

Categories: Designing, Others Tags:

Different Ways to Write CSS in React

June 22nd, 2022 No comments

We’re all familiar with the standard way of linking up a stylesheet to the of an HTML doc, right? That’s just one of several ways we’re able to write CSS. But what does it look like to style things in a single-page application (SPA), say in a React project?

Turns out there are several ways to go about styling a React application. Some overlap with traditional styling, others not so much. But let’s count all the ways we can do it.

Importing external stylesheets

As the name suggests, React can import CSS files. The process is similar to how we link up CSS file in the HTML :

  1. Create a new CSS file in your project directory.
  2. Write CSS.
  3. Import it into the React file.

Like this:

import "./style.css";

That usually goes at the top of the file where other imports happen:

import { React } from "react";
import "./Components/css/App.css";
function App() {
  return (
    <div className="main">
    </div>
  );
}
export default App;

In this example, a CSS file is imported into an App.js from the /Components/css folder.

Write inline styles

You may be used to hearing that inline styling isn’t all that great for maintainability and whatnot, but there are definitely situations (here’s one!) where it makes sense. And maintainability is less of an issue in React, as the CSS often already sits inside the same file anyway.

This is a super simple example of inline styling in React:

<div className="main" style={{color:"red"}}>

A better approach, though, is to use objects:

  1. First, create an object that contains styles for different elements.
  2. Then add it to an element using the style attribute and then select the property to style.

Let’s see that in context:

import { React } from "react";
function App() {
  const styles = {
    main: {
      backgroundColor: "#f1f1f1",
      width: "100%",
    },
    inputText: {
      padding: "10px",
      color: "red",
    },
  };
  return (
    <div className="main" style={styles.main}>
      <input type="text" style={styles.inputText}></input>
    </div>
  );
}
export default App;

This example contains a styles object containing two more objects, one for the .main class and the other for a text input, which contain style rules similar to what we’d expect to see in an external stylesheet. Those objects are then applied to the style attribute of elements that are in the returned markup.

Note that curly brackets are used when referencing styles rather than the quotation marks we’d normally use in plain HTML.

Use CSS Modules

CSS Modules… what the heck happened to those, right? They have the benefit of locally scoped variables and can be used right alongside React. But what are they, again, exactly?

Quoting the repo’s documentation:

CSS Modules works by compiling individual CSS files into both CSS and data. The CSS output is normal, global CSS, which can be injected directly into the browser or concatenated together and written to a file for production use. The data is used to map the human-readable names you’ve used in the files to the globally-safe output CSS.

In simpler terms, CSS Modules allows us to use the same class name in multiple files without clashes since each class name is given a unique programmatic name. This is especially useful in larger applications. Every class name is scoped locally to the specific component in which it is being imported.

A CSS Module stylesheet is similar to a regular stylesheet, only with a different extension (e.g. styles.module.css). Here’s how they’re set up:

  1. Create a file with .module.css as the extension.
  2. Import that module into the React app (like we saw earlier)
  3. Add a className to an element or component and reference the particular style from the imported styles.

Super simple example:

/* styles.module.css */
.font {
  color: #f00;
  font-size: 20px;
}

import { React } from "react";
import styles from "./styles.module.css";
function App() {
  return (
    <h1 className={styles.heading}>Hello World</h1>
  );
}
export default App;

Use styled-components

Have you used styled-components? It’s quite popular and allows you to build custom components using actual CSS in your JavaScript. A styled-component is basically a React component with — get ready for it — styles. Some of the features include unique class names, dynamic styling and better management of the CSS as each component has its own separate styles.

Install the styled-components npm package in the command line:

npm install styled-components

Next up, import it into the React app:

import styled from 'styled-components'

Create a component and assign a styled property to it. Note the use of template literals denoted by backticks in the Wrapper object:

import { React } from "react";
import styled from "styled-components";
function App() {
  const Wrapper = styled.div`
    width: 100%;
    height: 100px;
    background-color: red;
    display: block;
  `;
  return <Wrapper />;
}
export default App;

The above Wrapper component will be rendered as a div that contains those styles.

Conditional styling

One of the advantages of styled-components is that the components themselves are functional, as in you can use props within the CSS. This opens the door up to conditional statements and changing styles based on a state or prop.

Here’s a demo showing that off:

Here, we are manipulating the div’s display property on the display state. This state is controlled by a button that toggles the div’s state when clicked. This, in turn, toggles between the styles of two different states.

In inline if statements, we use a ? instead of the usual if/else syntax. The else part is after the semicolon. And remember to always call or use the state after it has been initialized. In that last demo, for example, the state should be above the Wrapper component’s styles.

Happy React styling!

That’s a wrap, folks! We looked at a handful of different ways to write styles in a React application. And it’s not like one is any better than the rest; the approach you use depends on the situation, of course. Hopefully now you’ve got a good understanding of them and know that you have a bunch of tools in your React styling arsenal.


Different Ways to Write CSS in React originally published on CSS-Tricks. You should get the newsletter.

Categories: Designing, Others Tags:

7 UX Laws You’Re Probably Getting Wrong

June 20th, 2022 No comments

UX laws are an invaluable tool, providing guidelines for designers that ensure we don’t have to continually reinvent the wheel when crafting experiences for the web.

However, UX laws tend to be devised by scientists and psychologists — people who are more than comfortable with the exceptions and allowances of academic language. By the time they filter down to us in the trenches, the language has invariably been over-simplified, and the wisdom behind the idea diluted.

Today we’re going to look at seven well-known and commonly cited rules of UX design that too many designers get wrong.

1. Jakob’s Law

Jakob’s Law, named for the UX researcher Jakob Nielsen, states that users spend most of their time on other sites and as a result prefer sites that work the same way as the sites they already know.

Jakob’s Law has often been used to limit experimentation and encourage the adoption of common design patterns in the name of usability.

However, the word ‘prefer’ is hugely loaded. While it’s true that a user will more easily understand a familiar design pattern, they do not necessarily prefer familiar experiences.

It has been widely proved that new experiences boost our mood and that new experiences improve our memory. If your goal is a memorable site that leaves users with a positive impression, introducing novelty is a sound decision.

2. Goal Gradient Hypothesis

The Goal Gradient Hypothesis assumes that the closer users are to their goal, the more likely they are to complete it.

It’s an attractive theory, especially in e-commerce, where it is often used to justify simplifying the initial purchase process and postponing complexity to move users along the funnel — a typical example is leaving shipping charges until the final step.

However, anyone who has studied e-commerce analytics will know that cart abandonment is a huge issue. In North America, shopping cart abandonment is as high as 74%.

We don’t always know what the user’s goals are, and they may not match ours. It may be that users are treating your shopping cart as a bookmark feature, it may be that they have a last-minute change of heart, or they may be horrified by the shipping charges.

While providing a user with an indication of their progress is demonstrably helpful, artificially inflating their proximity to your preferred goal may actually hinder conversions.

3. Miller’s Law

Never in the whole of human history has any scientific statement been as misunderstood as Miller’s Law.

Miller’s Law states that an average person can only hold seven, plus or minus two (i.e., 5–9) items in their working memory. This has frequently been used to restrict UI navigation to no more than five items.

However, Miller’s Law does not apply to items being displayed. While it’s true that too many options can lead to choice paralysis, a human being is capable of considering more than nine different items.

Miller’s Law only applies to UI elements like carousels, which have been widely discredited for other reasons.

4. Aesthetic-Usability Effect

Edmund Burke once said, “Beauty is the promise of happiness.” That belief is central to the Aesthetic-Usability Effect, which posits that users expect aesthetically pleasing designs to be more usable.

Designers often use this as a justification for grey-on-grey text, slick animations, and minimal navigation.

Critical to understanding this is that just because users expect a design to be usable does not mean that it is or that they will find it so. Expectations can quickly be dashed, and disappointment often compounds negative experiences.

5. Peak-End Rule

The Peak-End Rule states that users judge an experience based on how they felt at the peak and the end, rather than an average of the experience.

Designers commonly use the Peak-End Rule to focus design resources on the primary goal of each experience (e.g. adding an item to a cart) and the closing experience (e.g. paying for the item).

However, while the Peak-End Law is perfectly valid, it cannot apply to open experiences like websites when it is impossible to identify a user’s starting or ending point.

Additionally, it is easy to see every interaction on a website as a peak and even easier to make assumptions as to which peak is most important. As such, while designing for peaks is attractive, it’s more important to design for exceptions.

6. Fitts’ Law

In the 1950s, Paul Fitts demonstrated that the distance to, and size of a target, affect the error rate of selecting that target. In other words, it’s harder to tap a small button and exponentially harder to tap a small button that is further away.

UX designers commonly apply this law when considering mobile breakpoints due to the relatively small viewport. However, mobile viewports tend not to be large enough for any distance to affect tap accuracy.

Fitts’ Law can be applied to desktop breakpoints, as the distances on a large monitor can be enough to have an impact. However, the majority of large viewports use a mouse, which allows for positional corrections before tapping.

Tappable targets should be large enough to be easily selected, spaced sufficiently, and tab-selection should be enabled. But distance has minimal impact on web design.

7. Occam’s Razor

No collection of UX laws would be complete without Occam’s Razor; unfortunately, this is another law that is commonly misapplied.

Occam’s Razor states that given any choice, the option with the least assumptions (note: not necessarily the simplest, as it is often misquoted) is the correct choice.

In an industry in which we have numerous options to test, measure, and analyze our user interfaces, you shouldn’t need to make assumptions. Even when we don’t need extensive UX testing, we can make decisions based on other designers’ findings.

Occam’s Razor is a classic design trap: the key to avoiding it is to recognize that it’s not your assumptions that matter, it’s the users’. As such, Occam’s Razor applies to a user’s experience, not a design process.

Source

The post 7 UX Laws You’Re Probably Getting Wrong first appeared on Webdesigner Depot.

Categories: Designing, Others Tags:

Popular Design News of the Week: June 13, 2022 – June 19, 2022

June 19th, 2022 No comments

Every day design fans submit incredible industry stories to our sister-site, Webdesigner News. Our colleagues sift through it, selecting the very best stories from the design, UX, tech, and development worlds and posting them live on the site.

The best way to keep up with the most important stories for web professionals is to subscribe to Webdesigner News or check out the site regularly. However, in case you missed a day this week, here’s a handy compilation of the top curated stories from the last seven days. Enjoy!

CSS.GUI – Open Source Visual Editor for CSS

Meet Web Push

Mobile-First CSS: Is it Time for a Rethink?

Web5 Is Here, Goodbye Web3? TBD

Nosignup.tools – Free Web Apps that Don’t Require Signup

Hello – The Best Search Engine for Software Developers

Exciting New Tools for Designers, June 2022

Adobe Plans to Make Photoshop on the Web Free to Everyone

8 CSS Snippets that Demonstrate the Power of Shadow Effects

Tango 2.0 – Automatically Generate Step-by-step Guides for your Team

Understanding the Template Element in HTML

Random Emoji Generator – Have Fun with Emojis

Source

The post Popular Design News of the Week: June 13, 2022 – June 19, 2022 first appeared on Webdesigner Depot.

Categories: Designing, Others Tags:

How To Become a Designer Who Codes

June 17th, 2022 No comments

The topic of whether or not designers should learn to code is probably the most debated one in the industry. There are numerous forum threads and blog posts supporting both sides. Additionally, the steps to actually learning how to code are not always so clear. In this featured post we will run through some important steps to becoming a designer who codes along with the many benefits of combining your design skills with coding knowledge.

Introduction

Some say that a professional should have one focus only and not spread themselves too thin. Their main argument is – a jack of all trades can’t have a deep understanding of every field they operate in, so they can’t be a true professional.

Others believe that in the modern world, a multi-skilled professional is a huge benefit for business and there shouldn’t be any obstacles for a designer to get as many valuable skills as they deem necessary. After all, knowledge is power.

In this neverending debate on whether a designer should be able to code, we are definitely on the “yes” side. In this post, we will share our arguments on why being a designer who codes is great for everyone involved and give you a few tips on how to become one.

What kind of designers would benefit from learning programming languages or coding? If you are a web designer, UX designer, game designer, or app designer, then you will definitely expand your ability to design and open additional opportunities in your current vocation.

How to become a designer who codes

Learning to code might seem like an impossible thing to do. The code looks gibberish, and the task of learning to understand it seems boring and tedious. Yes, it won’t be a walk in the park. But it won’t be as difficult as you imagine. With enough motivation, you can master the basics of any programming language you choose in mere weeks.

Image credit: Adobe Stock

6 Tips On How to Learn Coding For Designers:

1. Choose the language your developer uses for your current project

There’s no sense in learning a programming language if you can’t apply it in your daily routine. Besides, when you have a professional developer sitting next to you can ask questions and get useful tips. 

2. Study every day from reputable sources

Just like your design education, learning to code will take a little sacrifice and effort. But then again, all good things usually do, right?

You don’t have to spend 8 hours on it every day. But investing 30 minutes into your coding studies each day will do wonders for your skill level. Consistency is the key. 

Additionally, you don’t have to spend a ton of money. We understand that sometimes the budget for learning extra design skills can be non-existent, especially if you’re between projects. Having affordable and free options is what we will touch on, but that will be in the section below entitled – What programming languages can I benefit from?

3. Practice more

Coding is a practical skill. Learning the theory without applying it won’t do anything for you. So make sure to practice. Select courses that offer an 80 to 20 practice-theory ratio and don’t skip the exercises.

4. Study and analyze the professionally written code

“Hacking” someone else’s code is a brilliant learning technique. You can reverse engineer the project you are designing for, test each line, and get a clear picture of how it works. The best thing here is – you can ask the developer who works on it to explain the things you can’t grasp on your own.

5. Follow the communities

The greatest thing about the coding industry is the community each programming language has around it. There are numerous forums, Reddit threads, video blogs, and websites where you can find like-minded people to share knowledge and ask questions.

The communities are where you find the best tips, code snippets, new techniques, and other immensely useful info. Besides, if you are stuck, you can always ask for help. Here are the most popular websites where you can find coding communities:

6. Reward yourself

As we’ve already established – learning to code is not a walk in the park, especially when you are a designer with a full-time job or a freelancer overwhelmed with projects. There will be times when you get frustrated and lose motivation. That’s inevitable. Rewarding yourself for successfully completing milestones will make the learning process much more enjoyable. And it is guaranteed to keep up the motivation!

Why learning to code is a good idea for designers

The design industry is ever-evolving and competitive. In this environment, a professional has to maintain their edge, become more agile, strive to progress, and seek to innovate. The alternative is stagnation.

Why learning to code is a good idea for designers

Image credit: Adobe Stock

Top 4 Reasons Designers Should Consider Learning How to Code:

1. Learning to code will enrich your designs

As a professional designer, you know that the best solutions are found when you think outside the box. To be able to do that, you need to learn new things, get new experiences, and broaden your horizons.

Imagine if you could view things from a different perspective. Through the eyes of a developer, for example. Learning to think like a frontend developer will allow you to discover fresh solutions to old problems and consider your designs more objectively.

2. You will become a better collaborator

Understanding the scope of work and specifications is not everything the designer role requires. Well, at least not for the truly good designers. The truly good designers are always great empaths. They empathize with the end-users and create better designs. They empathize with their colleagues and collaborate better. This empathy allows them to create better products and move forward in their careers.

With the key developer skills under your belt, you will be able to speak with the developers in their language. This will allow you to easily overcome the common discrepancy between what the designer imagined and what the developer can actually deliver.

Even if you don’t code on a daily basis, understanding the technical possibilities, you can design knowing exactly how your vision will be implemented. You can work faster and collaborate better.

3. You will be able to streamline and automate processes

The modern world of technology and innovation is very fast-paced. If you work slowly and do everything by hand, you are doing it wrong.

With the coding skills in your arsenal, you can write your own scripts to automate the most tedious and repetitive tasks.

4. You will have a competitive advantage in the job market

Having a unique and desired skillset in your industry will help you to stand out among the crowd and give you a competitive edge which ultimately provides more opportunities.

Design and development are becoming more and more intertwined each year. Adding coding to your CV will allow you to meet this market demand and get an advantage over those designers who can boast only the industry-specific skills and tools like Photoshop, Sketch, and Figma. Besides, multi-skilled designers stand out as versatile team players.

What programming languages can I benefit from?

The choice of which programming language to learn largely depends on the industry you’re currently working in. Obviously, a web designer would need a different set of skills compared to an app designer or a game designer.

What programming languages can I benefit from?

Image credit: Adobe Stock

How many programming languages are there?

Around the globe, there are literally hundreds of different types of programming languages and as we stated, they are industry-specific. So, for our web design friends, you should stick with HTML, CSS, JavaScript, and Java.

The Programming Languages You Should Start With

HTML and CSS

HTML and CSS are the building materials for websites. HTML provides the structure, and CSS tells the browsers how the structure and its elements should look. You do not need to become a full-fledged coder. Learning both languages to the extent of being able to code a basic one-page website will be enough. Though if you often practice and put some effort into it, you will be able to code up any web design you can imagine soon enough.

These languages are rather easy to learn, especially on the basic level. There are plenty of free and premium online courses you can study at. There’s a great introductory course at Khan Academy and a pretty easy, but very informative workshop from LearnUX.io we recommend. These two resources should be enough for you to get started.

JavaScript

JavaScript is the programming language that makes your websites interactive. It’s responsible for the way the elements react to the users’ actions. UX designers can use JavaScript for prototyping. 

You can start learning JavaScript basics at Khan academy. And if you’ve already mastered the basics of HTML and CSS, you can continue your education with the course on building websites with all three languages at Pluralsight.

Java

Java is an object-oriented, general-purpose language. It is one of those programming languages that can be found everywhere, from your favorite mobile app to the microwave oven in your kitchen. Learning Java basics will allow you to understand how the apps and products you design can function and which of your ideas can and can’t be fulfilled. Of course, if you put a lot of time and effort into studying, you will be able to code apps and mobile games yourself. But for your day-to-day design work, the basic understanding and the ability to read the code will be enough.

Java is considered to be one of the easiest programming languages to master. You can learn to code with CodeGym, and the 1200 practical Java exercises the course offers.

Wrapping Up

Becoming a designer who codes is not an easy path, but the benefits are definitely worth the time and effort you’ll put into it. Choose the right language, apply the knowledge you get in your day-to-day tasks, and you will see how your design career sky-rockets!

The post How To Become a Designer Who Codes appeared first on Web Design Dev.


How To Become a Designer Who Codes was first posted on June 17, 2022 at 12:07 pm.
©2022 “Web Design Dev“. Use of this feed is for personal non-commercial use only. If you are not reading this article in your feed reader, then the site is guilty of copyright infringement. Please contact me at jc@ventureupwards.com

Categories: Others, Programming Tags: