What is a beautiful website? How should the website be designed to be both functional and beautiful? All, good and beautiful design has a definition and principles. Where to start designing a website?
In this content and its subsequent parts, we will read a summary of a book about website design. This content is very useful for those who
- They are interested in web design
- They have just finished the website design training and still don’t have enough experience in it and don’t know where to start designing a website.
- They want to design a website by themselves and they didn’t even get training.
So, if for any reason you want to enter the world of website design and the questions that were raised at the beginning are the questions that you want to find the answers to; Read this book with us.
Table of Contents
The Principles of beautiful web design
In 2007, three experienced and professional web designers (Alex Walker, Jason Beaird & James Michael George) wrote a book called The Principles of Beautiful Web Design. That book was well received and its fourth edition was published in 2020. The authors wrote that book because they believed that the basic principles of web design should become common knowledge. Because we live in a world where we deal with several websites almost every day. It means that we are both users of different websites and we may have jobs and professions related to website design and development.
Websites should be functionally and beautifully designed so that the data transfer and website message happen in the best possible way and users can use them. On the other hand, businesses also pursue an important goal: to attract the user to their website so that the user reads the available content and performs a certain action (such as buying a product or service).
If the website is not designed beautifully and functionally, neither users will be able to use it nor businesses will reach their goals.
So, where should a web designer start the web design process? From the initial design and arranging of the overall structure of the web pages (Layout), which is the subject of the first chapter of the book.
What is the design process and where does it start?
Design is done in space. That space may be a business card or a website page. The first step is to find out how that space is going to be divided. Because each design component is related to each other in the design space. To understand the first design, the spatial relationship between the elements must be understood.
The cornerstone of web design begins with a basic plan for the layout and composition of the site’s pages. The most difficult task for the site developer is exactly this step. Where should the site developer start and how should he divide the site space between the elements?
Website design can become a double-edged sword. Web design is somewhere between art and knowledge and problem-solving. On the one hand, visual beauty should be achieved and on the other hand, the needs of the site owner (customer) should be met. Of course, for site designers, customer needs and wishes are prioritized.
So, the web design process starts with listening to the customer and discovering their needs.
To draw the initial design based on the client’s request, which is called a complete model in web design (Comp or Comprehensive dummy is a detailed image of the layout and composition of the site pages that is prepared with HTML before creating the prototype), three steps must be taken: Identification, research, and implementation.
1. ID
The designer and developer of the website must know the customer completely and accurately. This work is possible in a meeting, preferably in person, by asking targeted questions, listening, and taking notes. Be sure to Google the business (website owner) before the meeting. You should not be satisfied with the information provided by the employer to the designer. It is necessary to collect information about the employer and the project from different sources.
The following questions will help the designer both prepare for the first meeting and be ready to ask targeted questions during that meeting.
If the design project is a new site:
- What is the company’s job?
- What is your position in the company?
- Does the business have a registered logo or brand?
- What is your purpose for having a website?
- What information do you want to publish on the site?
- Which companies are your competitors? Do they have a website?
- Which sites do you like and which sites do you not like (ask for examples)?
If it is a website redesign project, ask the following questions:
- When a user enters the site, what is he usually looking for?
- What are the problems with the current site design?
- What do you want to achieve with the redesign of the site?
- Are there elements from the current site that you want to keep?
- How do you think your users will react to the new site design?
If the development project is a new application:
- What is the purpose of the app (what is it supposed to do for the business)?
- On which platforms (web/native) is the app supposed to work?
In all three situations, ask the following questions:
- Do you have examples of sites or apps that you like and don’t like?
- What competitors does the site or app have in this field?
- Who is your target audience? Do they have any common characteristics, for example, age, gender, or where they live?
- What is the budget of the project and in what time frame should it be finished?
2. Research
Now it’s time to analyze and review the answers to the questions and the information you received from the customer. This next step is completely up to you. You must put yourself in the shoes of the site users (business customers). You have to ask yourself what they are looking for. What do they want to buy? What is the best title for each page of the site? How should the information be classified on the site?
At this stage and by finding the answers to those questions, you do information architecture (Information Architecture or IA). For complex and detailed information architecture sites, it is a separate and specialized work. But the principle of work is also applicable to small projects. You should organize the content of the site in such a way that it shows the user’s movement path in the site in a structured way. That structure becomes the basis for the design.
3. Performance
Now it’s time to draw the layout of the site. At this stage, you are not going to engage yourself with the technical discussions of site development. It doesn’t matter whether you are going to use content management systems or write it from scratch with HTML. Take a white paper. You should not think about any technical and specialized points. Don’t think about the limitations of browsers and CSS in implementing the layout. You must design an interface for human-machine interaction, that’s all.