Website Design is the creation of the user side of a website.
It is the harmony between graphic design, user experience design, interface design, search engine optimization, and content creation.
Website Design should not be confused with Web Development. Web Development builds the frame that 'holds up' a website through coding and engineering, which allows a website to be seen on the Internet.
To begin, one must understand what the goal of Website Design is- to create a website that promotes a users' trust in a company/brand, is easy to use, while also being suited to the user base and brand/company.
To reach that goal, a Website Designer will sit down with clients to discuss the needs, design, and functionality of the client's website. They will then prototype, code, create and test interfaces and applications of the website (either solo or as a team). Website Designers will add audio, graphics, and video to the website as needed, and monitor website traffic once the website goes live.
Many Website Designers employ one of two strategies to make this happen- either Responsive Website Design or Adaptive Website Design.
Responsive Website Design
Short Version: This approach for Website Design focuses on making a layout dynamic, moving and resizing the design to fit the size of the screen viewing the site.
Long Version: Responsive Website Design builds a website that adapts to the users' screen. This is done by basing the website on a flexible grid with an equally flexible layout with the help of CSS (Cascading Style Sheets) media queries.
When setting up a responsive website design you must always take into account the users' settings. Your website should not be unusable just because a user is using a VPN on a mobile device or a computer. The point is to make it respond to user preferences, and react accordingly.
Adaptive Website Design
Short Version: In this approach, the layout is fixed in place, but is sized to the most common screen sizes.
Long Version: Like Responsive Website Design, Adaptive Website Design is alerted to the screen size of a user as they access the website. However, Adaptive Website Design chooses a layout from a selection of premade choices, instead of moving to fit the screen.
This means that a designer has to make multiple versions of one website in order to achieve this. Each size has to have the same information accessible. This approach can be costly to businesses/brands.
Also, if a user is using a non-standard sized screen to view the website, the website might not display correctly to the proportions and impact how a user interacts with a website.
There are 5 things to keep in mind when designing a website, regardless of what programs or tools you use.
1. Keep it simple
The number one things to keep in mind is that making things complicated will not make users happy.
2. Make it easy to use
Everyone should be able to use your website with ease. That might take extra work and testing to make sure that screen readers can read the text, and that the navigation is intuitive and user-friendly, but it is worth it to go the extra mile.
3. Use white space wisely
White space, or negative space, is just as important as space set aside for graphics and text. Having spaces between chunks of text and graphics are important for legibility.
4. Use graphics creatively
Graphics can create visual interest in your design, but too many can be detrimental. Take the time to make sure that what you use compliments, not complicates, your design.
5. Be Consistent
Before you start putting together your website, sit down and make a list of fonts, colors, design elements, and where they will be placed throughout the design. Looping back to Rules 1 and 2, you want to make your simple and easy to use. Something outside of the planned choices can disrupt the flow of your design and confuse users.
Color Theory and Color Psychology can help you design a website that is appealing to look at, and subtly brings good emotions to it's users minds. For more information and resources on both, see this page in our Graphic Design Libguide.
When we talk about color on computers, we have to be aware of the 3 different color systems.
RGB
The first one, which web design uses, is the RGB (Additive) color system. This system is based off of light, and follows Newton's experiments with light- The maximum value(255) of all basic colored lights is white, and the minimum value (0) is black. It is written out like so:
R: 225 G: 225 B: 225
This would give you pure white.
R: 0 G: 0 B: 0
This would give you pure black.
CMYK
The second one is CMYK, which is mainly used when a design is meant to be printed. For CMYK, the maximum value is 100, and the minimum is 0. It would be written out like this:
0,0,0,0 or C:0 M:0 Y:0 K:0
This would give you pure white.
100,100,100,100 or C:100 M:100 Y:100 K:100
This would give you pure black.
HEX
HEX uses a 6 digit, 3 byte, hexadecimal description of each color. It uses letters and numbers together. Note that every 2 characters represent a color value.
It would be written out like this for pure white:
#ffffff
And like this for pure black:
#000000
For additional information, see recommended these websites:
Interaction Design Foundation (has additional courses on UX Design, and open-source literature hosted under the Literature tab)
Robin Gandy's What is Web Design? The Ultimate Guide to Website Design (2022)
Computer Basics (from the Game Design LibGuide- a review of the components of a computer)