Age-Old Principles Behind the Design Sprint

December 23, 2019 • Age-Old, principles

The Design Sprint is a process that, for good reason, is becoming more and more popular. It’s easy to implement, it’s precise, and it yields actionable results. However, as with any process, it’s a set of preset rules which, by definition, means its applicability is fairly limited. In this article, we’ll look at some of the principles that stand behind it, and understand how they can be helpful in more ways than one.

Before we dive into the specifics of the topic, it’s important to understand the difference between a rule and a principle.

A rule is an explicit instruction on what one can or cannot do in a given situation. It requires a set of criteria to be met for it to be applicable. This is why rules can be beaten. I’m sure you’ve seen your fair share of lawyer movies in which they skillfully work around certain rules by reframing the situation. This is the reason why most rules become outdated and need to be changed, or need more and more rules to complement them over time.

A principle is a universal truth. It can be applied to a multitude of situations, leaving room for ones’ logic, knowledge, common sense, and wisdom to decide what is the best course of action.

In conclusion, a few principles can often be a substitute for a thick rule book and provide clarity in grey areas where it’s uncertain how some rules might apply.

If rules can guide a blindfolded man through an obstacle course, principles help take the blindfold off.

With this in mind, let’s look at some of the principles behind the Design Sprint.

When discussing a problem, ideally everyone is given a chance to be heard and understood, and each idea is given enough time to be considered, analyzed and decided on. In reality, the dynamics of human interaction in a group make this a lot harder. Naturally, some members of the group who are more vocal, or who have more experience in the topic being discussed will polarize the discussion. Unfortunately, that doesn’t mean they’ll always have the best solutions. Sometimes the best ideas come from the most unexpected places — team members that have never worked on the problem before or don’t have a relevant background.

How do you make sure everyone has had the chance to present their idea? Here are some ideas that might help:

Avoid open group discussions. Clearly define the problem, communicate it to everyone, and let them work on it individually before presenting their ideas to the rest of the team.
Give everyone a crash course into how to ideate fast and avoid getting lost in the details.
Create a relaxed atmosphere and assure everyone they won’t be judged. Sometimes initial ideas that don’t work can light the creative spark and generate other ideas that will.
Have each team member present their idea while everyone else takes note of the pros and cons of each. In the end, compare notes, remove duplicate pros or cons, and decide on a solution.

Verbal communication is fairly low-bandwidth. We often need a lot of words to describe what we’re thinking accurately enough. This is why well-written contracts and legal documents are overly descriptive and specific (think wording like “including, but not limited to…”). That’s also why there’s the saying “A picture is worth a thousand words”. Human sight is much higher bandwidth than hearing. We can process a level of detail about things we see that would take us a long time to describe verbally, even if the individual has the best vocabulary to do so. Why am I mentioning this? In the world of IM chat and acronyms(IMHO?…), we tend to try to convey our thoughts in as few words as possible, and we assume that our listeners quickly understand and contextualize what we’re talking about. That never happens.

When simply talking about solutions it often doesn’t work great. Words are misinterpreted, patience starts wearing thin, and frustration builds shortly after. This all can be avoided by using visual means of communication. Give concrete examples — images, prototypes, napkin sketches, etc. The closer to your vision and the less explaining, the better. Do not assume others understand what you’re referring to, even if they say so. You may be thinking of similar yet different things. It’s always better if you can point to something concrete and say “There. I want that.”

Testing early and often will help your product stay on track and avoid endless debates. No amount of expertise or ideation can replace direct customer feedback. A few reasons teams are reluctant to test could be: the design is not refined enough, it’s expensive, it’s time-consuming, or not knowing who the target user is and how to find them. These might sound like valid concerns, but the good news is all these issues can be addressed with little to no financial investments and a reasonable time commitment, while the upside is considerable. Jules Cheung goes in-depth on this topic in her article How to do user testing on a budget. Go check it out.

It’s worth also mentioning an unexpected side-effect of long, heated debates, which unfortunately is sometimes overlooked by team managers: the negative impact on team morale and the state of “flow”. What do I mean by this? A good team works like a well-oiled machine — there’s good team chemistry, everyone is doing their thing and respecting each other, and tasks are getting done. Disagreement about product decisions that happen publicly (eg: in a brainstorming meeting) is like throwing sand in that metaphorical machine. The effects might not be obvious instantly, but you’ll notice things slowing down… suddenly there’s more friction between team members, they’re less involved, they start simply “doing their job”, and not thinking about the bigger picture and the good of the company.

In a perfect world, every team member would agree with everyone else, whether we’re talking about process or product decisions. In reality that rarely happens especially when it comes to large teams. It’s not uncommon for teams to get frustrated and confused because there’s no clear decision-maker for every aspect of the production process. In my experience so far, this seems to be missing in a lot of companies, especially startups, or even established companies in which the founders are actively involved in the product design process. The truth is people will not always agree, and when it’s crunch time, the ONLY way things will move forward efficiently is to have a decision-maker. In a lot of startups, the issue will often end up being elevated to the C-level, where the founders or managers debate and decide the solution, which not might be ideal for a bunch of reasons we won’t get into now.

What can companies do? It’s vital to have decision-makers with clearly-defined areas of responsibility and trust them to make the right decisions. When everyone understands what’s expected of them, and have ownership over their piece of the system, things will run a lot smoother — team members will be aware of their responsibilities and their boundaries, stay in their lane and be focused on making sure their part is done well. This is not to say that collaboration should be discouraged. On the contrary, I’d argue that in such an environment collaboration will run smoother because teammates are not stepping on each others’ toes.

Avoid group brainstorming and instead, devise a solution where everyone can work on the problem individually and later present and discuss their solution. Create a safe space and take time to consider the merits of every idea. When presenting a solution, show something concrete and give as much context as possible. When your team will inevitably be locked in a long debate whether a solution is good or not, find a way to test it quickly and cheaply (there’s always a way). Finally, when results are in, to avoid endless opinionated debates, make sure there’s a decision-maker that can move things forward.

Do the marketing principles we learned in college still apply today?

October 21, 2019 • Marketing, principles

Most of the entrepreneurs and even online marketers that I know are self-taught. These days, you don’t have to get a degree in marketing to be successful in business. All it takes is gumption and a willingness to figure things out on your own.

However, there’s a downside to self-instruction. When everything you’ve learned comes from a problem you’ve had to solve, sometimes you miss out on the bigger picture. You get so stuck in the details that you never learn some of the broader principles that might have helped you avoid some of those problems in the first place.

Of course, on the flip side of that, there’s the argument that many of the principles taught in marketing courses don’t apply anymore. The world has changed a lot since the Mad Men era when marketing theory was first formalized – do the same theories still apply to the world of online marketing?

To answer that question, let’s take a look at one of the oldest ideas in classic marketing – the four Ps of marketing – and see whether or not they are still a meaningful part of modern marketing.

Where did the 4 Ps come from?

The four Ps have their roots in the 1960s. Back in 1964, Neil Borden wrote an article entitled “The Concept of the Marketing Mix.” In this article, he talked about a variety of “ingredients” that marketers have to combine to create a solid marketing strategy.

In Borden’s original article, there are a lot of ingredients: branding, distribution, product, planning, display, price, advertising, packaging, promotions, and more.

While it was all good stuff, it was kind of hard to remember.

Since marketers love to make things simple and memorable, it wasn’t long until E. Jerome McCarthy boiled Borden’s list of ingredients down into four basic elements that he called “the four Ps of marketing:”

Product
Price
Promotion
Place

To put it simply, the four Ps of marketing are a simple way to keep track of all the different ingredients that you need to blend to create an effective marketing mix. The specific flavors and ratios of these ingredients will vary depending on your business, but any good marketing plan should account for each of these elements.

Do the 4 Ps still apply?

Now, that all sounds good on paper, but it doesn’t really answer our core question: do the four Ps work in a digital world? So, let’s take a look at each of the four Ps and see if they still apply in the world of online marketing.

Product

As many marketers have discovered, your marketing is only as good as your product (or service). You can’t sell snake oil for very long before you get run out of town.

In today’s online world, it’s even harder to sell poor products or services because the internet facilitates instantaneous communication. It only takes a few unhappy customers to destroy your business.

As a result, the product or service you’re trying to sell matters more than ever in the digital era. It needs to be something that people truly want. Otherwise, your whole marketing strategy is built on a house of cards.

To make matters worse, the internet makes it easy to find alternatives to your product or service. Most of the time, the competition is only a few clicks away, so if anything, your product matters more in the digital age than ever.

Price

On the flip side of the value/cost equation, we have price. Even if people love your product or service, if it isn’t priced appropriately, it will be hard to market.

However, the price you can charge is directly related to your product’s perceived value. This is why Apple can charge so much for their products. From an objective standpoint, Apple products aren’t technically any better than PC products. However, Apple products come with all sorts of added non-technical value: fashionability, prestige, ease-of-use, etc.

As a result, Apple products are perceived to be much more valuable than their PC counterparts (by their fanbase, at least) and Apple can sell them for a much higher price.

Where did all of that perceived value come from? Good marketing, mostly.

In any case, picking the right price point is an important part of marketing. The price your business is charging needs to be consistent with the value people associate with what you’re selling. Good marketing can increase the perceived value of your goods or services, but even Apple has a limit to how much they can charge – your price point needs to match your customers’ needs and expectations.

Here again, the internet has increased the importance of your price. It’s incredibly easy to find your competitors, so if the perceived value of your products or services doesn’t outweigh your price, they’ll go somewhere else.

Place

If you’re like most online marketers and entrepreneurs, when you think “place” or “placement,” the first thing that comes to mind is ad placements. As digital marketers, we spend a lot of time fighting for ad placement and position, so it’s a natural assumption.

However, in the four Ps of marketing, “place” actually refers to distribution, not advertising placement. How do you actually get your products or services to your customers?

Moreso than any of the other Ps, the internet has changed how marketers approach “place.” Back in the 60s, there was no such thing as online shopping. People bought products at a brick-and-mortar store or possibly via a mail-in catalog.

Today, however, people do an enormous amount of research and actual purchasing online. All kinds of goods and service transactions take place without the customers ever setting foot in a physical location.

As a result, figuring out your distribution strategy is possibly even more important today than in the past. Take dropshipping, for example. Many drop shippers have successfully marketed their products online, only to have to shut down their otherwise “successful” businesses due to distribution problems.

On the flip side, one of Amazon’s strongest marketing points is its distribution network. By offering rapid shipping with easy returns, they are able to sell the same products at similar or higher prices and still win over a massive share of the market.

Promotion

Finally, we have the P that most people spend the majority of their time on promotion. In fact, when most people think about creating a marketing plan, they don’t think much about product, price and place.

Instead, they think about how they are going to get their products or services in front of people. They’re focused almost entirely on promotion.

And it makes sense. Thanks to the internet, marketers have more marketing channels at their disposal than ever. Between classic marketing channels such as TV spots, direct mail, PR marketing, etc and online channels like paid search, social media, influencer marketing, and email, businesses have an almost overwhelming number of ways to reach their target market.

However, all of these various options make picking the right channels especially important. Most businesses don’t have unlimited marketing resources, so they need to focus their time and efforts on the right promotion channels.

The trick here is to figure out the best way to access your target market. If you’re marketing to Millennial mothers, your best shot is probably to focus on Facebook and Instagram. For the retired parents of those Millennials, however, you may get better results from paid search or direct mail ads.

Overall, the digital age has amplified the importance of your promotion strategy. However, while it’s tempting to focus entirely on the promotion aspect of your marketing mix, if you ignore the other Ps, you can inadvertently set yourself up for failure – not success.

The 4 Ps in the online world

As a general rule, the internet has made the four Ps more important, not less. However, the world of online marketing comes with a variety of new challenges that Neil Borden never could have imagined.

For example, buying things online can be scary for your customers. There’s always a risk associated with making a purchase, but when your customers can see, touch, smell, or try on what they’re buying, it’s a lot easier to feel confident in what they’re buying.

Similarly, with a services provider, meeting and directly interacting with the people who will be providing the services goes a long way towards building trust. Online, you simply don’t get that face-to-face experience.

As a result, businesses now have to incorporate building trust in an online medium into their overall marketing strategy.

In addition, because companies often never spend time directly interacting with their customers, they often end up focusing more on the technical details of their marketing approach than the actual people they’re marketing to. The end result? Campaigns that look great on paper…and don’t produce results.

Conclusion

While the four Ps appear to have withstood the test of time, if anything, the digital age has amplified their importance and made their application even more complicated.

The problem is, however, that most businesses don’t think about their marketing in terms of their overall marketing mix. Instead, marketing has become synonymous with promotion. As a result, many companies get overly focused on promoting their business and forget how important price, product and place actually are.

So, do the four Ps still apply? Absolutely. In fact, if anything, figuring out how to apply the four Ps to your business can be the secret to outmaneuvering your competition. After all, if you can incorporate the four Ps more effectively than your competitors, you have the foundation for a marketing strategy that will help you win online.

Opinions expressed in this article are those of the guest author and not necessarily Marketing Land. Staff authors are listed here.

About The Author

Jacob is passionate entrepreneur on a mission to grow businesses using PPC & CRO. As the Founder & CEO of Disruptive Advertising, Jacob has developed an award-winning and world-class organization that has now helped over 2,000 businesses grow their online revenue. Connect with him on Twitter.

5 design principles for building your first portfolio

October 21, 2019 • Design, principles

In this post, experienced Product Designer Alex Muench guides designers through the portfolio building process on the basis of five design principles. Read on to learn the dos and don’ts around crafting an effective design portfolio.

As a designer, the centerpiece of your professional presence online is your portfolio website. Most often, a portfolio takes the form of a personal website with a collection of work samples and case studies. It should highlight your skills while also introducing yourself to your audience — potential clients, future employers, or just your followers — both professionally and personally. It’s a space to share what you’ve accomplished, and, if you’re looking for a new role, what you hope to accomplish next. A great portfolio doesn’t only show your work; it tells a story about how you conceptualize and execute solutions to design problems.

While online portfolios can be unique and personal, they should always have a purpose with specific goals. This could include any number of the following:

You’re a new design graduate searching for your first role
You’re looking to take on freelance design work and attract your first clients
You just want to build a space to document your design projects
You want to grow your professional online presence and build a following of your work

At the beginning of your career, don’t worry about having the perfect design portfolio. Nobody does. It’s far more important to take your first steps rather than stress about having a portfolio that doesn’t look “professional” enough. Most importantly, don’t compare yourself to others. You are on your own path. Others might be in a different stage of their career. Focus on yourself and what you want to achieve.

As a Product Designer at Doist, I’ve had the pleasure of helping to recruit and hire for various design roles. From looking through hundreds of portfolios from designers at all levels, I’ve observed a few common threads amongst the truly effective portfolios that showcase a designer’s skills and thought process in a beautiful and compelling way.

It’s important to note that my advice is subjective and comes from my personal experience in this industry as a graphic, communication, and, most recently, a product designer. Take all this with a grain of salt. Don’t apply any advice blindly. Hone in on what you feel is right for you. As you know as a designer: Rules are meant to be broken.

Row 1:
Nadia Chaudhry,
Rachel Beiser,
Dario Figueroa.

1. Strategize first, write second, design last

As a designer, it’s natural to want to jump into the “designing” part of a project. Excitement builds as you think about cool design ideas and how your site should look. You feel the itch in your fingers to fire up your design program. You may have already jumped into the design phase, polishing small details like changing the color palette or choosing another typeface.

But when you’re first building a design portfolio, these shouldn’t be your first steps. Keep those ideas for later!

Like every problem you try to solve as a designer, write down the core purpose of your portfolio first, what information you need to include to achieve your purpose, and how exactly you want to express your story — visually and in writing. Only then should you start digging into the design details.

Like every problem you try to solve as a designer, write down the core purpose of your portfolio first…

Set some time aside “deep work” . Disable notifications, use the app in full screen, put your phone away, and find a calm and distraction-free place where you can think and write. I like to use a minimalistic text editor like the Notes app on my phone — that way, I’m not tempted to start designing too soon. I often tune on some background music that gives me the energy to just write away. Use the predefined text styles of Dropbox Paper or the Apple Notes app to add a little bit of hierarchy for your thoughts. Handwriting and sketching on paper or your iPad works too. I recommend Procreate or Flow by Moleskine.

Quickly brainstorm the message you want to convey with your design portfolio. Then sort those thoughts by priority:

What’s the goal of your portfolio?
Who is your audience? Potential clients? Future employers? Yourself? List out the most relevant information these people want to know or read about you. Generally, this includes a combination of things:

2930d851b12b31809086bf72f74d1418

Who are you as a designer? What should people know about me? Describe yourself and the work you do (and want to do in the future)
First impressions count. Which message do you want to convey with your portfolio? How can you transform this into your design? If someone looks at your website, how can they identify you are a product designer, for example?
Which projects and work samples do you want to include? Sort them by type of work, time, or just put your most impressive project at the top.
How should people reach out to me, if at all, and why?

After you have your initial thoughts down, start refining, rearranging, and adding structure to the information you want to convey. For designers, it can be tempting to jump from “executing mode” to “polishing mode” and skip planning mode altogether. It’s like the writing process; write first, edit later.

2. Make your website simple, scannable, & accessible

Once you get to the design phase, keep the viewer’s experience top-of-mind. During your research, you probably saw websites that inspired you and design trends you want to incorporate in your portfolio. Do this in moderation. Good portfolios are firstly well organized and readable, not visually overwhelming. The following are some good rules of thumb to follow:

Make it skimmable — Keep in mind some visitors will only skim your site. Make it easy to scan your work and don’t overcomplicate things. Break text in multiple short paragraphs, add headings and explainer images, include rough sketches and other visuals that show your process.

Include a clearly accessible navigation — In most cases, your menu should include:

Your work: Including samples, your projects, client quotes, case studies
About me: A place where visitors can read more about you as a person, what you currently do, your future ambitions, your hobbies, anything that’s interesting about you. Feel free to add a photo to make things more personal.
Contact: A way to reach out to you. Here make it clear what you offer or why people should contact you. This highly depends on the goal of your portfolio.
Start page: A link to the start page, could be called “Home” or just your name in the top left. An easy way for viewers to get back to the beginning.

It’s tempting to get clever with your navigation options, but the people looking at your portfolio will expect certain navigation patterns. “Getting creative” with how you organize information and name options will likely just make it harder for them to find what they’re looking for.

Keep animations, fonts, and colors simple — If you want to be on the safe side, use a basic typography setting with fonts that render well on any browser and colors that meet the minimum contrast ratio defined by W3C , the World Wide Web Consortium.

You may also want to spice up your site with fading animations. While they might be visually interesting, they are inaccessible for people struggling with vestibular disorders of the inner ear that affect “as many as 35% of adults aged forty years or older in the US”:

“[Vestibular disorders] often manifest as motion sensitivity on the web. Animations, unconventional scrolling, and parallax backgrounds can cause headaches, dizziness, and nausea, sometimes lasting long after the animation is over.” — Excerpt From: Laura Kalbag’s Accessibility for Everyone book. 

Design (and test) with mobile in mind: Think about how people access your site nowadays. For example on mobile where scrolling is different than on the web. Here, custom scrolling animations are often just distracting and a pain to use. Similarly, a paragraph that looks reasonable on desktop can be overwhelmingly long and hard to read on mobile. Make sure you’re testing your web designs for smaller screens, or even design for mobile-first.

You don’t need a personal logo: Of course, if you’re a graphic designer who focuses on branding, a logo is a great opportunity for you to show your skills right off the bat. If you are a product, UX, or web designer, it’s better to focus on presenting your skillset in the content of your portfolio. In most cases, it’s enough to write your name in your header or introduction text in a font of your choosing. Ideally, in a weight of the same typography family that you use for any other text on your site.

Use a no-code portfolio builder: Once you have your content planned and written, there are lots of services that make your life easier by producing a portfolio website without code. Check out WordPress, Webflow, Squarespace, Cargo, Tumblr, or use the Dribbble showcase. They let you browse templates to start, drag and drop images, bring your design to life quite quickly and don’t require much coding knowledge. Focus on what you do best, the design. If you want to present prototypes you can embed Marvel or Invision prototypes for example.

Overall, apply design elements thoughtfully and respect everyone who might be clicking the link to your portfolio. Make it work, make it readable, then make it pretty. Keep the focus on your work and the story you want to convey to the viewer.

Row 1:
Pradeep Kumar ✏️,
Yannic Gräser,
Dante Lex.

3. Focus on the projects you loved working on most, even if it’s just two

If you are a new designer, you most likely don’t have much work in your repertoire (yet!). Don’t worry. Everybody starts out like this. It’s more important to show your approach and how you think than to have pages and pages of work examples.

University projects are as valuable as client work or side projects. If you are proud of it, use it. Was it a small client but you enjoyed solving this particular problem for them and the results? Perfect. Put it in your portfolio. Have volunteer work or even a real-world problem you mocked up solutions for on your own? Both are equally valid when you’re starting out.

Just because you are starting out, doesn’t mean the content you showcase is not valuable. Be confident in your work so far.

Even for folks with lots of design samples to choose from, I recommend only including the design projects in your portfolio that show exactly the type of work that you would like to continue doing. Exclude any previous projects that you didn’t enjoy or any disciplines that you don’t want to continue doing.

And if you are still figuring out your desired design discipline and are exploring different fields, documenting that UX exercise or illustration project you did for a class is an amazing exercise in self-reflection and discovery.

Just because you are starting out, doesn’t mean the content you showcase is not valuable. Be confident in your work so far.

4. Write about your work process in detail

Make sure you’re getting the most out of each portfolio piece, especially if you’re short on pieces. People who want to work with you want to know how you approached the problem. It shows extra care if you add what you loved and learned about this project and what you would do differently now. We all know we have to make tradeoffs due to deadlines — talk about any constraints or problems you had to navigate.

A good structure to follow when writing a case study is:

Problem
Goal
Hypothesis
Your process
The solution
Your conclusion
Your learnings

Most importantly, write about your role in the project. Too often designers just objectively present the design work. You might know which pixel and icon you designed, but how are others able to judge which piece of work or design decision has been created or influenced by you? Be precise and ideally make this point clear right at the beginning of the case study.

Unsure whether you should include work that you influenced but didn’t directly design? Simply own your part of the project and describe it from your perspective. Were you solely responsible for the research, UX wireframing, interface design, or leading and organizing the team?

If you are unsure about showing work that you influenced in one way or another but didn’t directly design, emphasize your role and show your process from your perspective. Make it clear from the start that you are a problem solver, leader, researcher, etc or all of the previously mentioned. For example: Add wireframe sketches, photos of your team discussions on whiteboards, a project plan you put together, customer surveys you designed and ran — anything that showcases how you think, collaborate, or problem-solve.

5. Collect and document your work while it’s fresh

Out of sight out of mind: We are all familiar with this phenomenon. There’s always a next project that needs our attention, and you may not even be thinking about applying for a new job or attracting new clients. But the best time to organize and write about your work is when it’s still fresh in your mind.

Write case studies directly after you finished a project or shipped a feature. It helps you recap what you accomplished, document your process, and reflect on what you’ve learned.

Always start with writing: Goal, problem, hypothesis, your process, the solution, your conclusion, your learnings.
Visualize design details with videos/demos/short animations (keep the original design files at hand). Take screenshots of the finished work on various devices. You never know when you need it to present in mockups or future presentations.
Use a cloud folder to store your written and visual documentation (a text doc and design files/exported images).
Commit to posting on Dribbble regularly.

Bottom line: Treat your portfolio like the living document it is and invest the time right after you’ve completed a project you’re proud of. Your future self will thank you because forgetting details is easy when you wait for too long.

Remember that we all start small. We learn and evolve as we go. The more work you put out into the world, the more you’ll know what you want to put into your portfolio. Starting simple is just fine.

About the author:
Alex Muench is a Product Designer at Doist. He works remotely from Germany on the Todoist and Twist apps, using design to help people organize life and communicate more mindfully at work.

For more portfolio resources on the blog, get product design portfolio advice from a hiring manager, and read up on how to create a UX portfolio from scratch.

Find more Process stories on our blog Courtside.
Have a suggestion? Contact stories@dribbble.com.

8 Essential Principles of Good Business Card Design

October 17, 2019 • Essential, principles

A good business card design is underpinned by eight essential principles. A business card needs to serve a purpose and be useful as a marketing tool. A business card may be the first impression many of your clients have of your business.

Continue reading below to find out the principles of good business card design.

Use High-Quality Card

There are so many choices of cards, that you may be tempted to opt for something cheaper to save money. Don’t fall into this trap. A business card may be one of the first impressions someone receives of your business, and a cheap business card simply won’t get you, customers.

Order card samples from New Era Print Solutions to see which one you prefer.

Font Size

Be aware that a business card is really small, but your font should be legible. If your font is too small, the business cards are futile.

Font Type

The style and type of font you use are just as important. Some fonts look terrible in a smaller size.

The thickness of the individual letters is another point to consider. If they are too thin, the writing will not be legible. If they are too thick, the letters tend to blur together when reading them.

Less is More

Don’t overcrowd your business card with text and graphics. They should be very simple, easy to read and minimalist with graphic use. Make proper use of white space so that people can easily skim over the card and get all the relevant information in a few seconds.

Be Industry Relevant

The design of your business card will depend heavily on the type of industry you are in. For example, a legal firm should have a professional and simple design.

A baker or artist could get away with having a more creative business card. Know your target audience and design your card to fit their needs.

Content Hierarchy

This is very important on a business card. The order of your content should be considered, and important information should be prioritized first.

If you know your target audience is mainly on social media, then the name of your business and then your social accounts followed by your contact phone number would be an appropriate order.

If your target audience is more likely to pick up the phone, then put your phone number after the business name or logo.

Stay on Brand

If you already have a website and social accounts, be consistent with your branding and match your business cards to them. Your logo should be the same throughout.

Proof Read

This goes without saying, but we really have to say it. The last thing you want to find on 2000 business cards is a typo or spelling mistake. Proofread your business cards and get several different people to review them also.

It’s better to find a mistake before they are printed.

Create a Good Business Card Design Today

So there you have it, our top eight essentials to create a good business card design. Don’t forget to make your business card industry-focused and on-brand.

For more information on graphic design, take a look at the other articles on our blog.

Improve your CSS with these 5 principles

October 8, 2019 • improve, principles

Adrian Bece

Oct 7・5 min read

Writing CSS is really simple and straightforward, so why is there a need for principles and best-practices while writing CSS?

As the project scope increases and as the number of people working on the project increases, the problems become more and more apparent and can cause serious issues down the line. Fixing issues may become harder, duplicated code, complex override chains and use of !important, leftover / unused code (removed elements or features), code that is hard to read, etc.

Writing CSS at a professional level will make the CSS code more maintainable, extensible, understandable and cleaner. We’re going to look at the five simple and very effective principles that will take your CSS to the next level.

Naming principle

“There are only two hard things in Computer Science: cache invalidation and naming things.” — Phil Karlton

Properly naming and structuring your CSS selectors is the first step to making your CSS more readable, structured and cleaner. Establishing rules and constraints in your naming convention makes your code standardized, robust and easier to understand.

This is why concepts like BEM (Block-Element-Modifier), SMACSS (Scalable and Modular Architecture for CSS) and OOCSS (Object Oriented CSS) are popular among many frontend developers.

Low specificity principle

Overriding CSS properties is very useful, but things can go out of hand pretty quickly on more complex projects. Overriding chains can get really long and complex, you might be forced to use !important to solve the specificity issue and you could get really easily lost when debugging or adding new features.

/* Low-specificity selector */
.card {}

/* High-specificity selectors */
.card .title {}

.blog-list .card img {}

.blog-list .card.featured .title {}

#js-blog-list .blog-list .card img {}

Browser and specificity

One of the benefits of following the low specificity principle is performance. Browsers parse the CSS from right to left.

Let’s take a look at the following example:

Browsers parse the selector like this:

Find all img elements on the page
Keep selected elements that are the descendants of .card class
Keep selected elements that are the descendant of .blog-list class

You can see how high-specificity selectors impact performance, especially when we need to globally select generic elements like div, img, li, etc.

Using the same level of specificity

By using low specificity CSS class selectors in combination with BEM or one of the other naming principles mentioned in the previous section, we can create a performant, flexible and understandable code.

Why use CSS classes? We want to keep the same level of specificity, stay flexible and be able to target multiple elements. Element selectors and id selectors do not offer the flexibility that we need.

Let’s rewrite our previous example using BEM and keeping specificity low.

/* Low-specificity selector */
.card {}

/* Fixed high-specificity selectors */
.card__title {}

.blogList__image {}

.blogList__title--featured {}

.blogList__img--special {}

You can see how these selectors are simple, understandable and can be easily overridden and extended if needed. And by keeping them low-level (a single class), we are guaranteed optimal performance and flexibility.

DRY Principle

DRY (Don’t repeat yourself) principle can be also applied to CSS. Duplicated code in CSS can cause code bloat, unnecessary overrides, reduce maintainability, etc. This issue can be fixed by structuring the code appropriately and having high-quality documentation.

Storybook is a great free tool that enables you to create an overview of available frontend components and write high-quality documentation.

/* Without DRY Princple */
.warningStatus {
  padding: 0.5rem;
  font-weight: bold;
  color: #eba834;
}

.errorStatus {
  padding: 0.5rem;
  font-weight: bold;
  color: #eb3d34;
}

.form-errorStatus {
  padding: 0.5rem 0 0 0;
  font-weight: bold;
  color: #eb3d34;
}

Let’s refactor the code so it follows the DRY principle.

/* With DRY Principle */
.status {
  padding: 0.5rem;
  font-weight: bold;
}

.status--warning {
  color: #eba834;
}

.status--error {
  color: #eb3d34;
}

.form__status {
  padding: 0.5rem 0 0 0;
}

Single responsibility principle

By using the single responsibility principle in our CSS, we can ensure that our CSS classes are easily extended and overriden. Let’s take a look at the following example.

.button {
  padding: 1rem 2rem;
  font-size: 2rem;
  border-radius: 0.2rem;
  background-color: #eb4934;
  color: #fff;
  font-weight: bold;
}

.button--secondary {
  border-radius: 0;
  font-size: 1rem;
  background-color: #888;
}

We can see that if we want to extend .button class with .button--secondary, we are doing lots of overrides to achieve what we need, when we only want to apply a different background color and keep the default styles.

The problem is that our .button class is having several roles:

Sets layout (padding)
Sets typography (font-size,font-weight)
Sets presentation (color,background-color, border-radius)

this makes our CSS classes very hard to extend and combine with other CSS classes. By keeping this in mind, let’s use BEM and OOCSS to improve our CSS.

/* Shared styles */
.button {
  padding: 1rem 2rem;
  font-weight: bold;
  color: #fff;
}

/* Style extensions */
.button--radialBorder {
  border-radius: 0.2rem;
}

.button--large {
  font-size: 2rem;
}

.button--primary{
  background-color: #eb4934;
}

.button--secondary {
  background-color: #888;
}

We have broken down our button styles into several classes that can be used to extend the base button class. We can optionally apply the modifiers and add new ones as the design changes or new elements are being added.

Open/Close principle

software entities (classes, modules, functions, etc.) should be open for extension, but closed for modification.

We’ve already used the open/close principle in the previous examples. All new features and options need to be added by extension. Let’s take a look at this example.


.card {
  padding: 1rem;
}

.blog-list .card {
  padding: 0.5em 1rem;
}

The .blog-list .card selector has few potential issues:

Some styles can be applied only if the .card element is a child of .blog-list element.
Styles are forcibly applied to the .card element if placed inside the .blog-list element, which can produce unexpected results and unecessary overrides.

Let’s rewrite the previous example:

.card {
  padding: 1rem;
}

.blogList__card {
  padding: 0.5em 1rem;
}

We’ve fixed the issue by having a single class selector. With this selector, we can avoid unexpected effects and there are no conditional nested styles.

Conclusion

We’ve seen how by applying these few simple principles we have significantly improved the way we write CSS:

Standardized naming and structure, and improved readability by using BEM, OCSS, etc.
Improved performance and structure by using low-specificity selectors.
Reduced code bloat and improved code quality with DRY principle
Flexibility and maintainability by using open/close principle
etc.

Thank you for taking the time to read this post. If you’ve found this useful, please give it a ❤️ or ?, share and comment.

One last thing:

Now reaching over 3 million visitors per month, DEV is the fastest growing software development community in the world.

It’s free, open source, devoted to the open web, and will never have popups or a pay wall.

Get Started Now

Adrian Bece

React, Frontend, Magento 2 certified developer. Magento PWA Studio contributor. Rock and metal music fan. Reads Dune, sci-fi novels and Calvin & Hobbes. Creates amazing interfaces @ prototyp.digital

Classic DEV Post from Dec 12 ’18