What are the core concepts of web design?
Web design elements
These are the elements of your site that your visitors can see or interact with. These elements are important because they are a big part of determining the user experience of your website.
This can include elements such as web copy, the colour scheme and layout, the spacing, and the font. It can also include more dynamic visual elements such as images and videos.
The key to getting the video elements part of your web design right is to think about how aesthetically pleasing. Breaking up walls of text with images and videos is a great idea, for example, but having the site too cluttered with these elements can feel messy and unprofessional. A consistent colour scheme, layout, and font will help users to build trust in your brand as they navigate your website. And having good copy will help them to feel safe that you know exactly what you're doing.
One of the most important web design elements is navigation. You need to make it as easy and intuitive as possible for a visitor to navigate your site or they will quickly get frustrated and move on to somebody else.
Your navigation system should be entirely self-explanatory and easy to find. For example, your drop-down menu should be quick to access and it should be easy for your visitor to find the part of the site they want to get to. Call to action (CTA) buttons (e.g. "buy now") are also an important element of navigation and these should pop out from the background in a clear way, for example by using differences in font size or colour.
Web design technologies
Have you ever loaded up a website and found that it looked completely wrong, with elements out of place and some of the site not fitting on your screen properly? This is something that it is vital to avoid when you are designing your own website because it will make your visitors turn away very quickly.
This was never an issue when websites were solely used on desktop computers but, with the rise of smartphones and tablets, as well as different browsers such as Internet Explorer, Google Chrome, Safari, etc, there is a large amount of variability when it comes to screen size. So while the way the pages were displayed used to be fixed by pixels, new solutions have had to be developed to take into account the different ways that users now view websites.
A website with this type of design uses flexible grid layouts that change in real-time depending on the screen size that is being used to view the website. It achieves this by basing the layout on the percentage of the screen that key website elements need to take up, with the rest of the layout being flexible and changing while retaining the percentage of the key elements.
Responsive design sites can take more time to design than other options but you also don't need to worry about how your site's pages will react to new screen sizes.
Rather than the website layout changing in real-time depending on the screen it is being viewed on, adaptive design websites have pre-designed layouts that correspond to particular screen sizes. This can either be based on the device type that is being used (which can be read from the HTTP request) or it can be based on the browser size (using a CSS feature called media queries).
Adaptive design elements can be quick and easy to design but new versions for the pages needed to be created every time a new screen size is in development.
There are pluses and minuses to each design solution, and there are some website builders that allow you to use a mixture of both responsive and adaptive which can give you the best of both worlds.