Welcome to part 1 of our mini series “Effective Divi Web Design Principles” where we’re exploring effective design practices to help empower new web designers and those who identify as someone without an “eye for design.”
In today’s visual age, design is more important than ever. Good design can make or break your business when it comes to converting potential clients to customers. It can be the difference between making a sale or having a potential customer click off your website looking for a more professional service or product. And while new web designers and developers often claim to have an “eye for design,” there are some basic design principles that everyone can apply to help become better at the “design” part of web design!
Series preface:
- The strategies, practices and tactics we’ll cover in this series are applicable to web design in general and are not Divi specific but this series will be based around my experience as a Divi Web Designer. Many of references, layouts and starting points mentioned will be involving Divi specifically.
- This series is largely meant for folks who are either new at web design or are of the developer mindset who feel they don’t have a natural eye for design. But hopefully many of these concepts will serve as inspiration or a refresher to already established designers as well.
- Great web design principles have been mentioned here on the blog before so we will be linking back to some previous posts and resources throughout the series. This is primarily a guideline to some of the most important principles in good design that I apply as a successful Divi web designer that you can apply as well!
- Finally, when it comes to good design, there is no right or wrong. In fact, it’s really a matter of balancing popular opinion, your personal creative opinion and the client’s wishes. We’ve all had that client who thought something looked great that we knew looked awful, right? Not everyone will agree to these design basics but it’s safe to say that these principles are universally shared by professional Divi designers and the web design community at large.
Here’s an outline of the mini series as we look ahead:
- Part 1 – 3 Ways to Learn How to Have a Better Eye for Design
- Part 2 – 3 Effective Web Design Principles for the Non-Designer
- Part 3 – 3 Important Areas of Design to Focus on for Every Website Build
Before we dive in, I must say that while I understand some people are more gifted in creativity than others, I strongly contend that YOU CAN learn good basic design principles. You may not become the Michelangelo of Divi, but by golly you can still learn some good design practices to apply to your web design endeavors. I’ll spare the embarrassment of posting some of my first web designs but I’ll just say that my “eye for design” is ever-evolving and is maturing more everyday. By no means did I start out where I am today. And frankly, design is important in more than just web design. It plays a big part in organizing content, writing emails, taking good pictures with your phone and more. So it’s very important to know a few basic principles to apply to other aspects of your life too.
So, if you’ve ever caught yourself saying any of the following;
- “I just don’t have an eye for design.”
- “I don’t have a creative bone in my body.”
- “I can code but I can’t design.”
Then this series is for you! Let’s get into it.
3 Ways to Prepare and Learn How to Have a Better Eye for Design
In the world of web design, people tend to identify with one of two groups:
Web Designer – A web designer, aka (front-end designer) will likely be drawn to the design, colors, layout and aesthetics of web design. They will likely come from a graphic design background or perhaps a more visual medium like photography or other creative arts. If you’re more interested with how things look and feel as opposed to how fast it loads, how clean the code might be or what customizations went into the php and css files, then you’re more than likely in this boat 🙂
Web Developer – A web developer, aka (back-end developer) will likely be more interested in mathematics, numbers and in the web design realm, the code, functionality and backend of websites. Whereas a “designer” might see shapes, colors, look, feel, etc, a more developer minded person might see something similar to the matrix – code, functionality, usability and things that lay beneath the surface of a website.
Both are key to a successful website design and in my opinion, a successful web designer needs to have a healthy mix of knowledge in both worlds. Personally, while I’m now well versed in design and development, I’m still drawn to the design side of things. I need to work ever-harder to consider load times, clean code and functionality instead of a constant focus on design, layout, look and feel. But for those opposite of me, it’s equally as important to focus on eye-pleasing design as opposed to a terrible looking website that loads quickly with clean code.
What we’re really talking about here is a mix of the left and right brain. This is probably no secret to most at this point, but there are numerous studies that the left side of the brain is analytical, mathematical, sequential, logical, etc. The right side of the brain is artistic, creative, insightful, imaginative, etc. This is key to understanding WHY you may be drawn to being a designer or developer.
In short,
Developer = Left Brain Thinker
Designer = Right Brain Thinker
An understanding of that leads us to the first main point.
1) Preparing Your Mindset
If you’re more of a creative, you’re more than likely going to have to either work harder at coding and the more logistical side of web design and vise versa, if your tendencies lean toward the left side of the brain, you’re going to have to work a little harder to develop a good eye for design. As mentioned above, I’m more of a right brain thinker and a creative. While I love CSS and can now get dangerous with PHP without sweating too much, I did not start off that way. I had to work very hard at the areas of web design that I was not good at.
But it started with my mindset. I knew what areas I was strong at and which one’s needed work. I want to encourage you on that point again, YOU CAN learn good design principles and YOU CAN develop an eye for design if you’re new or if you’re a developer without a creative bone in your body.
At this point, you’re probably saying “This is all great, but what can I do to prepare my mindset to learn good design techniques?” While we all learn differently, I’ll tell you what has worked for me and what I know has worked for many other Divi designers around the community.
2) How To Learn and Develop an Eye for Good Design
Learn by replicating good website designs – Yep I said it. If you see a good design, try recreating it, copying their colors, typefaces, spacing, layouts, etc. I’m not saying rip a site off in order to sell it as a child theme or as your work but from an educational standpoint, one of the BEST ways to get better at design is to replicate an already beautifully designed site. You’ll be amazed at how much you’ll learn and how empowered you’ll feel by replicating a beautiful design that you can mimic.
For Divi related inspiration, you can find some good examples of designs frequently here on the ET blog via the monthly site showcases like this one, through Divi Theme Examples or by following your favorite Divi designers and seeing what they come up with!
Learn by examining designs everywhere – While printed designs and other advertisements may not be ideal learning for web design trends, you can still pick up valuable design principles. For example, perhaps you see an ad with a strong image with the text designed in a modern, sleek way, you can very well take that same idea and apply it as a strong design on your site! I don’t dread a trip to the mall with my wife and walking into makeup stores now because I use that as “Josh’s trendy design take in time.” Time previously spent staring down at a phone is now often productively spent checking out new design ideas and concepts that I can apply to my web design projects!
Learn by building off of the Divi Library– One of the most magical things about designing a site with Divi is that it comes with a full library of proven, effective layouts and designs that you can build off of. If you’re new to design and Divi or are feeling stuck looking at a blank canvas, you can load one of the premade layouts from the library, change colors, replace images and get a jump start! Watch how reworking an already professional design will begin to train your brain for your next project.
Learn by downloading and building off of a free weekly Divi Layout Pack – If you’re a new Elegant Themes member or are not already aware, there are professionally designed Divi layout packs dropping weekly here on the blog that are FREE for download. Not only are these a great source of learning and inspiration if you’re interested in getting better at design, but like the library items mentioned above, these are great starting points if you’re new to design!
3) Get Feedback and Constructive Criticism on Your Work
Finally, one of the best ways to improve your design chops is to get feedback from others. Often, when you’re embedded in a project, it’s easy to lose your bearings on what looks good and what looks bad. Getting feedback and constructive criticism on your work is key to becoming better at design.
Now I get it, this is easier said than done. And you probably want to avoid getting destroyed or demoralized especially if you’re still learning, but if you’re using Divi, you automatically have access to the most engaged, supportive and helpful community online. There are numerous outlets to connect with Divi nation but my personal preference are Divi Facebook groups. I intentionally created the Divi Web Designers Facebook group with the primary purpose of being able to post work to get professional, helpful criticism and feedback to help us all become better Divi Web Designers. If you have any trusted family, friends or perhaps fellow web design colleagues with a good eye for design I also highly recommend getting their thoughts if you don’t want to get feedback online.
I find it very useful to get feedback because it’ll often point out either bad design that is overlooked, areas of improvement or more. For example, an area that I don’t have a great natural gift in and need to work hard at is typography. Not long ago, I worked on a site that I thought looked awesome from head to toe and when getting feedback, was told that the type I used didn’t seem to fit the “feel” of the site. After brushing off some initial designer pride, I realized that they could not have been more right. The type indeed did not correspond with the feel of the site. Since then, I’ve learned to be extra conscious of the typefaces that I choose in an effort to make them match the right look and feel of the site rather than sticking with my “go to’s.”
So if you’re feeling brave enough to get some constructive criticism, you’re welcome to come to do so in our Divi Web Designers Facebook group or any other Online Divi Communities if it adheres to the group’s guidelines. And as a side note, if you’re someone giving the feedback, I want to encourage you to be extra careful with your words and how you give constructive criticism. When giving feedback, remember to try and build up the person up, not tear them down.
In Closing
I hope this introduction to Effective Divi Web Design Principles has you inspired and pumped up for the rest of the series! Again, this first post was more of an introduction and preparation as to what’s ahead but is nonetheless important because before you can get better at design, it starts with your mindset preparation to learn.
Do you have any other thoughts or practices on how to learn better web design techniques? Let us know in the comments below!
Tomorrow: 3 Effective Web Design Principles for the Non-Designer
Now that we’ve covered preparing and learning how to have a better eye for design, it’s time to get into some actionable, practical design principles that’ll help take your design game to the next level! Till then!
Be sure to subscribe to our email newsletter and YouTube channel so that you never miss a big announcement, useful tip, or Divi freebie!
I’m quite new to Divi, although a web builder of around twenty years experience. I’m certainly more left brain and I’ve found that the Divi tool, the masses of beautiful design resources and inspiring articles such as this are an absolute Godsend for me. Thank you so much.
Josh,
Thanks for this series. I feel like it was written just for me!
That’s so awesome to hear, Jason! Indeed – if it helped that much then you’re just who I was hoping would read it! Appreciate the feedback.
Not only to write a great article but to respond to each and every comment is what deserves even more respect! 😉 Not all ET authors do it.
ha well thanks, Eugene. I figure if someone’s going to take the time to read my article and comment, least I can do is return the favor!
Josh, this was really useful. I particularly like the fact that you acknowledge the fact that design comes easier to other, but you can, with practice, improve. Great growth mindset! Thanks again!
Thanks for that feedback and affirmation, Jeremy! Yes I totally agree and really think it’s all about mindset. I feel some folks limit themselves by saying “I can’t design” when you can definitely learn some basic design techniques. Like I said above…I could post my first few designs to prove that 🙂
…a great start to helping us all learn how to create asthetically pleasing web sites! For me at least, I learn through structured videos, where I can follow along and Divi can be somewhat frustrating and intimidating at first. But as with learning any skill, “doing” is the key to success and eventually the whole designing process becomes easier! With the premade layouts, it definitely gives me a great start from staring at a blank canvas! Keep it coming! Cheers!
That’s a great point, Rich! Really appreciate your feedback on that. Yeah unless you’re using a child theme or layout, Divi is a blank slate to start designing with so it can be challenging. Even for experienced designers. Sometimes I look at a blank page and say…”I’ve got nothing yet.” 🙂 Thanks for your comment!
Great series, Josh!
But I also want to bring attention to premade layouts. They seem outdated and far behind Divi’s new features. I hope ET team is making something in this direction)
Thanks, Eugene! I can’t speak to the new layouts but I imagine with the rate that Divi is being updated, the layouts may have been constructed before some of the new effects. Again that’s just a theory but I’d imagine the new layouts that come out will feature several of the brand new features with Divi.
Thanks for your feedback!
Divi makes tools for you to design great websites with.
The premade layouts, although they can be used as a starting point to build from are also meant as a teaching tool so you can download them, get into the backend and see what was done with their tools to do what they did. You, on the other hand, can do whatever you want with the tools.
I came across what I thought was a great website “Eero.com” and the more I looked at it the more I realized, I have the tools, I can build that with Divi.
Why wait for Divi to provide your inspiration for you, it’s all over the internet, it’s everywhere you go, it’s all around you.
Very effective essay. There are, of course, two sides to a story, and Divi, though not specified in this essay, must take responsibility for the mission of the program as stated: “Divi is powered by the Divi Builder, an insanely fast and incredibly intuitive front end editor like nothing you have seen before. It will change the way you build websites forever”
Insanely fast? Intuitive? If you are a programmer these lofty statemnts might make sense but to the average person looking to create a website, Divi has a steep, steep learning curve. Is it better than many webiste builders? Yes, why be here if that’s not the case—though a recent flirtation with Wix has garnered some love. But let’s be clear, the fast, intuitive, insanely fast are marketing terms, not realities.
Hey Manfred, yeah out of the gate, Divi is a blank slate which can be challenging yet freeing as a designer. But no doubt child themes and all the recent layout kits are certainly helping those who like to have a starting point! I’ve found that once I get the homepage design down, the rest of my designing goes pretty quick with the design elements in place. I think that’s where Divi really shines. Good stuff though. Appreciate the comment!
You effectiveness as a designer will be determined by your client. Where and why you start and finish designing is dependant on your clients needs and reasons for having a website in the first place. Builders like Wix begin with a template which, once you’ve chosen it, cannot be changed without building another website (just like Square Space). You can’t start building/designing a website until you know what to build and why so what’s the chances that the template you chose matches what the client asked for unless of coarse they didn’t ask for anything except a pretty online presence!
With Divi I can start with a blank page and start designing anything I need to and yes, there is a learning curve but not anywhere as steep as you make it sound.
The builder is in fact fast, insanely fast and those terms are not marketing terms. I think what you meant to say was you are not insanely fast.
Stick with Divi. You’ll feel more empowered with every site you build and eventually you too will become intuitive and insanely fast at it.
Great points, Les!
I think the truth is somewhere in the middle. Whenever I’m watching the demos on elegant themes, I’m asking myself whether they have somehow sped up the footage… whenever I’m working with the Divi Builder and my mouse is moving around the canvas, all of the module and row options, etc. don’t pop up lightning fast.
As soon as you’re using some (non Divi) shortcodes somewhere on your page, the visual builder takes _a lot_ longer to load. Even if it’s a shortcode from an Elegant Themes product (try using an inline email optin produced by Bloom inside a site and edit said site with Divi and see how that goes…)…
At the same time, I’m not saying you’re wrong, Les. Divi is in my opinion by far the best WP premium theme out there, but at the same time, it should be possible to point out that there is something going on here that is borderline false advertising.
P.S.: This might also be a cultural thing. Germans for example have a very hard time accepting these bold terms that are super common in America. When I was in NY for the first time, there was a coffee shop that had opened a week earlier and they were talking about their “world famous cheese cake”. I was completely stunned how someone could make such a claim unless this was meant to be sarcastic. Then I realized that everything in the US is “world famous” and “the best”, etc.
Just like the country itself likes to call itself the greatest nation in the world without a president that supports that claim. ^^
YES! On the cultural thing. I was born and raised in South Africa from a British colonial heritage, now living in the US. It’s been a HUGE adjustment, marketing my business in the US…I’m still not all the way there :-).
Love this series, Josh! I recently came across the term “Devsigner”….I really resonate with that. My background is mainframe programming and I was able to move into web dev relatively seamlessly. Yet, my soul resonates with design.
I’m still having to learn the skills though since, I haven’t had any formal training. Divi and the surrounding community is helping a ton!
Hey Oliver, I know for me, the Divi builder load times often depend on the host. Most of my sites and my clients sites are on Siteground which does very well with loading speeds but my sites on Bluehost or GoDaddy…oh don’t even get me started 🙂 With some of the recent updates, there have been some issues with certain modules opening up slowly or timing out but the ET team seems to jump on those very quickly.
Thanks for your comment and feedback!