Powered by WPeMatico
Welcome to part 1 of 5 of our series Organizing and Taking Control of your Divi Web Design Business. In this series, we’re exploring several tactics, tools and strategies that will help you overcome the daily struggles that we all face as Divi Web Designers. From optimizing your daily routines, to creating systems and processes, to providing the best web design experience for your clients; we’re providing actionable items and steps that you can implement immediately with the purpose of helping you take control of your Divi Web Design business whether you’re a solo freelancer, a small agency or a remote team.
Taking control of your business starts with taking control of your time. And a great way to take control of your time is to create daily and weekly routines to ensure that YOU are running your business and that your business isn’t running you. In this post, we’ll explore some practical, actionable routines that you can apply to your daily and weekly web design work schedule!
Before diving in, here’s a quick snapshot of this series so you can know what to expect:
- Creating Efficient Routines for your Divi Web Design Business
- Organization Tactics and Practices for your Divi Web Design Business
- Effective Client Onboarding processes for Your Divi Web Design Business
- Refining and Standardizing your Divi Design and Development Process
- How to Effectively Manage Multiple Divi Web Design Projects
Though this series is directed to Divi Web Designers, you can apply many of these tactics and practices to any sort of web design business and any type of work for that matter. Ok, now that you know what to expect and are prepared for the rest of the series, let’s dive in!
Creating Efficient Routines for your Divi Web Design Business
To start, I’m going to share with you two major practices that have drastically helped me in maintaining and taking control of my Divi Web Design business:
Daily Routines and Weekly Routines
In my 6 1/2 years so far of freelance website design, implementing these 2 practices have helped me stay fresh and creative while juggling the administrative and monotonous duties of web design and running a business. Now this may look different depending on your situation – i.e. whether you work from home or at an agency, whether you’re single or have a family and children, whether you’re a solo freelancer or work with a team, etc. But regardless of your situation, it’s important to set routines that work for you to help keep you organized.
1) Implementing A Daily Routine and Schedule for your Divi Web Design Business
During the day to day activities of running a Divi web design business, you’re going to juggle many positions. You’ll be the salesman, IT, support, creative director, HR and yes if you’re working from home, even the janitor Setting disciplined daily routines and practices can help you stay on track while juggling the responsibilities of all these roles.
What’s really helped me stay in control of my business is setting parameters in my day. For example; to start the day, I generally don’t look at my phone or a screen in the first half hour. I typically get up, make coffee and read a “real” book or sit outside and just give my mind some time to warm up before taking on the stresses of the day. Some may call this time “priming” or some sort of meditation. Whatever name you choose to give it, it’s a time to organize your thoughts, plan out your day and decide how YOU’RE going to run it before it starts running you. After that, I can getting started on my work and I know what my major goals are for the day.
When it comes to starting the day, you must do what works for you. Some bloggers feel more creative in the morning and like to write first thing. Some designers like to start designing immediately before doing any admin work. And some developers like to take care of any support inquiries before getting to anything else. Personally, I like to get to my email at the start of my work day and clear out as many as possible to help free me up to start my creative work. I take care of the emails that are most urgent and reach out to clients whose projects I may be working on currently, then I can move on to designing and developing.
Here’s an integral part of my daily routine – I generally break my day into 3 or 4 main segments and only work on 2 or 3 projects at most with email/administrative work and quick updates in between those segments. And perhaps the most important daily routine I’ve added recently is allowing at least one hour a day for “reactionary” work. With my Divi Web Design business In Transit Studios, I offer website maintenance, weband SEO services which means I’ve opened myself up to some support roles, so I can’t just turn my email off all day. I am very intentional about having creative time and space but also allowing time in the day to take care of my monthly retainer client issues when they arise.
Before being intentional about this “reactionary work time,” I found myself completely caught off guard when clients had issues. I’d have to break free from a project to handle an issue and it would throw my creativity completely off. Depending on the urgency or situation of course I’ll handle an emergency right away but I’ve found most issues can wait until I get around to them in my reactionary time which is generally in the afternoon. It’s allowed me to focus on my work and if I happen to see an email with a website update or quick fix, I know I’ll be able to get to it shortly and I’ll still look like a rock star for my client. And if there isn’t anything I need to handle in my allotted reactionary time…then there’s some extra time I can spend on a project or an ET blog post
So, here’s what a typical web design day looks like for me:
- 8:30a-9:30a (After my morning warm up time and planning out what I want to accomplish in the day) Engage with some awesome Divi people in my Divi Web Designers group. Answer as many emails as possible pertaining to current ongoing projects and take care of any urgent administrative work.
- 9:30a-11:30a Project One
- 11:30a-12:30p Emailing round 2, scheduled calls and quick work/additions or updates and any invoicing or administrative work.
- 1p-3p Project Two
- 3p-4p Reactionary work time
- 4p-5p Email wrap ups, quick updates, time in my Divi Web Designers group, etc.
Now of course not every day looks like this. There are meetings, calls and many other things that come into play on a day to day basis. But things can quickly get out of hand if you don’t have a daily routine that YOU set and stick with. This daily routine has helped me manage and balance my business to a very effective level and has not only helped me stay on top of my projects but also to stay fresh for my creative and problem-solving work. So now that we have a good idea of setting up a productive daily routine, the next is…yep you guessed it, a weekly routine!
2) Implementing A Weekly Routine and Schedule for your Divi Web Design Business
I have one weekly meeting every Friday morning with my networking group (which is where nearly 50% of my leads and referrals come from) so I rarely miss that one. The rest of my week is open but can quickly get booked up if I’m not careful and if I let my clients dictate my schedule. For years my meetings were sporadic and booked randomly. Not so anymore. Now I generally schedule all my other meetings and calls on Tuesdays, Wednesdays and Thursdays and rarely more than 2 days in a week. There are numerous reasons for this.
First off, in my experience, Monday’s are generally not great days for website meetings. I’ve found that clients are just getting going with their week and are distracted by THEIR tasks and to do’s which make for some difficulties for a web developer planning out a website strategy, getting feedback, etc. And on the flip side, at the tail end of the week, Friday’s have proven to be fairly unproductive meeting days as well. This is probably a bit more obvious because at the end of the week most people are planning the weekend and are generally checked out by early afternoon. So I keep all my in-person meetings and most calls to the middle days of the week.
One very important lesson I’ve learned when it comes to in-person meetings is to group them together if possible. A one hour meeting, let’s say a half hour away, is roughly a 3-4 hour commitment. Here’s why; think of everything that goes into the time before and after the actual meeting. If you set a meeting at 10a and you have to leave at say 9:30a, you’re more than likely preparing your materials between 9a and the time you leave. If the meeting lasts an hour or so, that puts you at roughly 11a. Take account the drive back and the time it takes to decompress from the meeting and get back into the swing of your tasks. Now it’s closer to noon. Oh and then it’s lunch time. So what sounds like a “short” meeting can turn very quickly to a half day ordeal.
Now if you compile several meetings a week, you can see how 3 or 4 “quick” meetings can take up your whole week and leave you little time for your creative and productive work. So I’ve learned to group them together if possible. I’ll generally try to schedule meetings early if possible and layer them up. So I may have a meeting at 9a with one client, then 10:30a or 11a with another nearby. This allows me to do both meetings and have at least half a day left for my projects and daily routine stated above.
Some final quick tips on maximizing your daily and weekly routines:
- When setting up a meeting or a call, be specific. Give the client some options to choose from that work for you. For example: don’t ask a potential client “Are you available to meet next week?” Instead ask, “Are you available Tuesday at 9a or 2p or Thursday at noon?” This practice can save you hours of back and forth emails and wasted time trying to find out a time that works for the both of you. Provide 2 or 3 times that work for YOU and see if one of those options happens to work for your client or colleague.
- When grouping meetings together, be sure not to group them too close together in time or too far apart in distance. Make sure you give yourself a window for travel, cognitive decompression, etc. You don’t want to leave one meeting and head into another with the first meeting too much on your mind. You also don’t want to have to rush around and find yourself in a stressful window of time trying to get from one meeting to another if they’re far apart.
- When coming up with a daily routine that works for you, make sure it is realistic, attainable and flexible depending on your situation. If things come up and my day doesn’t line up exactly like I planned it, it’s ok – I’ll often reallocate the work that I missed to the next day in my open segments. I’ve found if I stick to a daily routine and focus on one or two projects and have some reactionary work time, it’s amazing what I can get done and can catch up on if I missed any to do’s from the day before.
Well I hope the daily and weekly routines that I’ve implemented in my business have helped inspire you to set some routines in your web design schedules! Again these are practices that have worked for me in my solo, work from home business but it may vary depending on your situation. So do what works for you! Do you have any daily or weekly routines that have helped you and your Divi Web Design business? If so, feel free to mention those in the comments below and let us know if these ideas have helped or inspired you!
Coming up tomorrow: Organization Tactics and Practices for your Divi Web Design Business
Organization is the key to your success with any business. Once you have control of your time with daily and weekly routines that work for you, it’s time to focus on organizing the technology and tools you use on a daily basis. We’re going to explore some practical ways to help you stay organized so you can take better control of your Divi Web Design business. Till then!
The post Creating Efficient Routines for your Divi Web Design Business appeared first on Elegant Themes Blog.
Powered by WPeMatico
Content marketing is on everyone’s lips now, it has become a ubiquitous practice, with 88% of B2B companies using it in 2016, according to the joint research by Content Marketing Institute and MarketingProfs. But if content is an important element of a marketing strategy and is used by a large number businesses, then why do so many companies fail to achieve the desired results with it?
Powered by WPeMatico
Why write a button design guide? Are buttons that important? Why spend so much energy on such a small part of the user interface?
While buttons are very common in web design and seem simple, their importance should not be underestimated. They are vital site elements that perform very important duties.
Especially as main calls to action and on e-commerce sites, buttons literally influence the bottom line. However, also as social sharing buttons, email sign-up and form-submission buttons are they central to a website’s success.
For that reason, in this article want to talk in detail about this often-neglected design element and how to create high-converting buttons for WordPress websites. While the focus will be on CTAs (calls to action), we will also talk about a lot of general advice when it comes to button design.
Did that topic push your button? Then keep reading.
Before We Get Started, a Quick Word on A/B Testing
Further below, we will go over some clear guidelines for creating and using buttons. These principles will help you think through the design, positioning and other important attributes of any buttons on your site.
However, at the same time it is important to keep in mind that this only forms the basis for improving your conversion rate. Design principles let you take an educated guess on what will work, yet to truly know which kind of button holds the key to converting visitors to subscribers, buyers or else lies in testing. Running A/B tests allows you to figure out what truly works for your site, which button colors, copy, position and other markers visitors best respond to.
Because everything matters. Even the smallest change can have a surprisingly large effect on conversion rates — both positive and negative. Go over these examples to understand what I am talking about.
So, while our button design guide will help you understand best practices, it is best supplemented with healthy experimenting to find the winning combination to your site’s success.
How to Design Buttons That Users Actually Click on
After this caveat, we now turn to what goes into crafting well-performing buttons for better calls to action and increased conversion rates. Enjoy!
Design Them to Fit Your Brand or Site
Before getting into functional design, it’s important to think about the context in which the buttons will appear. It’s no use creating the perfect button if it messes up your site.
For that reason, while the guidelines below are important, it also matters that their result integrates well with the context it appears in. That means your buttons fit you site’s color palette, style and overall design guidelines.
While you want buttons to stand out in order to prompt action, the goal is to have them stand out in a positive way. That means one that is in harmony with the overall design and doesn’t destroy it.
At the same time, don’t be afraid to experiment a bit. Sometimes a button in a contrasting color is just what’s needed to spice up an otherwise bland design.
Make Buttons Look Like Buttons
The first step to design buttons that get clicked on is to make them actually look like buttons. Calls to action and sharing options are good for nothing if users don’t understand they are supposed to take advantage of them.
Users have certain expectations when it comes to button design. If you don’t fulfill them at all, they will have a hard time taking the desired action. Therefore, it’s important to include visual cues that help them understand.
The first clue is shape. The most common shape for buttons is rectangular or rectangular with rounded corners. Computer users have been exposed to this design for a long time and are thus very familiar with it.
Source: Wikipedia Used with permission from Microsoft
Of course, other shapes are also possible, including squares, circles, triangles or even custom shapes. In fact, there are many examples of quirky and unusual buttons, for example on dribbble
Going with a less traditional shape can make sense in order to keep your site design congruent. Yet, as Apple’s iOS has proved with its rounded squares, that doesn’t mean it doesn’t work.
Image by Ienjoyeverytime / shutterstock.com.
Whatever you choose, just makes sure to stay consistent. Avoid using different designs for different buttons. Not only does that make for much better UI but also ensures that users will be able to identify buttons throughout your entire site.
Another important design cue are shadows and highlights. Drop-shadows have become a universal cue to show that elements are clickable or can be tapped. Even otherwise flat design uses them as a signal for functionality.
Provide Clear Labels
Besides the basic design, clear labels are also important for button usage. Without a label, there is no way for users to determine what they do.
Labels don’t necessarily have to be written, icons also work (see social sharing buttons). Using both together is another possibility, especially on buttons related to e-commerce.
Image by Prixel Creative / shutterstock.com.
What’s important is that the user can understand what effect their action of clicking on a button will have. If they don’t, they might avoid doing so in the first place.
Here are some guidelines for clear labels:
- Be descriptive and specific
- Use action verbs, e.g. Sign Me Up, Submit Form, Create Account
- Address the user directly
- Create a sense of urgency with words like Now or Today
- Keep it simple and clear
Labels are of special importance when it comes to CTAs. Changing just a few words can have great impact on a buttons performance. For example, Unbounce saw a 90 percent increase in click through rate by simply changing their button copy from “Start your free 30 day trial” to “Start my free 30 day trial”.
Yes, such can be the power of one word.
Put Buttons Where Users Can Find Them
This is really a no-brainer. If your users can’t find your buttons, will be hard pressed to click on them. For that reason, another factor for their effectiveness is location.
There are some conventions. For example, the main CTA can usually be fond above the fold. This makes sense and is by now anticipated by users.
The same goes for other types of buttons where users have be trained to expect certain locations. For example, buttons for previous and next are usually ordered left and right of each other.
Since this is so ingrained in the public consciousness, reversing the order might frustrate visitors and cause them to leave. And that’s the last thing you want.
However, also for buttons that have more flexible locations, e.g. social sharing buttons, thinking through where to put them is paramount. For example, you might think that placing social buttons at the end of your articles is a good idea. That way, users can share the post once they have finished it, right?
However, the majority of readers doesn’t even get to the end of your posts. As a consequence, a better idea is to place buttons where they can be accessed at any point of the reading experience. One such example is the Monarch floating sidebar:
When in doubt, a good rule of thumb for button placement is to ask yourself where users are going to look next. Design is supposed to guide the user on their way, so buttons can be the logical conclusion to their path across the site.
Pay Attention to Size and Spacing
Now we come to a topic that is especially important in mobile design. People who interact with your site via touch are less precise in their actions that those using a mouse. For that reason, you need to make it possible for them to use and reach buttons without a problem or the danger of tapping on the wrong one.
The first step is to make sure your buttons are large enough. The average human fingertip is 8-10mm large. As a consequence, Apple suggest to make elements that are to be used by touch at least 44px by 44px (use points instead of pixels for retina displays). The recommendations from other manufacturers also revolve around the 10mm mark. Of course, the size can be slightly decreased for web design aimed at desktop usage.
At the same time, you need to consider the spacing between buttons. You don’t want to frustrate users because they accidentally push stuff they didn’t mean to. Ample space also makes the elements easier to spot, which matters for primary calls to action.
Once buttons or your site are identifiable as such and usable, it’s time to think about the moment they are actually called in to action. Buttons can have several states of existence:
- Normal — Identifiable as button, signals ability to be clicked
- Focused — Changing when hovering mouse over it, confirmation for user that action is possible
- Pressed — Further change to reward user for taking action and confirms that something is happening
- Busy — When action is taking place in the background, button can reflect that
- Disabled — Shows that other actions are possible, just not at this time
By providing visual feedback to users for make use of buttons, you can make the interaction clearer and more pleasant. For other, similar ideas, check out article on micro interactions.
Make Good Use of Contrast
Not all buttons are created equal. While a landing page might have several links to click on, there should be only one that really matters.
The tools to make this clear to visitors are color, contrast and location. Use them effectively to grab attention and get users to click.
By contrasting buttons from the rest of the interface, you make them more noticeable. In addition to that, it avoids that they are getting lost among other elements.
When it comes to color, there is no one best option. Again, much here depends on your own design. A good rule of thumb is to go with a contrasting color and take it from there. For more on that topic, check our article on color matching techniques.
In addition to color, you can use different ways to introduce contrast including size, typography and whitespace. Contrast between button color and text can further enhance the effect and make copy more legible. Combined with a prominent position, these make buttons really pop.
To figure out whether your call to action is noticeable, use the good old “squint test”. Apply the design, take a few steps from the screen, squint your eyes and see if your button stands out. I know, it doesn’t sound very professional but it works!
— Design Pickle (@designpickle) July 25, 2015
Contrasting buttons also matters in order to establish order between them. When given two or more choices, a stronger color can signify which one you’d prefer or advise visitors to take.
Buttons are a central but often neglected element of web design. Undeservedly so. Especially in the form of calls to action, they can have tremendous influence on conversions, click through rates and other important markers of success.
For that reason, the topic of button design and placement should not be taken lightly. To recap, in order to create effective buttons:
- make sure they fit your overall design
- ensure users can identify them as buttons
- provide clear labels
- place them where users can find them
- pay attention to size and spacing
- provide feedback when they are used
- make them stand out from the rest of the site
These guidelines will help you set up buttons your users can’t help but click. However, as mentioned in the beginning, these best practices are meant to be treated as a starting point. To really figure out what buttons work for your site and how to improve conversions, button design should always go hand in hand with thorough A/B testing. Luckily, we also have an article on that topic.
What is your experience with button design? Anything important to add to the above? Please let us know in the comments section below!
Article thumbnail image by BerryCat / shutterstock.com
The post Button Design Guide: How to Design Buttons that Convert appeared first on Elegant Themes Blog.
Powered by WPeMatico
Divi’s blog module allows for all kinds of customizations. Aside from its standard adjustments, such as layout, font styles, borders, overlays, content, etc., you can adjust it even further with CSS. What if you wanted to change the look and add some features without having to code your own? A third party plugin called Divi Custom Blog Module might be what you need.
Divi Custom Blog Module adds a new module to the Divi Builder that provides new styling and features including social media tags, background colors for meta and categories, and more. It works in both full width and grid layouts. Add your own CSS to customize it even further. It adds 12 new customizer options so you can adjust colors in real time. It also includes three new widgets to place in your sidebars.
In this article we take a look at the Divi Custom Blog Module plugin and see what it can do. I’ve created a few sample blog posts so we can see how it works. The images for the blog posts are from Unsplash.com.
Installation and Settings
Upload and activate the plugin just like any premium plugin. Once it’s activated you’ll find a new menu item in your dashboard called Divi Custom Modules.
This menu lets you choose the additional items that can be added to the blog snippets.
DCM Options allow you to enable or disable social media and email icons that are displayed on the blog snippet.
DCM Options – Custom Meta allows you to enable or disable custom meta fields for author, date, and comments.
I’ve included all of these options within my examples.
Creating a Blog Layout
I created a page to display my sample blog posts and placed the module. Notice there are now two blog modules – the original Divi module (simply called Blog) and a new module called Custom – Blog. Select Custom – Blog.
All of the blog features that you’re used to are here including layout, post number, categories, meta, pagination, offset, featured image, image overlay, font styles, borders, icons, etc. You can set up the blog layout and design it the same way you would the standard Divi blog module with the same level of control.
To help us see the added features I first want to show the standard blog module. I’ve selected a grid layout and left everything else at default. It includes the featured image, name of author, date, category, number of comments, and a snippet of the article. It’s clean and looks great.
Here’s the blog layout using the Divi Custom Blog Module with the same settings. It moves the category name to the upper left corner, centers the post name and places it within a colored box, adds the social sharing buttons that I selected in the dashboard menu, and moves the meta information under the post snippet.
Here’s a closer view. Hovering over the social icons swaps the icon color and its background color – so the icon is now white while its background color is the social network’s branded color. In this example I’m hovering over the Google+ icon. Clicking the button takes you to that social network where you can share the article (just like any social sharing button).
Here’s the regular homepage (not using the Divi Builder) that just displays the latest posts. It’s using vertical navigation with an image in the background, the standard WordPress posts, and regular WordPress widgets in the sidebar. I wanted to show this for comparison.
Here’s a look at the normal WordPress post layout with Divi Custom Modules active. Even though this page wasn’t built with the Divi Builder it still displays the posts using Divi Custom Blog Module in full width layout with all of the same additional content.
The posts are stacked vertically with the image to the left, the title without a styled background, social follow buttons, and snippet. The category is in the upper left corner and the meta information across the bottom just like using the module.
Three New Widgets
The plugin also adds three new widgets:
DCM-About – name, title, position, image, description, and social networks.
Divichild Latest Posts – title, number of posts, category.
Divichild Popular Posts – title, number of posts, category.
Like the Divi Custom Blog Module, the widgets can be styled with the Theme Customizer.
Here’s a look at the widgets when placed on the standard WordPress homepage. The widgets are encased with the module’s colors. The About widget uses a similar layout design as the module when viewed within a grid.
Of course the fonts and colors can be modified to your heart’s content and you can add overlays with icons just like the standard blog module. We can do even more customizations using the Theme Customizer.
A new customization is added to the Theme Customizer called Divi Custom Blog Layout. Here you can adjust the colors of the tags, backgrounds, fonts, icons, and links for the module and the widgets. You can adjust the widgets individually or all together.
In this example I’ve adjusted the background, icon, and font colors. You can see all of the adjustments in real time.
Here’s a look at the blog module in full width with all of the adjustments I made in the Theme Customizer. This one uses the full width layout. Adjustments include the category tag color, meta module background and font colors, post title background, About widget background and social icons colors, and all widgets title color.
This one uses the grid layout. Both blog card styles look great.
The license allows for the plugin to be used on unlimited websites for you and your clients for as long as you like. Divi Custom Blog Module is so easy to use it doesn’t require documentation. If you can use a Divi module and the Theme Customizer you can use this third party plugin.
- This is a premium plugin. Follow this link to purchase: Divi Custom Blog Module
All of the additional elements give the post snippets a new look, but it isn’t just visual. The additions are actually useful. And of course you can adjust the colors and fonts to make it fit perfectly with your branding or topic.
I especially like the social sharing buttons added to each post and the About widget with social follow buttons. The Latest Posts and Popular Posts widgets add even more flare, allowing you to match the styling or style them individually.
Divi Custom Blog Module is simple, but between the module and the widgets it adds quite a bit of customization to make any blog look great. If you want to add some new features to your blog page or sidebars, this plugin is worth a look.
We’d like to hear from you! Have you tried Divi Custom Blog Module? Let us know about your experience in the comments.
Featured Image via hanss / shutterstock.com
Powered by WPeMatico