Web design is a very complex field that can contain various sub-fields. Some web designers are more specialized than others. Some of them might work on the layout and visual elements only – others do the web development side as well.
To give you an overview of the learning options, let’s talk about how a website is made. This will also help you to figure out which part might interest you and what is better left to others.
Your message
The first step in website creation is to establish what you need. A good starting point is to think about your target audience and the tone in which you should address them. This should make an impact later on the visuals as well.
Creating a so-called branding wheel can be very useful in this phase. It will help you to find answers to the most essential questions related to your business model. As an example, here is the branding wheel of The Cecily Group:
In terms of content, you’ll need to set up a hierarchy of headlines, sub-headers or outlines, and paragraphs. This will serve as a baseline for the structure and design.
Here are some tutorials on forming a strategy:
The Most Important Pages For Your Website and Tips For Writing Your Website Copy with Ashlyn Carter:
How to Write Content for Web with Chris Do:
The goal and the technical setup
Parallel to that, you will also have to think about your objectives. What is the ultimate goal your website will need to serve? Is it direct sales, sign-ups or simply providing information and helping clients to get in contact? These decisions will make an impact on the structure of the site but often also on the technical setup and expenses as well.
For example, if the goal is to sell multiple products, you will need an e-commerce site with a content management system (CMS) and features like a shopping cart, a checkout page, and payment processing. You can have these set up individually or pay for an eCommerce platform service (like Magento, Shopify, or even WordPress) and have it provided for you. If you decide to go for an eCommerce platform or even a simple CMS solution, it will also affect the design. Partly, because you will be presented with some ready-made choices, like default styling, pre-styled elements, and templates.
The technical setup can also predefine some design choices you can make, by limiting your coding options and the pool of designers you can work with. As an example, you are committed to having the best SEO scores possible, so you don’t want to have third-party JS libraries on your site and plan to use plain Javascript solutions instead. Not all programmers will be able to do that, so in the end, you’ll need to find the right ones or just give up on some features that require JS. If your site won’t be anything complicated, you might decide to go completely without JS, looking for someone with very advanced CSS/SASS skills. The same applies to any cutting-edge solutions in programming, so these things are best decided on early.
There are also website builders like Aida, Webnode, Wix, or Squarespace that require no programming skills if you are ready to set for somewhat limited options in terms of design and features. An advantage of CMS solutions or Website builders is that they also often have hosting options so you don’t need to worry about that either. All you need is to buy a domain and link it to the account.
Here are some tutorials to help you figure out what setup you’ll need:
Web Development In 2021 – A Practical Guide with Brad Traversy:
Probably you won’t do the backend yourself, but in case you are interested here is some information on
What Programming Languages the Most Popular Websites Use by Stefan Mischook:
Wireframing
At this point, some wireframes come in handy, and you can already try to design the client’s journey through the site. This will give you a better understanding of all the different features and pages you’ll need and can also serve as a base for your future site’s navigation system.
It depends on the tools you choose and which tutorials you’ll need. Wireframing can be done with a pencil on paper, or even in Word. But there are dedicated tools like Adobe XD, Sketch, Balsamiq, or InVision Studio that can level up your wireframing, and in the end, speed up the development process. They have features like responsive layouts, animations, interactive mock-ups, team collaboration, and so on. At this phase, there is no need for complex visualization though. It’s just about getting the base right.
Here are some tutorials for wireframing:
Famous UI/UX designer Jesse Showalter on wireframing by hand:
How to Use Balsamiq Wireframes by Michael Chow:
The visuals
If the basic structure is already established, you can move on and think about the visualization. Probably already have a branding, but if not, it’s best to start with the logo. The overall style, colors, and fonts can be derived from there. If you have your branding already, it’s still worth thinking about which elements’ end colors of it will work best online. For example, if you have serif fonts in your branding, those are only legible in large sizes on screen. And while for print materials white backgrounds are the most practical, you might want to have different background options or contrasting fields on your site.
It’s also a time to plan different page transitions, button animations, and scroll and hover effects. These details might seem insignificant but can add a lot to the overall feel of your site.
This part is often a time of team collaboration, where people come up with different ideas and work on prototypes together. Some of the more advanced tools like Invision Studio or Moqups can make it easy by having all the needed features integrated into the same platform. Other tools like Adobe XD (or Photoshop) have advanced asset creation features that can speed up the development process.
Here are some tutorials for prototyping:
Get started with our step-by-step guide by Adobe XD.
Intro to Sketch for Beginners by LearnSketch.com:
Prototype with Ease – An InVision Studio Tutorial by Bree Chapin.
Learn from this comprehensive Figma video tutorial playlist:
The development
Now that we have the plan all laid out, it’s time to implement it. Ideally, the result will look and work like the prototypes. It happens that some things don’t work out as planned, either due to technical issues or differences between the prototype and the result, but sometimes there’s a simple change of heart. In these cases, it’s generally better to get back to the prototyping stage, as it takes less time to try things there than to code them.
The tutorials you’ll need depends on the technical setup and design directions you have chosen in the earlier steps, but for most website HTML, SASS, and, vanilla JS is a very recommended approach. The reason is, it will make your website lightweight but very versatile and easy to adjust.
Here are some tutorials to get you started with the development:
Modern HTML & CSS From The Beginning (Including Sass)
20 Web Projects With Vanilla JavaScript
The final touches
How to know if your web design is successful? You’ll need to test it. As you see, a website is a complex creature of visuals and content that work together. Web traffic analytics and online and personal survey are required to find out where the problem lies if there are any. Based on the feedback you got you can always adjust. Just don’t forget to build your website from the base to the top, as recommended here – that way the required changes won’t be anything fundamental.
The 7 Best Tools For Website Testing – How To Test a Website by Robin Waite:
The Ultimate Google Analytics Course For Beginners 2021
When creating The Cecily Group’s website, we decided to start with the key content and keep adding new features. We aimed for a base that is solid, but very flexible and extendable.
We wish you the best of success with your website!
