What is the difference between web design and GUI design?

Firstly, the relationship between inclusion and inclusion is analyzed from the technical point of view.

GUI=Graphical User Interface is used to help users interact with machines after the appearance of computers.

Graphical User Interface (GUI, for short) is a Graphical display of computer operation User Interface. Graphical interfaces were more visually acceptable to users than the command-line interfaces used in early computers. Such an interface, however, would require more computing power to “alert the user” to changes in the state with a variety of beautiful, non-monotonous visual messages at specific locations on the screen than would be required for a simple message presentation.

What-is-the-difference-between-web-design-and-GUI-design (1)

A graphical user interface (GUI) is a human-computer interface display format that allows users to use an input device, such as a mouse, to manipulate on-screen ICONS or menu options to select commands, invoke files, launch programs, or perform some other everyday tasks. A graphical user interface has many advantages over a character interface that performs routine tasks by typing text or character commands through a keyboard. Graphical user interface by the window, drop-down menus, dialog boxes, and corresponding control mechanism, in a variety of new applications, are standardized, namely, the same action is always in the same way, in a graphical user interface, the user sees and operations are graphics object, the application of computer graphics technology.

With the rapid development of China’s IT industry, mobile communication industry, and home appliance industry, the development level of product human-computer interaction interface design lags behind day by day, which undoubtedly plays a restrictive role in improving the comprehensive quality of the industry and enhancing the competitiveness with the international counterparts.

The wide application of GUI is one of the great achievements of computer development. It greatly facilitates the use of non-professional users. People no longer need to memorize a large number of commands but can use Windows, menus, keys, and other ways to operate easily. Embedded GUI has the following basic requirements: lightweight, occupying fewer resources, high performance, high reliability, easy to transplant, configurable, and so on.

UI=User Interface refers to the overall design of human-computer interaction, operation logic, and beautiful Interface of the software. UI design is divided into entity UI and virtual UI, the Internet said UI design is virtual UI, UI is User Interface(User Interface) abbreviation. Good UI design is not only to make the software become personalized and tasteful, but also to make the operation of the software become comfortable, simple, and free, and fully reflect the positioning and characteristics of the software.

Accordingly, the functions of UI designers generally include three aspects: one is graphic design, product “appearance” design of software products. The second is interaction design, mainly in the design of software operation process, tree structure, operation specifications, etc. What a software product needs to do before coding is interaction design, and establishing interaction model and interaction specification. The third is user testing/research. The so-called “testing” here aims to test the rationality of the interaction design and the aesthetics of the graphic design, mainly by measuring the rationality of the UI design in the form of a questionnaire for the target users.

What-is-the-difference-between-web-design-and-GUI-design (1)

Research interface: Graphic UI Designer

Most UI workers in China are engaged in this industry, and they are product appearance designers who understand software products and are committed to improving the user experience of the software.

Human and Interface: Interaction Designer

Before graphical interfaces were invented, UI designers were interaction designers for a long time. The interaction designer’s job is to design the software operation flow, the tree structure, the software structure and operation specification (SPEC), etc. What a software product needs to do before coding is interaction design, and establish interaction model and interaction specification.

Researcher: User experience engineer

Any product needs to be tested for quality, the code of the software needs to be tested, and the natural UI design needs to be tested. This test has nothing to do with coding, but mainly tests the reasonableness of the interaction design and the aesthetics of the graphic design. The test method is generally to use focus groups, with the form of a target user questionnaire to measure the rationality of the UI design.

To sum up: UI design includes a GUI.

What-is-the-difference-between-web-design-and-GUI-design (1)

If you look at the competency model of a UI designer, you should have four dimensions of competence:

1. Ability to communicate and document writing

If the UI is the bridge and link between man and machine interaction, the UI designer is the design of software developers and end-users time interactive the bridge and the link, if the UI designer cannot possess good communication and understanding ability, can’t write a good guiding principle and specification, so, he will not be able to reflect the double value of the developer and customer, He couldn’t do his job.

2. Excellent technical ability

You can’t write Java, but you can’t be confused about what Java is and what it can do. Even if you can’t write code, you should know how to “implement” it. For example, if you want to make a Grid control, first of all, you should know which data formats are available and how they are stored. You can get the data from an HTML Mark, a JSON object or an Array, or an XML or even a string. Second, you need to know whether implementing on the Server side or the Client side is more appropriate for the current environment. All of this depends on strong technical skills and rich experience. UI designers who do not understand technology can not make reasonable designs, nor can they communicate effectively with developers. In short, the UI designer should be proficient in the mainstream presentation layer development technology at least (if doing the Web presentation layer, generally need to be proficient in HTML, CSS, JavaScript, XML technology, even JSP, Java to reach the working layer), and have enough understanding of the mainstream design patterns, technical routes and open source framework in the market. It can be said that the UI designer should strive to be as much of a presentation architect as possible in terms of technical competence.

3. Graphical design ability and prototype development

Graphics and prototyping are probably the most important parts of a UI designer’s life, so let’s start by talking about what prototyping is. Prototyping is a common method in the design stage of iterative development. Prototyping should run through the three stages of requirements, outline design, and detailed design. The purpose of prototyping is to turn the design into an “interface language” that the user can understand, and also guide the developer (or even to be part of the development process). The value of user interface prototyping is that it can help software designers find the defects in all stages of design in advance, solve these potential problems before development, and significantly reduce the risk and cost of software development. This is essentially different from the traditional waterfall development. At present, most domestic companies still adopt the waterfall development model and put the UI design in the later stage of development. Not only does this prevent UI designers from making the most of their strengths, but it also results in products that are fatally flawed and fail to meet the needs of their customers. Therefore, the “artist” in companies is the result of outdated and imperfect software development methods, not the “artist” or the UI designer profession itself. In fact, UI designer is just a general term. Within the UI design industry, there are several types of roles: usability and interaction designer, visual planner, user experience researcher, graphical user interface designer, etc. A UI designer is a GUI designer, and the primary job of a GUI designer is visual positioning and creation. If the UI designer doesn’t have solid graphics skills, then he can’t express his vision of beauty, and there’s no way to “communicate.” Graphic design skills are the basic skills that every UI designer has at the beginning. It’s also the best measure of a UI designer’s skill level.

4. Human factor theory and cognitive psychology

This is a big concept, but it is something that every UI designer should strive to explore all his life after a solid career. It can be said that the essence of design is “people”, and a human-oriented interface naturally requires an understanding of people and their behavior. For example, you can’t design an interface that displays two important messages at the same time in different places on the same screen — because people can only focus on one thing at a time, and that’s biologically determined, not someone’s judgment. To give you another example, why every time Windows is updated, it finds more or less the same thing as it used to be, which you might say is Microsoft’s design style. No, it’s not a style, it’s a habit. It used to be Microsoft’s habit. Now, you use Windows, so you have this habit. Which of Apple’s and Microsoft’s operating systems is better? The answer is, whatever you like. Yes, how simple a truth — like, like is a habit, how can you be sure that you think the “right” design is exactly what people like? Just to mention the ExtJS, Ext style, in short, the traditional desktop interaction style (WMIP), what is the Web style? If I have to say, I prefer the Web is an open magazine, a hot land to show the talents of designers. Why do you say so? Because of the uncertainty and openness of the Web. WebUI design, in my experience, is one of the most difficult and restrictive (and often uncertain) areas of software UI design, and a good WebUI designer can be relatively successful even if he or she switches to desktop UI design or mobile device interface design. Therefore, as a WebUI designer, it is understandable that he rejects the desktop UI style because of his habits, his “likes”.

What-is-the-difference-between-web-design-and-GUI-design (1)

Extended information

UI Designer Requirements:

  1. Responsible for the overall design of the pages/applications of the company’s products on a smart TV, PC, and mobile terminals;
  2. Realize product style design based on user experience, human-computer interaction, graphical design, interface design, and other cutting-edge theories;
  3. Fully understand the ideas and concepts of product planning, and cooperate with product manager and R&D personnel to realize the visual design of various product interfaces;
  4. Establish and improve product interface visual design specifications;
  5. According to interaction design and product planning, complete the visual design of the user interface related to products (iPhone, Android, Web platform APP, and website).
  6. Cooperate with graphical interface (GUI) design in product development.
  7. Completed the design and production of thematic pages and FLASH for product related promotion activities;
  8. Communicate and cooperate fully with the R&D team to confirm the controllable error range and the final realization of visual effects;
  9. Constantly optimize the graphical interface (GUI) of products according to the development trend of visual design and the results of user research.
Shopping Cart
Scroll to Top