If you are a graphic designer who went to a traditional design school, you’ve most likely learned important design skills such as color theory, layout, and typography. You’ve mastered the Adobe Creative Cloud. You know the difference between vector art and raster art. Now you’re freelancing, and most likely being asked “do you design websites?”
When I graduated from college with my BFA in graphic design many years ago, I knew I wanted to learn how design websites, but was having a difficult time making the transition. I started my career during the dot.com boom when there were more web design jobs than designers to fill them. I got a little lucky in this respect — I ended up getting a web design position with ESPN.com where I learned how to design websites on the job. Back in the day, designers had to both design and code, and I had to get my coding skills up-to-speed quickly.
The web design world has changed, and while designers are no longer required to hand-code websites (there are web designer and web developer roles if you’d rather do one or the other) there is still a huge need for web designers who can design a full website from start to finish. WordPress.org has made this possible, and learning how to build a custom website in WordPress (much more than simply tweaking a theme) is a very valuable skill set for traditional graphic designers.
Stage One – Design
Utilizing your traditional design skill set will be an asset to you as you design websites. And though there is a “form vs. function” debate—often among designers and developers (read this article!) I would argue that both form and function are equally important in web design.
Things to consider as you design:
- Does the client have branding? If not, is there an opportunity to offer branding and logo design services?
- UI (User Interface) design is the aesthetic appearance of the website. Designing a beautiful website is much more than making it look “pretty.” Now’s your chance to put your design skills to good use. Consider visual hierarchy—what needs to stand out on the page? What information should be “above the fold?” How can you use color to help enhance the natural flow of the elements on the page?
- UX (User Experience) design refers to how people interact with the website. UX design focuses on the user—to understand their habits, needs, behaviors, motivations, and emotions. A UX designer considers how the experience makes the user feel and how easy it is to accomplish the desired result. For example, is the nav user-friendly? Will users naturally understand where to find information on the page?
Creating a web design prototype (we use Figma at our agency) is a good way to start thinking about the design process before building the website. It’s also a great way to get the thumbs-up on the design direction from the client before your start building the website in WordPress.
Stage Two – WordPress Development
An important part of designing a website is understanding the technical limitations and constraints of the WordPress.org platform. This needs to be considered during the design phase as well—you don’t want to show a web design prototype to a client that you can’t execute.
The good news is that there is lots of design flexibility in WordPress.org if you are using the right theme and plugins. The theme and plugins is the foundation of the website—your “toolbox”, and you’ll need to know the ins and outs of your tools in the same way you need to learn Photoshop to do advanced photo editing or Illustrator to design a logo. Designing a website without having a deep understanding of WordPress, your theme, and your plugins is like trying to create a professional work of art with crayons! You can make it work, but it won’t be what you envisioned, and it won’t look professional.
Learning How to Design Websites in WordPress.org
In order to design truly amazing websites, a WordPress.org deep dive is needed. A lot of courses only cover the basics of the WordPress building blocks, and a lot of courses are talking about WordPress.com which is completely different than .org. (WordPress.com is NOT a professional website building platform!) A good course for designers should include the following in the cirriculum:
- WordPress.org (not.com)
- A professional, flexible theme (it will not be a free theme) that allows you to be creative, offers many different layout options, and focuses on speed, stability, and accessibility.
- Plugins and how to best use them
- CSS for styling
- Hosting options
- Features a lot of clients want — such as slide shows, newsletter signups, and contact forms
- Mobile-responsive design
- SEO Optimization
Around 75% of businesses have a website. It’s a “virtual business card” and often serves as a digital marketing hub. Taking the time to learn how to design WordPress websites as a graphic designer will not only add valuable skills to your resume, but will provide you with a steady stream of work and income for years to come!
