How to Decide Between Being a Web Designer or Developer

At a Crossroads

Way back in 2005, when I first started to get interested in learning to code, I remember being confused about something: Was I training to be a web designer or a web developer?

Being a web designer sounded ideal: I’d get to create beautiful things for the internet, and use up all my creative juices on typography pairings, color schemes, and giving websites that certain je ne sais quois. At the same time, though, I worried I wouldn’t have what it takes to be a web designer. With no history in graphic design, or any design training at all, I wondered who would ever trust me with the aesthetics of their site.

And when I thought about web development, I though: “This is what I should want to do. I’ll make a ton of money and have all the power in the world to build awesome websites and web apps. But what if it’s boring?”

But as I learned HTML and CSS, met more designers and developers, and started working on my own freelance websites, I realized that I had it all wrong. It’s not that you don’t have to make a choice between web design and development. Really, the issue is that my idea of the differences between web design and web development were pretty off the mark. This is the blog post I wish I could have read when I first dipped my toe in the technical waters.

In this post, you’re going to get:

  • A rundown of the biggest myths about web designers and web developers, so you can make an informed decision about which path is right for you,
  • A comprehensive infographic breaking down EXACTLY what skills and tools web designers and developers use,
  • A breakdown of the basic skills ALL techies need,
  • A framework for figuring out which path fits your personality best,

But before I dive in, I want to let the cat out of the bag. The truth is, it doesn’t matter one iota whether you choose to start out in web design or web development! Getting digital skills will position you to make more money and have some of the most in-demand skills out there, regardless of whether they fall into the category of web design or web development.

This guide is based on general personality characteristics and a synopses of day-to-day tasks. If some of it seems oversimplified, that’s because I want to make it super simple for you to make a decision. In reality? There is a TON of overlap between web designers and web developers, and there’s no right or wrong starting point!

Step 1: Dispel the Myths

Before you can make any decisions about what kind of tech career you want, you need to make sure you know exactly what web designers and developers do.

If you’re like me, you’ve probably been socialized to define “web designer” and “web developer” in ways that don’t represent what it’s actually like to be one, and you’ve never even talked to a real-life web designer or developer.

My biggest misconceptions about designers and developers had to do with how much money they make, how steep the learning curve is, and what kind of work they actually do. I mistakenly believed the myths that:


Some assume that because development involves higher level programming, it will be harder to learn than design. Others see design as more difficult because they think that it requires more innate (rather than learned) creativity.

In fact, when you’re starting from scratch, any new skill is a challenge. Web development and web design aren’t inherently more or less challenging—your strengths and weaknesses will dictate which is the path of least resistance for you.


If you look at average salaries, it does appear at first glance that web developers make far more money than web designers:

  • Web designer: $66,000
  • Web developer: $87,000

*Indeed salary search for the US.

But if you start searching more specific areas of web design, you’ll see that the salaries are competitive:

  • Interaction designer: $93,000
  • Mobile designer: $92,000
  • User Experience designer: $92,000

*Indeed salary search for the US.

It’s true that on average, developers make more money, but as a beginner this isn’t something you’ll have to worry about. Whether you start learning web development or web design, you probably won’t be a senior full-stack developer (and make the very top salary) within a few months, since that usually requires several years of experience.

And besides, web designers make plenty of money. Since both are lucrative options, it’s better to choose what will make you happier rather than what you think will pay more.


On the contrary, web designers write HTML and CSS code. And some (!) even use a CSS preprocessor like Sass or LESS and write JavaScript. For example, say they need a smooth scrolling site—some designers (we call them unicorns!) can code it up themselves.

Now, there are some designers out there who don’t code, particularly print designers and some digital graphic designers, but most WEB designers can turn their designs into working prototypes using HTML and CSS. The best way to make good money AND be able to deliver what clients and employers want most, is to be a whole package of designing and coding magic.

Web designers who can code, especially those that have next-level skills like Sass and JavaScript, are in HUGE demand. We call them unicorns.

But I’m getting ahead of myself. You need to know what designers and developers actually DO all day!

Step 2: Figure out exactly what designers and developers do.

Now that you’ve gotten some of the myths cleared up, you need to know how designers and developers actually spend their time.

The first thing to note is that both designers and developers can build a site from scratch. Designers lean more towards the careful planning, and developers are stronger in implementing designs, BUT they can both build a fully functional site.

Web designers and developers both code on a regular basis. On a team, designers and developers work together, with designers focusing on user experience design and planning and developers focusing on code.

If that still sounds a little vague, check out this handy (and pretty!) infographic and see the exact skills and tools designers and developers use:

Step 3: Analyze yourself.

Now that you are well informed about the true differences between web design and web development, you need to figure out which one fits YOU. And if you’re looking at those descriptions and thinking, “I could do any one of these!” that’s okay. These simplified descriptions of the general characteristics of web designers and developers should help:


Web designers tend to experience the world in a visual way. For example, when giving you directions, they might tell you to turn right when you see the big tree.

Web designers also tend to rely on intuition and feeling, since they spend a lot of time developing the look and feel of websites. For example, if you asked them to write a word in the center of a page, they would probably eyeball it.

Web designers love to come up with big ideas and imagine the whole picture. For example, if a web designer were building a theme park, they would love to focus first on the overall “vibe” of the theme park, the layout, and the way a visitor would experience it, before getting into details like the colors, shapes, and names of the rides.


Web developers tend to approach the world from a logical, scientific standpoint. If they were lost, rather than looking for a familiar landmark to guide them, they might look up at the stars or drop a GPS pin.

Web developers also tend to see the world as a vast collection of data that can be used for different purposes. If you asked a web developer to write a word in the center of a page, they would look for a tool to measure it in the quickest, most efficient way, maybe by folding the paper evenly into 4 squares or grabbing a ruler.

Web developers like to handle big projects by taking them one step at a time and paying close attention to the details. If a web developer were building a theme park, she would love working on the details of the physics of the rides and the number of visitors the park could accommodate, and she’d work through them one small step at a time.

And unicorns? Well they’re a unique combination of both!

And remember, it really doesn’t matter how you start learning tech skills, or what path you take. It only matters that you learn tech skills. As soon as you learn those basic skills that both web designers and developers need, like HTML and CSS, you’ll be that much closer to uncovering the tech career that will be perfect for you.

Sure-Fire Ways to Get More Site Traffic Without Spending Money

Get Noticed

Getting noticed online can be tough for small businesses, who don’t have the huge marketing budgets of large corporations. However, it is possible to boost traffic to your site without spending a penny on advertising.

Let’s take a look at some of the best ways of getting free traffic, including content marketing, search engine optimization (SEO), email and social media marketing.

Optimize Your Website

The first place to start is with your website itself. The design of your website, as well as the content that it displays, can affect how highly it ranks in search engine results pages. Here are a few basic tips for improving your site’s visibility to searchers.

Using relevant keywords on a web page is the best way to get it to show up in search engine results pages. Choose a main keyword that each page will target. Include the keyword as naturally as possible several times throughout the page, without overdoing it.

Your main keyword might be a single word, such as “flowers,” or a longer phrase, such as “bouquets for Valentine’s day”. Longer keywords are useful for brands that are just starting out with online marketing because they face less competition from other sites.

Include your main keyword for each page in the HTML title tag.

If your business is local to a particular area, then including the name of that town, city or region in your keywords can help to bring in local traffic. For example, you could target the key phrase “web design in Winnipeg” to bring in local search traffic.

Although images, videos and Java applets are appealing to visitors, they are often ignored by search engines. Always include a text description beside a video or applet, and assign a keyword-rich alt text description to images using HTML attributes.

Keep your URLs short and relevant to the page they point to. For example, if your site contains a blog, then the URL for each post should contain keywords from the title of the post, rather than the date of the post or a random string of letters and numbers. Both humans and search engines should be able to get an idea of what a page is about simply by looking at the URL.

Build a Content Strategy

As well as making your site appealing to search engines, you also have to make it a place that people want to visit. Updating your site regularly with content that informs, educates or entertains readers will improve your appeal.

Including a blog as a part of your site is a good way to handle the need to consistently add new content.

Even if you’ve never tried to run a blog and you are not certain about your writing skills, don’t let this put you off! It’s not that hard to run a blog. The most important thing before you start, is to carefully plan the content that you’re about to create.

You should also always keep your audience in mind while writing every single post.

Engage with Your Audience

Once you have created engaging content, you need a way to share it with a wide audience. Social media provides the perfect platform for doing just that, so your next step is to set up profiles on the social networks that your target audience mostly hangs out on.

These networks will probably include Facebook and Twitter. If you are targeting professionals, then LinkedIn is also a good choice, whereas YouTube and Pinterest are useful if you are planning to share a lot of visual content.

It is worth spending a little time getting your profile set up in each case. Include a link to your website, a cover photo that clearly represents your brand, and some keyword-rich information about your business. Including this information makes it easier for people interested in your brand or niche to find you.

Once you have set up social media profiles, use them! Add links to your social media profiles to your website so that people can easily connect with you, and post regular updates to keep them engaged. Facebook in particular is the perfect place to share the high-quality content you are adding to your blog.

Remember to interact with users who connect with you by quickly responding to any tweets or messages that they send to your account.

Beyond taking advantage of the standard social platforms, you may find a good deal of success interacting with even more targeted audiences. A great way to connect with people (and potential visitors for your site) is to engage in forums that are directly related to your market. These communities will know exactly what your target market wants because they are your target market.

Be friendly, be interactive, be open to feedback and you will gain a lot from these connections.

Stay In Touch with Your Visitors

In order to keep people coming back to your site once they have discovered it, you can encourage them to join your mailing list. Consider asking visitors to subscribe to your list by using a pop-up window that they can put their email address into.

Sometimes offering a free gift, such as an ebook, can encourage people to subscribe.

Once you have built a mailing list, send out newsletters regularly to keep your potential customers interested. Remember to keep your newsletter content relevant to your brand or area of business.

Ask yourself what your subscribers want to know and focus on delivering content that is both useful and interesting to them.

In Conclusion

As you can see, there are a number of ways to drive traffic to your website without spending a fortune.

Through constant search engine optimization of your website, including content marketing, will keep your information up to date and will show up through web searches, leading users to your page.

Social media is also a free, and fairly simple, way to announce and cultivate your brand. The culmination of these efforts is retaining those who have already showed an interest in your company through email marketing.

After they’ve already checked out your site, encourage them to stay up to date through a mailing list that will be sent directly into their inbox.

With all of these free choices and tools available, you can easily drive traffic without dropping a dime!

5 Trends of Voice UI Design

At its core, the concept of interaction was always about communication. Human-Computer Interaction has never been about graphical user interfaces, which is why Voice User Interfaces (VUIs) are the future of user interface design.

An interface is just a medium people use to interact with a system—whether it’s a GUI, VUI or something else. So Why is VUI So Important? Two reasons:

Firstly, conversational interfaces are so fascinating because conversation is a form of communication everyone understands.

  1. It’s a natural means of interaction. People associate voice communication with other people rather than with technology.
  2. Users don’t need to learn to interpret any symbology or new terminology (the language of GUI), they can use English (or any other native language) to operate with a system. It doesn’t mean that users don’t have to learn how to use a system but the learning curve be reduced significantly.

Secondly, user expectations are changing. According to Statista, 39% of millennials use voice search. This audience is ready to be the early adopters of VUI systems.

Top 5 VUI Trends

When it comes to designing VUI, voice interaction represents the biggest UX challenge for designers since the birth of the original iPhone. But the great news is that the most fundamental principles of UI design that we use when creating products with GUI are still applicable to VUI design. Below you can find a few trends that will shape VUI design in next decades.

1. VUI That Builds Trust

Trust helps to build a bridge between a person and a machine. If trust is absent, users will be unlikely to interact with a particular voice user interface.

The importance of the valid outcome (VUI should give the person understanding that s/he will receive exactly what s/he requested). It’s possible to achieve this goal by focusing on the following things:

  • Improving the accuracy of speech recognition (more sophisticated NLP algorithms).
  • Focusing on understanding the user’s intent (a reason for interacting in the first place). When users interact with a system, they have a particular problem they want to solve, and the goal of the designer is to understand what this problem is.
  • Providing meaningful error messages.
  • Crafting contextually driven flows. While it’s impossible to predict all commands that users might ask the system, designers need to at least design a user flow that is contextually driven. The system should anticipate users’ intent at each point of a conversation and provide users with information on what they can do next. For example, finding a restaurant near the user. When users search for a restaurant, the system should match exactly what the user is looking for.

The importance of user control (one of the 10 Usability Heuristics for User Interface Design by Jakob Nielsen is still applicable to VUI design).

  • The system should consider the natural limitations of a human brain (short-term memory limitations). The information provided by the system should be overwhelming. When people hear the system response, most users remember only the last phrase. Thus, it’s better to stay away from long phrases or providing a dozen different options while the user can remember just a couple of them at one time.
  • The system should react to a user request with appropriate feedback. This feedback should give users a full understanding of what the system is doing right now. For example, visual feedback lets the user know that the system is ready and listening; or in POD (Process of Doing). When a user sends a request to the system, the system shows a POD. POD isn’t a loading animation, it doesn’t just state the fact that users have to wait while a system is doing something, it provides valuable information of what the system does. For example, a POD for a command on pulling out a file from Dropbox might look like as someone search for a right file in storage.

2. Adaptive User Interface

An adaptive user interface (also known as AUI) is a user interface (UI) which adapts to the needs of the user or context. VUI of the future will adapt for users — the system will analyze all information it has about users (including the information about current mental state and health condition) and their current context to provide more relevant responses to user requests.

For example, if a user has a high blood pressure at the current moment and decides to set a meeting in 2 hours, a digital assistant might suggest avoiding that, or suggest lowering blood pressure with exercise before the meeting starts.

3. VUI That Conveys Personality

Visual designers have a lot of options to introduce the personality in graphical user interfaces – fonts, color, illustration, motion, just to name a few. But what about VUI? Designers can convey personality using language itself — by playing with words, voice, and tone. Speaking of voice, a voice is part of the persona and it shapes its identity. Once we’ve associated a voice with something, it becomes part of its identity. And we experience emotions when we interact with such an interface, just like we when we interact with real people. People want human-understandable voices — not a voice that sounds human, but a voice that speaks coherently human!

Bad example: Siri voice by Susan Bennett – the voice that sounds almost human but people still know that it’s a machine. You can’t really have a dialogue with Siri. While you can ask Siri something like, “What is the weather like today?” You can’t ask more sophisticated questions such as, “What should I wear today?” As a result, you don’t have deep feelings for Siri, you know it’s just a robot.

Good example: Samantha voice from the film Her — the voice that sounds coherently human and people can be in love with it.

4. From Narrow AI Towards General Intelligence

Human-computer interactions are shifting to conversation, but users expect more. Most of AI systems available today are still limited to Narrow AI — such systems use Machine Learning to solve a clearly defined (and, in most cases, way too narrow) problem. Narrow AIs have zero knowledge outside of their training data. It means that when a user wants to solve a slightly different problem, or the problem itself evolves, the system won’t be able to solve it and it’ll respond with something like, “I don’t understand.” So that you, as a user, face a wall.

In comparison to Narrow AI, General Intelligence is not limited to narrow domains. The concept of learning is at the foundation of GI systems — the fundamental difference between Narrow AI and General AI is that the General Intelligence systems learn without being expressly programmed (machines learn by themselves). GI system uses two types of learning — reinforcement learning (when a system uses all available information to solve a particular user problem) and supervised learning (when a system needs user assistance to solve a problem for the first time). Another difference is that a General AI system can learn to utilize other AI for general and specific purposes. As a result, different Machine Learning models can be trained dependently and work cooperatively. An advanced NLP GI system is able to learn from the first attempt by combining and processing information from multiple different data sources.

5. Impact on Society

Widespread acceptance of VUI systems. Improving the quality of VUI AI-based systems will lead to better user engagement. The relationships between human and computer will be interactive and collaborative — people and computers will work together. This will impact society — just imagine that in ten years, you’ll walk into the house and just talk and control all kinds of machines.

This future will be with omnipresent AI: As users, we’ll trust AI even with the most important decisions such as “What school should I choose for my children?” VUI will improve the quality of life of older people and people with disabilities.


“The best interface is no interface“ is a famous quote of Golden Krishna, the author of the book The Best Interface Is No Interface. He and many other designers believe that people don’t want more time with screens, in fact they want less. Thus, technology should stop celebrating screen-based solutions. And it’ll happen relatively soon — the interactions of the future won’t be made of buttons.

With the rise of computer processing power, we’ll have more systems that will be able to calculate up to 1000 steps in 1 second. A user and a machine will work together, enabling General Intelligence.


Featured image via DepositPhotos.

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

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

Use Case For Augmented Reality In Design

Use Case For Augmented Reality In Design

Use Case For Augmented Reality In Design

Suzanne Scacca

Augmented reality has been on marketers’ minds for years now — and there’s a good reason for it. Augmented reality (or AR) is a technology that layers computer-generated images on top of the real world. With the pervasiveness of the mobile device around the globe, the majority of consumers have instant access to AR-friendly devices. All they need is a smartphone connected to the Internet, a high-resolution screen, and a camera viewfinder. It’s then up to you as a marketer or developer to create digital animations to superimpose on top of their world.

This reality-bending technology is consistently named as one of the hot development and design trends of the year. But how many businesses and marketers are actually making use of it?

As with other cutting-edge technologies, many have been reluctant to adopt AR into their digital marketing strategy.

Part of it is due to the upfront cost of using and implementing AR. There’s also the learning curve to think about when it comes to designing new kinds of interactions for users. Hesitation may also come from marketers and designers because they’re unsure of how to use this technology.

Augmented reality has some really interesting use cases that you should start exploring for your mobile app. The following post will provide you with examples of what’s being done in the AR space now and hopefully inspire your own efforts to bring this game-changing tech to your mobile app in the near future.

The Future Is Here: AR & VR Icon Set

Looking for an icon set that’ll take you on a journey through AR and VR technology? We’ve got your back. Check out the freebie →

Augmented Reality: A Game-Changer You Can’t Ignore

Unlike virtual reality, which requires users to purchase pricey headsets in order to be immersed in an altered experience, augmented reality is a more feasible option for developers and marketers. All your users need is a device with a camera that allows them to engage with the external world, instead of blocking it out entirely.

And that’s essentially the crux of why AR will be so important for mobile app companies.

This is a technology that enables mobile app users to view the world through your “filter.” You’re not asking them to get lost in another reality altogether. Instead, you want to merge their world with your own. And this is something websites have been unable to accomplish as most interactions are lacking in this level of interactivity.

Let’s take e-commerce websites, for example. Although e-commerce sales increase year after year, people still flock to brick-and-mortar stores in droves (especially for the holiday season). Why? Well, part of it has to do with the fact that they can get their hands on products, test things out and talk to people in real time as they ponder a purchase. Online, it’s a gamble.

As you can imagine, AR in a mobile app can change all that. Augmented reality allows for more meaningful engagements between your mobile app (and brand) and your user. That’s not all though. Augmented reality that connects to geolocation features could make users’ lives significantly easier and safer too. And there’s always the entertainment application of it.

If you’re struggling with retention rates for your app, developing a useful and interactive AR experience could be the key to winning more loyal users in the coming year.

Inspiring Examples Of Augmented Reality

To determine what kind of augmented reality makes the most sense for your website or app, look to examples of companies that have already adopted and succeeded in using this technology.

As Google suggests:

“Augmented reality will be a valuable addition to a lot of existing web pages. For example, it can help people learn on education sites and allow potential buyers to visualize objects in their home while shopping.”

But those aren’t the only applications of AR in mobile apps, which is why I think many mobile app developers and marketers have shied away from it thus far. There are some really interesting examples of this out there though, and I’d like to introduce you to them in the hopes it’ll inspire your own efforts in 2019 and beyond.

Social Media AR

For many of us, augmented reality is already part of our everyday lives, whether we’re the ones using it or we’re viewing content created by others using it. What am I talking about? Social media, of course.

There are three platforms, in particular, that make use of this technology right now.

Snapchat was the first:

Snapchat filter
Trying out a silly filter on Snapchat (Source: Snapchat) (Large preview)

Snapchat could have included a basic camera integration so that users could take and send photos and videos of themselves to others. But it’s taken it a step further with face mapping software that allows users to apply different “filters” to themselves. Unlike traditional filters which alter the gradients or saturation of a photo, however, these filters are often animated and move as the user moves.

Instagram is another social media platform that has adopted this tech:

Instagram filter
Instagram filters go beyond making a face look cute. (Source: Instagram) (Large preview)

Instagram’s Stories allow users to apply augmented filters that “stick” to the face or screen. As with Snapchat, there are some filters that animate when users open their mouths, raise their eyebrows or make other movements with their faces.

One other social media channel that’s gotten into this — that isn’t really a social media platform at all — is Facebook’s Messenger service:

Messenger filters
Users can have fun while sending photos or video chatting on Messenger. (Source: Messenger) (Large preview)

Seeing as how users have flocked to AR filters on Snapchat and Instagram, it makes sense that Facebook would want to get in on the game with its mobile property.

Use Case

Your mobile app doesn’t have to be a major social network in order to reap the benefits of image and video filters.

If your app provides a networking or communication component — in-app chat with other users, photo uploads to profiles and so on — you could easily adopt similar AR filters to make the experience more modern and memorable for your users.

Video Objects AR

It’s not just your users’ faces that can be mapped and altered through the use of augmented reality. Spaces can be mapped as well.

While I will go on to talk about pragmatic applications of space mapping and AR shortly, I do want to address another way in which it can be used.

Take a look at 3DBrush:

Adding 3D objects to video with 3DBrush. (Source: 3DBrush)

At first glance, it might appear to be just another mobile app that enables users to draw on their photos or videos. But what’s interesting about this is the 3D and “sticky” aspects of it. Users can draw shapes of all sizes, colors and complexities within a 3D space. Those elements then stick to the environment. No matter where the users’ cameras move, the objects hold in place.

LeoApp AR is another app that plays with space in a fun way:

LeoApp surface mapping
LeoApp maps a flat surface for object placement. (Source: LeoApp AR) (Large preview)

As you can see here, I’m attempting to map this gorilla onto my desk, but any flat surface will do.

A gorilla dances on my desk, thanks to LeoApp AR. (Source: LeoApp AR)

I now have a dancing gorilla making moves all over my workspace. This isn’t the only kind of animation you can put into place and it’s not the only size either. There are other holographic animations that can be sized to fit your actual physical space. For example, if you wanted to chill out side-by-side with them or have them accompany you as you give a presentation.

Use Case

The examples I’ve presented above aren’t the full representation of what can be done with these mobile apps. While users could use these for social networking purposes (alongside other AR filters), I think an even better use of this would be to liven up professional video.

Video plays such a big part in marketing and will continue to do so in the future. It’s also something we can all readily do now with our smartphones; no special equipment is needed.

As such, I think that adding 3D messages or objects into a branded video might be a really cool use case for this technology. Rather than tailor your mobile app to consumers who are already enjoying the benefits of AR on social media, this could be marketed to businesses that want to shake things up for their brand.

Gaming AR

Thanks to all the hubbub surrounding Pokémon Go a few years back, gaming is one of the better known examples of augmented reality in mobile apps today.

Pokemon Go animates environment
My dog hides in the bushes from Pokemon. (Source: Pokémon Go) (Large preview)

The app is still alive and well and that may be because we’re not hearing as many stories about people becoming seriously injured (or even dying) from playing it anymore.

This is something that should be taken into close consideration before developing an AR mobile app. When you ask users to take part in augmented reality outside the safety of a confined space, there’s no way to control what they do afterwards. And that could do some serious damage to your brand if users get injured while playing or just generally wreak havoc out in the public forum (like all those PG users who were banned from restaurants).

This is probably why we see AR more used in games like AR Sports Basketball these days.

Users can map a basketball hoop onto any flat surface with AR Sports Basketball. (Source: AR Sports Basketball)

The app maps a flat surface — be it a smaller version on a desk or a larger version placed on your floor — and allows users to shoot hoops. It’s a great way to distract and entertain oneself or even challenge friends, family or colleagues to a game of HORSE.

Use Case

You could, of course, build an entire mobile app around an AR game as these two examples have shown.

You could also think of ways to gamify other mobile app experiences with AR. I imagine this could be used for something like a restaurant app. For example, a pizza restaurant wants to get more users to install the app and to order food from them. With a big sporting event like the Super Bowl coming up, a “Play” tab is added to the app, letting users throw pizzas down the field. It would certainly be a fun distraction while waiting for their real pizzas to arrive.

Bottom line: get creative with this. AR games aren’t just for gaming apps.

Home Improvement AR

As you’ve already seen, augmented reality enables us to map physical spaces and stick interactive objects to them. In the case of home improvement, this technology is being used to help consumers make purchasing decisions from the comfort of their home (or at their job or on their commute to work, etc.)

IKEA is one such brand that’s capitalized on this opportunity.

 IKEA product placement
Place IKEA products around your home or office. (Source: IKEA) (Large preview)

To start, here is my attempt at shopping for a new desk for my workspace. I selected the product I was interested in and then I placed it into my office. Specifically, I put the accurately sized 3D desk projection in front of my current desk, so I could get a sense for how the two differ and how this new one would fit.

While product specifications online are all well and good, consumers still struggle with making purchases since they can’t truly envision how those products will (physically) fit into their lives. The IKEA Place app is aiming to change all of that.

IKEA product search
Take a photo with the IKEA map and search related products. (Source: IKEA) (Large preview)

The IKEA app is also improving the shopping experience with the feature above.

Users open their camera and point it at any object they find in the real world. Maybe they were impressed by a bookshelf they saw at a hotel they stayed in or they really liked some patio chairs their friends had. All they have to do is snap a picture and let IKEA pair them with products that match the visual description.

IKEA search results
IKEA pairs app users with relevant product results. (Source: IKEA) (Large preview)

As you can see, IKEA has given me a number of options not just for the chair I was interested in, but also a full table set.

Use Case

If you have or want to build a mobile app that sells products to B2C or B2B consumers and these products need to fit well into their physical environments, think about what a functionality like this would do for your mobile app sales. You could save time having to schedule on-site appointments or conduct lengthy phone calls whereby salespeople try to convince them that the products, equipment or furniture will fit. Instead, you let the consumers try it for themselves.

Self-Improvement AR

It’s not just the physical spaces of consumers that could use improvement. Your mobile app users want to better themselves as well. In the past, they’d either have to go somewhere in person to try on the new look or they’d have to gamble with an online purchase. Thanks to AR, that isn’t the case anymore.

L’Oreal has an app called Style My Hair:

L’Oreal hair color tryout
Try out a new realistic hair color with the L’Oreal app. (Source: Style My Hair) (Large preview)

In the past, these hair color tryouts used to look really bad. You’d upload a photo of your face and the website would slap very fake-looking hair onto your head. It would give users an idea of how the color or style worked with their skin tone, eye shape and so on, but it wasn’t always spot-on which would make the experience quite unhelpful.

As you can see here, not only does this app replace my usually mousy-brown hair color with a cool new blond shade, but it stays with me as I turn my head around:

L’Oreal hair mapping example
L’Oreal applies new hair color any which way users turn. (Source: Style My Hair) (Large preview)

Sephora is another beauty company that’s taking advantage of AR mapping technology.

Sephora makeup testing
Try on beauty products with the Sephora app. (Source: Sephora) (Large preview)

Here is an example of me feeling not so sure about the makeup palette I’ve chosen. But that’s the beauty of this app. Rather than force customers to buy a bunch of expensive makeup they think will look great or to try and figure out how to apply it on their own, this AR app does all the work.

Use Case

Anyone remember the movie The Craft? I totally felt like that using this app.

The Craft hair-changing clip definitely inspired this example. (Source: The Craft)

If your app sells self-improvement or beauty products, or simply advises users on next steps they should take, think about how AR could transform that experience. You want your users to be confident when making big changes — whether it be how they wear their makeup for date night or the next tattoo they put on their body. This could be what convinces them to take the leap.

Geo AR

Finally, I want to talk about how AR has and is about to transform users’ experiences in the real world.

Now, I’ve already mentioned Pokémon Go and how it utilizes the GPS of a users’ mobile device. This is what enables them to chase those little critters anywhere they go: restaurants, stores, local parks, on vacation, etc.

But what if we look outside the box a bit? Geo-related AR doesn’t just help users discover things in their physical surroundings. It could simply be used as a way to improve the experience of walking about in the real world.

Think about the last time you traveled to a foreign destination. You may have used a translation guidebook to look up phrases you didn’t know. You might have also asked your voice assistant to translate something for you. But think about how great it would be if you didn’t have to do all that work to understand what’s right in front of you. A road sign. A menu. A magazine article.

The Google Translate app is attempting to bridge this divide for us:

Google Translate camera search
Google Translate uses the camera to find foreign text. (Source: Google Translate) (Large preview)

In this example, I’ve scanned an English phrase I wrote out: “Where is the bathroom?” Once I selected the language I wanted to translate from and to, as well as indicated which text I wanted to focus on, Google Translate attempted to provide a translation:

Google provides a translation
Google Translate provides a translation of photographed text. (Source: Google Translate) (Large preview)

It’s not 100% accurate — which may be due to my sloppy handwriting — but it would certainly get the job done for users who need a quick way to translate text on the go.

Use Case

There are other mobile apps that are beginning to make use of this geo-related AR.

For instance, there’s one called Find My Car that I took for a test spin. I don’t think the technology is fully ready yet as it couldn’t accurately “pin” my car’s location, but it’s heading in the right direction. In the future, I expect to see more directional apps — especially, Google and Apple Maps — use AR to improve directional awareness and guidance for users.

Wrapping Up

There are challenges in using AR, that’s for sure. The cost of developing AR is one. Finding the perfect application of AR that’s unique to your brand and truly improves the mobile app user experience is another. There’s also the fact it requires users to download a mobile app, so there’s a lot of work to be done to motivate them to do so.

Gimmicks just won’t work — especially if you expect users to download your app and make use of it (remember: retention rates aren’t just about downloads). You have to make the augmented reality feature something that’s worth engaging. The first place to start is with your data. As Jordan Thomson wrote:

“AR is a lot more dependent on customer activity than VR, which is far older technology and is perhaps most synonymous with gaming. Designers should make use of big data and analytics to understand their customers’ wants and needs.”

I’d also advise you to spend some time in the apps above. Get a sense for how the technology works and discover what makes it so appealing on a personal level. Compare it to your own mobile app’s goals and see if there’s a way to take AR from just being an idea you’re tossing around to a reality.

Smashing Editorial (ra, yk, il)
The “C” in CSS: The Cascade

Following up from Geoff’s intro article on The Second “S” in CSS, let’s now move the spotlight to the “C” in CSS — what we call the Cascade. It’s where things start to get messy, and even confusing at times.

Have you ever written a CSS property and the value doesn’t seem to work? Maybe you had to turn to using !important to get it going. Or perhaps you resorted to writing the CSS inline on the element in the HTML file.

Ack, inline!

Speaking of inline styles, have you wondered why SVG editors use them instead of a separate CSS file? That seems kinda weird, right?

<svg id="icon-logo-star" viewBox="0 0 362.62 388.52" width="100%" height="100%"> <style> .logo { fill: #ff9800; } </style> <title>CSS Tricks Logo</title> <path class="logo" d="M156.58 239l-88.3 64.75c-10.59 7.06-18.84 11.77-29.43 11.77-21.19 0-38.85-18.84-38.85-40 0-17.69 14.13-30.64 27.08-36.52l103.6-44.74-103.6-45.92C13 142.46 0 129.51 0 111.85 0 90.66 18.84 73 40 73c10.6 0 17.66 3.53 28.25 11.77l88.3 64.75-11.74-104.78C141.28 20 157.76 0 181.31 0s40 18.84 36.5 43.56L206 149.52l88.3-64.75C304.93 76.53 313.17 73 323.77 73a39.2 39.2 0 0 1 38.85 38.85c0 18.84-12.95 30.61-27.08 36.5l-103.61 45.91L335.54 239c14.13 5.88 27.08 18.83 27.08 37.67 0 21.19-18.84 38.85-40 38.85-9.42 0-17.66-4.71-28.26-11.77L206 239l11.77 104.78c3.53 24.72-12.95 44.74-36.5 44.74s-40-18.84-36.5-43.56z"></path>

Well, the cascade has a lot to do with this. Read on to find out how styling methods affect what’s being applied to your elements and how to use the cascade to your advantage because, believe me, it’s a wonderful thing when you get the hang of it.

TL;DR: Jump right to the CSS order diagram for a visual of how everything works.

The cascade cares about how and where styles are written

There are a myriad of ways you can apply CSS rules to an element. Below is an example of how stroke: red; can be applied to the same element. The examples are ordered in ascending priority, where the highest priority is at the bottom:

<!-- Inheritance -->
<g style="stroke: red"> <rect x="1" y="1" width="10" height="10" /> <!-- inherits stroke: red -->
</g> <!-- Inline attributes -->
<rect x="1" y="1" width="10" height="10" stroke="red" /> <!-- External style sheet -->
<link rel="stylesheet" href="/path/to/stylesheet.css"> <!-- Embedded styles -->
<style> rect { stroke: red; }
</style> <!-- Different specificity or selectors -->
rect { stroke: red; }
.myClass { stroke: red; }
#myID { stroke: red; } <!-- Inline style -->
<g style="stroke: red"></g> <!-- Important keyword -->
<g style="stroke: red !important"></g>

Inheritance? Embedded? External? Inline? Specificity? Important? Yeah, lots of terms being thrown around. Let’s break those down a bit because each one determines what the browser ends up using when a web page loads.

Elements can inherit styles from other elements

Both HTML and SVG elements can inherit CSS rules that are applied to other elements. We call this a parent-child relationship, where the element the CSS is applied to is the parent and the element contained inside the parent is the child.

I'm the child because the parent is wrapped around me.

If we set the text color of the parent and do not declare a text color on the child, then the child will look up to the parent to know what color its text should be. We call that inheritance and it’s a prime example of how a style cascades down to an element it matches… or “bubbles up” the chain to the next matched style.

However, inheritance has the lowest priority among styling methods. In other words, if a child has a rule that is specific to it, then the inherited value will be ignored, even though the inherited value may have an important keyword. The following is an example:

I'm the child because the parent is wrapped around me.

See the Pen Child ignores inline inheritance with !important by Geoff Graham (@geoffgraham) on CodePen.

SVG inline attributes

For SVG elements, we can also apply styles using inline attributes, where those have the second lowest priority in the cascade. This means the CSS rules in a stylesheet will be able to override them.

<rect x="1" y="1" width="10" height="10" stroke="red" />
rect { stroke: blue;

See the Pen Stylesheet overrides SVG inline attributes by Geoff Graham (@geoffgraham) on CodePen.

Most SVG editors use inline attributes for portability; that is, the ability to copy some elements and paste them elsewhere without losing the attributes. Users can then use the resultant SVG and style its elements using an external stylesheet.


Stylesheets are divided into two flavors: external and embedded:

<!-- External style sheet -->
<link rel="stylesheet" href="/path/to/stylesheet.css"> <!-- Embedded styles -->
<style> div { border: 1px solid red }

Embedded styles have a higher priority than external stylesheets. Therefore, if you have the same CSS rules, those in the embedded style will be applied.

See the Pen Embedded styles override stylesheet rules by Geoff Graham (@geoffgraham) on CodePen.

All stylesheets also follow ordering rules, where files that are defined later, will have higher priority than those defined earlier. In this example, stylesheet-2.css will take precedence over the stylesheet-1.css file because it is defined last.

<link rel="stylesheet" href="/path/to/stylesheet-1.css">
<link rel="stylesheet" href="/path/to/stylesheet-2.css">

Specificity or selectors

How you select your elements will also determine which rules are applied, whereby tags (e.g. <p>,

), classes (e.g. .my-class) and IDs (e.g. #myI-id) have ascending priorities.

See the Pen Specificity by selectors by Geoff Graham (@geoffgraham) on CodePen.

In the example above, if you have a div element with both .my-class and #my-id, the border will be red because IDs have higher priority than classes and tags.

*Specificity has higher priority than ordering rules, therefore, irrespective if your rule is at the top or bottom. Specificity still has higher priority and will be applied.


CSS rules always prioritize from left-to-right, then from top-to-bottom.

<style> div { border: 1px solid red; border: 1px solid blue; /* This will be applied because it is at the bottom */ } </style>

Inline styles

Inline styles have the second highest priority, just below the !important keyword. This means that inline styles are only overridden by the important keyword and nothing else. Within inline styles, normal ordering rules applies, from left-to-right and top-to-bottom.

The important keyword

Speaking of the !important keyword, it is used to override ordering, specificity and inline rules. In other words, it wields incredible powers.

Overriding inline rules

<style> div { /* This beats inline styling */ border: 1px solid orange !important; /* These do not */ height: 200px; width: 200px; }

In the example above, without the important keyword, the div would have a red border because inline styling has higher priority than embedded styles. But, with the important keyword, the div border becomes orange, because the important keyword has higher priority than inline styling.

Using !important can be super useful, but should be used with caution. Chris has some thoughts on situations where it makes sense to use it.

Overriding specificity rules

Without the important keyword, this div border will be blue, because classes have higher priority than tags in specificity.

<style> /* Classes have higher priority than tags */ .my-class { border: 1px solid blue; height: 100px; width: 100px; } div { border: 1px solid red; height: 200px; width: 200px; }

See the Pen Classes beat tags by Geoff Graham (@geoffgraham) on CodePen.

But! Adding the important keyword to the tag rules tells the element to ignore the cascade and take precedence over the class rules.

<style> .my-class { border: 1px solid red; } /* The important keyword overrides specificity priority */ .my-class { border: 1px solid blue !important; }

See the Pen !important ignores the cascade by Geoff Graham (@geoffgraham) on CodePen.

Overriding ordering rules

OK, so we’ve already talked about how the order of rules affects specificity: bottom beats top and right beats left. The surefire way to override that is to put !important into use once again.

In this example, the div will take the red border, even though the blue border is the bottom rule. You can thank !important for that handiwork.

<style> div { border: 1px solid red !important; } /* This wins, despite the ordering */ div { border: 1px solid blue; }

See the Pen Important wins over ordering by Geoff Graham (@geoffgraham) on CodePen.

Visualizing the cascade

Who knew there was so much meaning in the “C” of CSS? We covered a ton of ground here and hopefully it helps clarify the way styles are affected and applied by how we write them. The cascade is a powerful feature. There are opinions galore about how to use it properly, but you can see the various ways properties are passed and inherited by elements.

More of a visual learner? Here’s a chart that pulls it all together.

Download chart

The post The “C” in CSS: The Cascade appeared first on CSS-Tricks.

Take Your Business Online with Ease: Create Your Website with Mozello

Few of the current crop of page builders are as simple as Mozello. You don’t need any previous experience, Mozello takes care of everything for you. Just run through the quick set-up and you’ll have a working website, online, in minutes.

Mozello is a surprisingly easy-to-use platform that offers you the opportunity to create a personal or business site, with no design or code knowledge. But where it really excels is in lowering the entry-level for anyone hoping to create an ecommerce site.

create a brochure, a blog, or even an ecommerce store

Mozello is also an ideal option for web designers and developers who need to develop a site simple enough for a client to self-manage. Mozello is so simple to use, your client can make any changes they like, without blowing up your phone every 5 minutes.

Ultra-Fast Setup

Creating an account with Mozello couldn’t be easier. Just navigate to the site, enter your email address and a password.

Mozello will ask you for an account name, but don’t worry about getting this right, because you can always change it later. Decide whether you want to create a brochure, a blog, or even an ecommerce store.

Once you’re ready to publish your site you have a simple choice. You can either publish under a free Mozello web address, or use a domain name. Using a domain is probably best for most users, and Mozello allows you to use one you already own, or register a new name.

48 Mobile-Ready Templates

Once you’ve created an account, Mozello presents you with 48 template designs to choose from.

Unlike some page builders, Mozello’s templates have a whole heap of variety, there’s something here for everyone, so you can be sure you’ll find something you love.

Each of the templates is mobile-ready, meaning that your site will work perfectly across all devices.

Mozello’s templates cover 90% of the use cases you’ll ever need, but if you do need to create something out of the ordinary, rest assured that all of Mozello’s templates are easily customizable.

Simple to Customize

Mozello has fewer features than some site builders, but by making the difficult design decisions and baking them into the defaults, Mozello allows you to focus on creating a distinctive brand.

Mozello allows you to focus on creating a distinctive brand

You can change your color scheme with a single click, and choose from professionally curated Google font pairings, without needing any special understanding of design.

It takes about 20 to 25 minutes to get a site up and running on Mozello’s platform—even an ecommerce store—few site builders can boast that kind of speed.

If you’re running the type of business that has a bricks-and-mortar counterpart, then you’ll appreciate the ability to easily add a map, and if you’re running an international business you can even post content in multiple languages, with just a few clicks—perfect if your customers speak dual languages, like English and Spanish.

Easily Edit Content

Editing content is a breeze with Mozello. Just click on the item you want to edit, and it will switch to edit mode. You can switch text and images, and even edit styles inline to adjust the site design.

As well as editing on-page content, Mozello gives you the power to edit the meta data of the page that search engines will use to rank your site. You can easily edit title tags, insert Google Analytics, and integrate your site with social media.

Create an Online Store

There are plenty of site builders available, but very few of them allow you to create a fully functional ecommerce store with no experience. All the features you need to promote your products, from fast payments, to coupon codes, are all included.

Mozello’s store is packed with the type of features you normally only expect from a premium provider, even the free version. Designing a store could not be easier, because it’s all built around your product catalog; simply define your products, adding a name, a description, shipping costs, and the terms of sale.

no matter what you’re selling, you can present it in a way that encourages sales

For stores with more than a few products, you’re going to want to create some categories. And Mozello even has that covered: each product can be assigned a category, so if you’re selling sporting goods, you can group the equipment by sport, by gender, or even by price range. You can even add product variants, allowing you to offer customers different options.

Perhaps best of all, you can customize your catalog layout, as well as the layout of product images. So no matter what you’re selling, you can present it in a way that encourages sales in your sector, helping customers browse, and boosting revenue.

Mozello gathers every order you receive, so you can process them for your new customers. And because this all takes place in the same simple-to-use interface, it’s easy for anyone to run an online store. You can even manage your ecommerce store from your cellphone, making it simple to run your whole online business right out of your pocket—great for anyone working remotely.

If you’re managing a larger store you’ll benefit from the Premium Plus plan which delivers tons of extra functionality, and is easily capable of handling hundreds of products, but for many fledgling stores, the free starter plan is a risk-free route to getting online.

An Excellent Entry-Level Site Builder

Mozello is designed to allow anyone, even those with no design or code knowledge, to create a website easily.

The live site editor is simple to use, but if you do run into a problem, Mozello is backed by a friendly support team that answers email queries promptly.

the free starter plan is a risk-free route to getting online

Mozello doesn’t offer all the bells and whistles of some big-name providers, and that focus on essential tools is exactly what most first-time website builders need.

Free by default, meaning that anyone can build a site with no risk, if you want to up your game then there is a premium plan for just $7 per month and a premium plus plan for $14 per month. If hassle-free web design is what you’re after, give Mozello a look.


[ — This is a sponsored post on behalf of Mozello — ]

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

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

Using Visual Composer Website Builder To Create WordPress Websites

Using Visual Composer Website Builder To Create WordPress Websites

Using Visual Composer Website Builder To Create WordPress Websites

Nick Babich

(This is a sponsored article.) WordPress has changed the way we make websites and millions of people use it to create websites today. But this tool has a few significant limitations — it requires time and coding skills to create a website.

Even when you have aquired coding skills, jumping into code each time when you need to solve a problem (add a new UI element or change styling options for existing one) can be tedious. All too often we hear: “We need to work harder to achieve our goals.” While working hard is definitely important we also need to work smarter.

Today, I’d like to review a tool that will allow us to work smarter. Imagine WordPress without design and technical limits; the tool that reduces the need to hand-code the parts of your website and frees you up to work on more interesting and valuable parts of the design.

In this article, I’ll review the Visual Composer Website Builder and create a real-world example — a landing page for a digital product — just by using this tool.

What Is Visual Composer Website Builder?

Visual Composer Website Builder is a simple and powerful drag-and-drop website builder that promises to change the way we work with WordPress. It introduced a more intuitive way of building a page — all actions involving changing visual hierarchy and content management are done visually. The tool reduces the need to hand-code the theme parts of a website and frees you up to work on valuable parts of the design such as content.

A GIF showing some features of Visual Composer Website Builder
(Large preview)

Content is the most important property of your website. It’s the primary reason why people visit your site — for content. It’s worth putting a lot of efforts in creating good content and use tools that help you to deliver the content in the best way to visitors with the least amount of effort.

Visual Composer And WPBakery

Visual Composer Website Builder is a builder from the creators of WPBakery Page Builder. If you had a chance to use the WPBakery Page builder before you might wonder what the difference between the two plugins is. Let’s be clear about these two products:

There are a few significant differences between the two:.

  • The key difference between WPBakery Page builder and Visual Composer is that WPBakery is only for the content part, while with Visual Composer Website Builder you can create a complete website (including Headers and Footers).
  • Visual Composer is not shortcode based, which helps generate clean code. Also, disabling the plugin won’t leave you with “shortcode hell” (a situation when shortcodes can’t be rendered without an activated plugin).

You can check the full list of differences between two plugins here.

Now, Visual Composer Website Builder is not an ‘advanced’ version of WPBakery. It is an entirely new product that was created to satisfy the growing needs of web professionals. Visual Composer is not just a plugin; it’s a powerful platform that can be extended as user needs continue evolving.

A Quick List Of Visual Composer’s Features

While I’ll show you how Visual Composer works in action below, it’s worth to point out a few key benefits of this tool:

  • It’s a live-preview editor with drag-and-drop features, and hundreds of ready-to-use content elements that bring a lot of design freedom. You can make changes instantly and see end-results before publishing.
  • Two ways of page editing — using frontend editor and tree view. Tree view allows navigating through the elements available on a page and makes a design process much easier.
  • Ready-to-use WordPress templates for all types of pages — from landing pages and portfolios to business websites with dedicated product pages, because editing an existing template is a lot easier than starting from scratch with a blank page.
  • Visual Composer works with any theme (i.e. it’s possible to integrate Visual Composer Website builder into your existing themes)
  • Responsive design out-of-the-box. All the elements and templates are responsive and mobile-ready. You can adjust responsiveness for each independent column.
  • Header, footer, and sidebar editor. Usually the header, footer and sidebar are defined by the theme you’re using. When web professionals need to change them, they usually move to code. But with Visual Composer, you can change the layout quickly and easily using only the visual editor. This feature is available in the Premium version of the product.
  • An impressive collection of add-ons (it’s possible to get add-ons from the Hub or get them from third-party developers)

There are also three features that make Visual Composer stand out from the crowd. Here they are:

1. Visual Composer Hub

Visual Composer Hub is a cloud which stores all the elements available to the users. It’s basically like a design system that keeps itself updated and where you can get new elements, templates, elements, blocks (soon).

A screenshot og Visual Composer Hub: a cloud which stores all the elements available to the users.
(Large preview)

The great thing about Visual Composer Hub is that you don’t need to update the plugin to get new elements — you can download the elements whenever you need them. As a result, your WP setup isn’t bloated with a myriad of unused elements.

2. New Technical Stack

Visual Composer Website builder is built on a new technology stack — it’s powered by ReactJS and doesn’t use any of the WordPress shortcodes. This helps to achieve better performance — the team behind Visual Composer conducted a series of internal tests and showed that pages created with Visual Composer load 1-1.5s faster than the same layouts re-created with WPBakery.

3. API

Visual Composer Website builder has a well-documented open API. If you have coding skills, you can extend Visual Composer with your own custom elements which may be helpful for some custom projects.

How To Create A Landing Page With Visual Composer

In this section, I’ll show how to create a landing page for a digital product called CalmPod (a fictional home speaker device) with the new Visual Composer Website Builder.

Our journey starts in a WP interface where we need to create a new page — give it a title and click the ‘Edit with Visual Composer button.’

How to create a landing page With Visual Composer
(Large preview)

Creating A Layout For A Landing Page

The process of creating the page starts with building an appropriate layout. Usually building a layout for a landing page takes a lot of time and effort. Designers have to try a lot of different approaches before finding the one that works the best for the content. But Visual Composer simplifies the task for designers — it provides a list of ready-to-use layouts (available under the Add Template option). So, all you need to do to create a new page is to find the appropriate layout from the list of available options and see how it works for your content.

You can start with a blank page or select a ready-to-use template.
You can start with a blank page or select a ready-to-use template. (Large preview)

But for our example, we’ll select the Startup Page template. This template applies automatically as soon as we click the + symbol, so all we need to do is to modify it according to our needs.

The Startup Page template applies automatically as soon as we click the plus symbol, so all we need to do is to modify it according to our needs.
(Large preview)

Each layout in Visual Composer consists of rows and columns. The row is a base that defines the logical structure of the page. Each row consists of columns. Visual Composer gives you the ability to control the number of columns in a row.

Each layout in Visual Composer consists of rows and columns.
(Large preview)

Tip: Notice that Visual Composer uses different colored borders for UI units. When we select a row, we see a blue-colored border, when we select a column, we see an orange-colored border. This feature can be extremely valuable when you work on creating complex layouts.

Visual Composer uses different colored borders for UI units
(Large preview)
Visual Composer can customize all properties of the layout, i.e. add/remove elements or change their styling options (such as margins, padding between elements)
(Large preview)

The great thing about Visual Composer is that we can customize all properties of the layout — add/remove elements or change their styling options (such as margins, padding between elements). For example, we don’t need to dive into the code to alter the sizes of columns; we can simply drag and drop the borders of individual elements.

We don’t need to dive into the code to alter the sizes of columns; we can simply drag and drop the borders of individual elements.
(Large preview)

It’s important to mention that we can use either the visual editor or the tree view of elements to modify individual properties of UI elements.

You don’t need to dive into the code to alter the sizes of columns; we can simply drag and drop the borders of individual elements.
(Large preview)

By clicking on the ‘Pen’ icon, we activate a screen with individual styling properties for the element.

By clicking on the ‘Pen’ icon, you can activate a screen with individual styling properties for the element.
(Large preview)

Stretch Content

Visual Composer allows making the layout either boxed or stretched. If you switch the ‘Stretch content’ toggle to ‘On’, your layout will be in full width.

Visual Composer allows making the layout either boxed or stretched.
(Large preview)

Changing The Page Title

Visual Composer allows users to change the page title. You can do it in the Layout settings. Let’s give our page the following title: ‘CalmTech: the best digital assistant.’

Visual Composer allows users to change the page title. You can do it in the Layout settings.
(Large preview)

Adding The Top Menu

Now it’s time to add a top menu to our landing page. Suppose we have the following menu in WP:

Adding a top menu to the landing page
(Large preview)

And we want to place it at the top of our newly created landing page. To do that, we need to go to Visual Composer -> Headers (because the top of the page is a default place for navigation) and create a new header.

As soon as we click on the ‘Add Header’ button, we’ll see a screen that asks us to provide a title for the page — let’s give it a name “Top header.” It’s a technical name that will help us identify this object.

As soon as you click on the ‘Add Header’ button, you’ll see a screen that asks us to provide a title for the page
(Large preview)

Next, Visual Composer will direct us to the Hub where we can add all required UI elements to our header. Since we want to have a menu, we type ‘menu’ in the search box. The Hub provides us with two options: Basic menu and Sandwich menu. For our case, we’ll use the* Basic Menu* because we have a limited number of top level navigation options and want all of them to be visible all the time (hidden navigation such as Sandwich Menu can be bad for discoverability) .

The Hub provides us with two options: Basic menu and Sandwich menu. For our case, we’ll use the Basic Menu.
(Large preview)

Finally, we need to choose the menu source (in our case it’ll be Main menu, the one that we have in WP) and change the appearance of the navigation options.

Choosing the menu source in order to change the appearance of the navigation options
(Large preview)

Let’s change the alignment of the menu (we will move it to the right).

Changing the alignment of the menu to the right
(Large preview)

And that’s all. Now we can use our header page settings. Let’s modify our home page to include a Header. Hover over the *Please select Your Header*element, and you’ll see a button Add Header.

Modifying the home page to include a Header
(Large preview)

When you click on the button, you’ll see a dialog at the left part of the screen that invites you to select a header. Let’s choose the Top Header option from the list.

Choosing the Top Header option
(Large preview)

After we select a header, you’ll see a menu at the top of the page.

After we select a header, you’ll see a menu at the top of the page.
(Large preview)

Making The Top Menu Sticky

The foundational principle of good navigation says that a navigation menu should be available for the users all of the time. But unfortunately, on many websites, the top navigation menu hides when you scroll. Such behavior forces users to scroll way back to the top in order to navigate to another page. It introduces unnecessary interaction costs. Fortunately, there’s a simple solution for this problem — we can make the top menu sticky. A sticky menu stays visible all the time no matter where the user is on a page.

To enable stickiness, we need to turn the Sticky toggle for our header On (for the whole Menu container) and add a margin 50-pixels margin to the Margin top.

To enable stickiness, we need to turn on the Sticky toggle for our header and add a margin 50-pixels margin to the Margin top.
(Large preview)

When you scroll the landing page, you’ll notice that the header stays visible all the time.

Pairing Image With Text

Next comes a really exciting part — we need to describe our product to our visitors. To create a great first-time impression, we need to provide excellent images paired with a clear description. Text description and product picture (or pictures) should work together and engage visitors in learning more about a product.

We need to replace a default image with our image. Click on the image and upload a new one. We’ll use an image with a dart background, so we also need to change the background for the container. We need to select the row and modify the background color option.

Uploading an image with a dart background
(Large preview)

Next, we need to add a text section to the left of the image. In the western world, users scan the page from left to right, so visitors will read text description and match it with the image. Visual Composer uses Text Block object to store the text information. Let’s replace a text that came with theme with our custom text “CalmTech A breakthrough speaker that adapts to its location.” Let’s also modify the text color to make the text more relevant to the theme (white for the title and a shade of gray for the subtitle).

ModifyING the text color to make the text more relevant to the theme
(Large preview)

Creating A Group Of Elements

We have a picture of a product and a text description, but still, one element is missing. As you probably guessed, it’s a call to action (CTA). Good designers don’t just create individual pages but a holistic user journey. Thus, to create an enjoyable user journey, it’s important to guide users along the way. At the time when visitors read the necessary information, it’s vital to provide the next logical step for them, and a CTA is a precisely right element for this role.

In our case, we’ll need two CTAs — ‘Buy now’ and ‘Learn More.’ The primary call to action button “Buy now” should come first and it should be more eye-catching (we expect that users will click on it). Thus, we need to make it more contrasting while the “Learn more” button should be a hollow button.

Visual Composer makes it easier to customize the general parameters for the UI element (such as a gap) as well as individual styling options. Since we’re interested in changing individual properties, we need to click on ‘Edit’ for a particular button.

Visual Composer makes it easier to customize the general parameters for the UI element (such as a gap) as well as individual styling options.
(Large preview)

Playing With Animation To Convey Dynamics And Telling Stories

People visit dozens of different websites on a daily basis. In such a highly competitive market web professionals need to create genuinely memorable products. One way to achieve this goal is to focus on building better user engagement.

It’s possible to engage visitors to interact with a product by conveying some dynamics. If you make a site less static, there’s a better chance that visitors remember it.

Visual Composer allows you to choose from a few predefined CSS animations of a particular element. When we open design options for any UI element we can find the option Animate. When we choose the animated option, it’ll be triggered once the element will be visible in the browser window.

Visual Composer also allows you to choose from a few predefined CSS animations of a particular element.
(Large preview)

Final Polishing

Let’s see how our page looks like for our site’s visitors. It’s obvious that it has two problems:

  • It looks a bit unfinished (we don’t have a logo of a website),
  • The elements have the wrong proportions (the text overpowers the image so the layout looks unbalanced).
Preview of the page created
(Large preview)

Let’s solve the first problem. Go to the Headers section and select our Top Header. Click on ‘+’ element and select an object Single Image. Upload new image (the icon). Notice that we can modify the size of the image right in the Visual Composer. Let’s make the size of our icon 50px x 50px (in the Size section).

The size of the image can be modified directly in the Visual Composer.
(Large preview)

Now it’s time to solve the second problem. Select the first column and adjust the size of an text (set the size to 40 for the subheader). Here is how our page will look like after the changes.

Final preview of the page created with Visual Composer
(Large preview)


Visual Composer Website Builder simplifies the process of page building in WordPress. The process of web design becomes not only fast and easy, but it also becomes more fun because designers have a lot more creative freedom to express their ideas. And when web professionals have more creative freedom, they can come up with better design solutions.

Smashing Editorial (ms, ra, il)
What’s New for Designers, November 2018

Designers and developers are hard at work creating tons of new goodies to make work life easier. This month’s roundup of tools for designers includes a smorgasbord of resources that includes everything from productivity and collaboration tools to icon and design kits to fonts that you’ll love.

If we’ve missed something that you think should have been on the list, let us know in the comments. And if you know of a new app or resource that should be featured next month, tweet it to @carriecousins to be considered!


Drafta is a team-based collaboration tool that allows you to store and share web and interface design screens. You can organize screens, share designs with a simple URL, store projects in one place, update activity and uploads and even gain inspiration from other projects. The tool has free and paid options (with integrations from other tools). The tool is designed to provide one-click access to every design screen in a project.


Galio is a free and open source framework to create mobile apps. It’s made to look great with plenty of ready-made components, typography options and a sleek base theme that you can adapt for each new project. It includes 11 screen options, more than 60 elements and more are getting added all the time.


DesignBase might be your new favorite tool. The website is a collection of curated resources for designers. It includes a database of UI kits, mockups, illustrations, color palettes, fonts, icons and stock photos. All in once place.


Playroom is made so that you can simultaneously design across a variety of themes and screen sizes, powered by JSX and your component library. It allows you to create a zero-install code-oriented design environment, built into a standalone bundle that can be deployed alongside your existing design system documentation.

Dribbble for Sketch

Dribbble now works with Sketch. The new integration likely combines two of your favorite tools so that you can share what you are working on right in Dribble without having to export and add to your page. Just download the plugin to get started and post your shots.

Experimental Gradient Editor

If you like to play with gradients this pen from David A., is pure fun. Use the wheel to see different options and shift colors. Use light mode to see how colors look in different conditions and then copy your favorite gradient


Chatkit helps you build in-app messaging so that users can get in touch with your team without ever leaving your app. It works with new or existing app builds.


Google’s popular captcha tool has been updated with a new version. reCAPTCHA v3 is an API that helps you detect abusive traffic on your website without user interaction. Instead of showing a CAPTCHA challenge, reCAPTCHA v3 returns a score so you can choose the most appropriate action.

Flashcards for Developers

Develop your skills the old-school way with a set of digital flashcards that help you learn or refresh your design and development skills. Collections include Python, JavaScript, C/C++ and computer science card sets.

Glorious Codes

Glorious Codes is an easy way to create animations to show your code in action. It’s an open source JavaScript library that uses an API to create animations for code samples.

Cosmos Pattern

This fun animated or still background pattern uses SVG to create an out of this world scene.

Toggle Buttons

 It’s easy to see how this set of switches in different styles could be applied to projects. Each is made in pure CSS.


Colorblindly is an extension that helps developers create websites for the people with colorblindness by allowing them to simulate experiences. The extension works by placing a CSS filter over the webpage that modifies color ratios in line with actual types of colorblindness. It includes eight settings.

April Landing Page Template

April is a landing page template, designed for startups. The design features plenty of white space and the free HTML landing page works on all device types.


Evericons is a free set of line-style icons with plenty of options to choose from. Use them as is or add color for more impact.

Folder Icons

Folder Icons contains a set of 25 free icons in a line style with different folder actions depicted on each. The icons are in an editable vector format that you can use in a number of ways and for different projects.

Error Screen Illustrations

This set of error screen illustrations for mobile projects puts a fun – and visually interesting – spin on pages where things go wrong for the user. Having a delightful element when things go awry or users get lost can actually keep them looking for the right information. This set of illustrations is a great place to start.

Report: The Business Value of Design

Does design impact business performance? A report from McKinsey & Company shows the correlation, proving something that you may already know: Good design is good for business. The report is interesting reading for anyone in the design industry.

100 Days CSS Challenge

What could you create if you challenged yourself to something new every day? The 100 Days CSS Challenge provides an opportunity to try that every day and share your work with the community. Start with the daily template, recreate it, paste the pen. That’s it.

How Facebook 3D Photos Work

You are probably starting to see a few 3D photos in your Facebook feed. This article explains how that technology works, in case you are interested. (It’s pretty cool.)


Graphpack lets you create GraphQL servers with zero configuration. It includes features like Live Reloading, GraphQL Playground, GraphQL Imports.

Anaheim Script

Anaheim Script is a handwriting style script with a lot of charm. It’s readable with thin clean lines and includes plenty of fun elements such as swashes, alternates and ligatures. It includes a full character set and numerals.

Classy Beautiful Sans

Classy Beautiful Sans features a limited character set with uppercase option and a few alternates, in a retro style. It could make a nice display option or be used in branding.


Kontiki is a cool typeface that simulates a handmade woodprint. To create the typeface the designer manually cut 193 glyphs into wooden plates and printed them by hand. The font includes 560 characters in several styles with a full character set. Styles range from the filled German option to the less filled French variant.

Lineall Medium

Lineall Medium is a funky font that can make for a fun display option. It includes an all uppercase character site and is free for all uses – even commercial.

TT Firs Neue

TT Firs Neue is a highly readable and usable sans serif. It has a contemporary style with plenty of options in this robust font family.

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

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

Popular Design News of the Week: November 5, 2018 – November 11, 2018

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

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

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

Someone Made Ocean Wave Simulation as Real as Possible Using WebGL


Migrating Away from Google Maps and Cutting Costs


Redesigning your Product and Website for Dark Mode


8 Things your Website Better not Have in 2019


Butter Cake: A Modern CSS Framework Based on Flexbox


Spectre.css – A Lightweight, Responsive and Modern CSS Framework


10 Ways to Be a Successful Freelancer




Samsung Finally Teases Folding Phone After Years of Rumors


Playful Physics – Liquid in Web Design


A Beautifully Minimalist Render of your Location Inside of Every New Tab.


Freelancer’s Guide to Surviving the Famine Cycle


New Google Contacts Web App is Here to Stay, Becoming Only Option in 2019


How to Design a Payment Form your Customers will Actually Complete


A Contract for the Web


Samsung One UI


The Tried and True Laws of UX


4 Ways to Improve Robinhood


“User Research … But Why?”


Case Study: Creating Design Principles for a Team at Shopify


No More than 4 Colours and Still Cool


Why do People Leave your Website?


Most of Us are Cats!


Automation Threatens to Make Graphic Designers Obsolete


Five Lessons from a 1,000-year-old Design System


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

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

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