When the Internet just emerged, the threshold of UI design was very low. Maybe you can find a very good job only by graphic design or simple web design. But now, with the popularity of smart phones and the arrival of the 5G era, the base of netizens is getting bigger and bigger, and people's requirements for interfaces are getting higher and higher, and the requirements of corresponding enterprises have also changed greatly. With the enhancement of humanized consciousness in product production, more and more enterprises begin to pay attention to the investment in interactive design and user testing. Enterprises not only need UI design to understand design, but also need to understand interaction, user psychology, even code, AE production dynamics, illustration, hand drawing and so on.
Having said that, how can we learn UI design? How to become the UI design needed by the market? I am going to explain the specific learning steps and learning precautions from a mature UI design course.
First, how do we learn UI design? How to become the UI design needed by the market? 1, hand-drawing and software foundation-horizontal hand-drawing of software
Can you learn UI design without artistic skills?
The answer is definitely yes, but UI designers with artistic skills will make their competitiveness more prominent to some extent. Creativity is very important for UI design, but it is only one aspect. Being able to express your creative ideas accurately through different ways and means is another aspect. For designers with artistic foundation, there will be more forms to express their ideas, such as hand-drawing, illustration, realistic icons and so on.
So we should learn to use hand-drawing in the future UI design work. The purpose of this part of the study is to master and understand the structure, light sense and spatial relationship of the body through hand drawing. In the later stage, hand-drawing can be infiltrated into the works, combined with hand-drawing and mouse drawing, from zero to one, and further infiltrated into the project works, such as e-commerce home page/special page /APP splash screen/default page, etc.
Learning hand-drawing does not require everyone to reach the level of professional art students, but let everyone learn to express their works better by hand-drawing. Because the inspiration brought by software operation is far less clever than that brought by hand drawing. For every mature designer, good ideas and ideas must not come from computers first, but from books first. Hand painting is the best expression and expression of creativity and inspiration. Cultivating the habit of hand-drawing and knowing how to do it can further expand the designer's thinking, quickly present your demand for graphics on sketches and try to compare the rapidly evolving graphics, thus improving work efficiency.
Therefore, for the hand-painted part, combining hand-painted and design in the project can have the following learning process:
Understand objects through still life exercises, perspective/light and shadow/three-sided pentatonic.
Understand the color relationship through saturation, lightness and hue, and understand the emotional expression of color by analyzing the positive and negative psychological hints of each color.
Use ps software to draw icons by hand to improve the familiarity of the software.
Hand-painted mouse painting combined with painting skills (illustration copying)?
software
Software is an indispensable auxiliary tool for UI design. There is not much learning about tools. What is important is whether you can skillfully use tools to express your ideas and make tools your right hand to help you complete the design. Choose one or two skilled operations for each kind of design tools, and you can get started quickly when you encounter similar tools in your future work.
In fact, the fastest way to learn tools is to learn with purpose. Using reverse learning can make you understand the meaning of this function more clearly and intuitively. Starting with cases, we learn new tools from cases, so that tools, technologies and cases can be integrated, thus deepening the introduction and improvement of software and its comprehensive ability.
So what is reverse learning? Let's briefly introduce two tools commonly used in design, PS and AI. Other tools can also refer to this learning mode. As for the proficiency of software, it takes time to practice again and again.
(1)PS, Adobe Photoshop, is an image processing software developed and distributed by Adobe Systems. I believe that not all the partners in the design industry have heard about it, but it is a design tool that design professionals must master. Photoshop mainly deals with digital images composed of pixels, with the emphasis on image processing.
?
When you first come into contact with PS, you need to master the basic knowledge of PS, detailed tool explanation, Boolean operation, layer style, blending options, masking, adjusting layers, filters, blending modes, pictures, etc. How can I understand these functions step by step?
PS basics: Learn more about tools, layer styles//layer adjustments. (Case demonstration)
Learn ps Boolean operation and apply it to graphic drawing.
Master the mixed mode/mask through the poster synthesis case.
Use image adjustment (curve, hue saturation, color balance, etc.). ) to adjust the color of the composite material, the unity of light and shadow.
Use filters to achieve distance, truth, sharpening, distortion and other purposes. In poster synthesis/use camerrawfor final adjustment of synthesis.
Only through the analysis of commercial actual combat and the deduction of results can software and design thinking be combined. In the process of reverse push and copy, let our tool foundation be more solid.
(2) AI, Adobe Illustrator, is an industry standard vector illustration software applied to publishing, multimedia and network images. Its powerful function and considerate user interface make it the best choice for most designers to choose vector editing software. ?
For AI, you need to master the graphic symbol function and using skills of AI, the gradual change of AI, the mixing tool and 2.5D illustration. Then, master the drawing tools, and learn the colors in illustrations by learning the styles of mainstream illustrations and changing their styles. Finally, the drawing skills and font design of logo graphics are realized.
Ai Foundation: By learning pathfinder/mastering graphic symbols, master the ability of graphic subtraction, intersection and addition, and enhance the aesthetic feeling of graphics or design.
Appropriate illustration, strengthen the understanding of object structure/light/color.
Comply with the current fashion trend, and deeply understand the mainstream vector illustration form through people and scenery.
These are actually just a basic understanding of the tool, so that you can understand the function of the tool and then get familiar with the tool again and again. As for how to use these tools, we need to continue advanced learning.
2, design basis, design theory-design thinking
Without design thinking and skillful tools, the designed works will not be recognized by the public. So we must learn the design principle and master the design foundation. Integrate theory with practice and present your ideas perfectly and reasonably.
At this stage, Logo design, font design and VI manual design can be introduced, and practical exercises can be interspersed in theory to make learning purposeful and operation reverse design thinking. ?
What is logo? How to start making original logo? What are the common forms of logo? Here will combine Logo and text design to explain the learning steps.
Learn the composition of plane: point, line and surface, and understand the basic elements of plane space. Through design, the elements become more refined and have more visual impact.
Learn the repetition, approximation, gradual change and variation of the basic form of plane structure, and cultivate logical thinking and modeling ability in order to apply it to practical design.
Develop yourself from the brainstorming of logo design and extract design keywords from macro to micro in the thinking space.
Learn all kinds of LOGO sketch schemes, and you need to use the hand-drawing skills you have learned before. Then select one of them to continue optimization.
Through the combination of different keywords, the graphics can be refined, combined and reorganized, given keyword graphics, optimized and finalized.
Understand the literal structure, center of gravity, unique combination words, Chinese palace treatment, etc. According to the vertical and horizontal strokes of the font, master the font deformation design, improve the renderings of the logo proposal, and enhance the probability of over-submission.
Logo text part extraction redesign
Finalization of logo graphic text combination
In logo design, we studied the composition of plane and font design. And we also interspersed design knowledge in the study of the album. For example, color psychology, color contrast and matching skills, vi basic+application part specifications and content, scene application renderings, dimensions and materials. Through your own simulation project, you can master the basic part of vi manual in depth.
Learn VI visual manual specifications, focusing on refining VI visual manual header and footer design.
The simulation exercise project thoroughly grasps the basic parts of vi manual from the perspective of Party A and users, such as enterprise logo, standard colors, standard fonts, Chinese and English printing specifications, auxiliary graphics, wrong applications, etc., and designs the basic parts according to the characteristics of enterprises.
In the application part of vi manual, suggestions on the landing and effect display of Party A's professional finished products are given from the aspects of usage scene, materials, technology, size and display environment.
Improve the effect diagram of vi manual proposal. ? ?
3. Web page/e-commerce operation design
Graphic design is the basis of UI design. We learned the design basis and design thinking through graphic design, which reduced many doubts in the learning stage of UI design.
In the Internet age, most enterprises realize how important it is to attract more potential customers through online information. The impression of these potential customers on your company and products depends largely on how much energy you put into website design. Enterprise stations and e-commerce platforms are also indispensable communication platforms and C-side independent trading platforms for enterprises under the Internet environment, and are the mainstream in the Internet industry.
For web design, you are required to be familiar with and master the norms of web design, understand the basic framework and grid layout of the website, focus on the interface design norms and output norms of enterprise stations, and be able to design pages according to the real needs of enterprises. Master the layout/composition/typesetting/color/text/picture collocation in the webpage, and master the design skills of the first focus map of the enterprise station.
The e-commerce part needs the design requirements and specifications of the e-commerce industry, learning different types of design methods and store packaging methods in the e-commerce industry, mastering the whole process of e-commerce design and the layout design of e-commerce banner.
With so much knowledge, everyone looks great. Don't worry! ! ! We will break down this knowledge and take you step by step.
(1) enterprise responsive website/one-screen website design: master the webpage design process and specifications, and the webpage design color matching and typesetting skills.
Basic specifications of web design: unit, resolution, size, font, color, etc. /Understand the website structure (home page design) through case display.
Layout Diffusion and Interface Design in Web Design
Through grid layout, enhance the layout of web design, deeply study the use of composition/color/font/picture in web pages, and improve the overall page details.
Design specification of responsive mobile terminal: design size, adaptive equipment, typesetting layout transformation form.
Interface design of enterprise website
(2) Background design: master the color matching of data graphics and graphic data.
At present, according to the recruitment market information feedback visualization and backstage are also standard in the webpage stage, so what are the learning points of the backstage homepage?
Interface design of enterprise website
Master one-screen webpage design and interactive effect design (one-screen homepage design)
Understand the background design specifications and background operation processes and functions through design cases.
Backstage homepage design
Visualize the background data by means of column chart, pie chart and trend chart to enhance the ability of viewing and reading.
Graphic design of data?
(3) E-commerce design: master the design specifications of home page, special page, details page, main picture, through train, drilling exhibition, background decoration, mobile terminal and pc terminal, and master the design skills and typesetting skills of e-commerce details page through the actual operation of the store.
Understand the design specifications of the home page mobile terminal and pc terminal through Taobao e-commerce platform.
Master the design specifications of the main map, through train and drilling exhibition, and learn more about the design section of the operation promotion map in the backstage promotion window.
Show the design composition of the theme page through project case analysis/use real case analysis: project process, key point extraction, visual derivation diagram.
Design of Taobao e-commerce platform home page and special page
The design specification and content composition of the detail page should be designed from the user's point of view.
Design of Details Page of Taobao E-commerce Platform
By applying for your own Taobao store, you can actually decorate/put goods on the e-commerce backstage (cut pictures/put them on the shelves/do backstage decoration).
(4) C4Banner: Master 3D scene design and apply it to design works to enrich the visual effect of the picture.
C4D software foundation/scene construction, using 3d scenes to enhance the three-dimensional sense of design space and enhance visual impact.
(white model scene construction) lighting material/rendering output /C4banner (scene paste material/lighting/rendering settings and output are applied to banner).
Layout and z-axis splitting in banner design.
Enhance the banner of e-commerce and incorporate more illustration elements into the picture. And mostly in the style of vector illustrations.
Design and production of C4D style flag.
3. Design of mobile terminal
Focus! ! !
With the development of mobile Internet, people's demand for mobile phones is increasing. People use mobile phones for entertainment, consumption and study, so UI design is reflected in our lives all the time. In this part, we should not only learn design, but also learn user experience, interaction design and operation design, so that our products can be closer to the usage habits of target users.
(1) User experience, competing products and prototype diagram: Understand project development, product research and project process, and master interactive prototype.
Analyze competing products through market research or big data analysis. Use big data statistics to analyze users' pain points and experience feedback on products, and simulate user portraits to analyze users' pain points, needs, audiences, occupations, etc. Do market analysis through data comparison and data collection.
Learn Axure software and draw the real prototype of the minimum living allowance.
Combining product analysis and competing product analysis, Xmind is used as a mind map.
Analyze the App page flow chart/functional framework/interface jump logic, and draw the app prototype with axure. ? ?
(2) Icon, capsule and interface design: master the interface design such as icon, status bar, navigation bar, tab bar, splash screen, startup, welcome page/wizard page and pop-up page.
Understand the diversity of icons with silhouette icons, plane icons, linear icons, plane icons, micro-texture icons and light imitation icons.
This paper discusses the design characteristics, functional icons and decorative icons of the King Kong area, as well as the chart types and designs that should be used in different plates.
Understand the design specifications of ios/ Android interface: size, font, color, size, line spacing, etc. , and then explore the dimensions and clickable space of interface components such as status bar, navigation bar and tab bar.
Through the mature App, we can understand the design form and components of capsule/pop-up, and deeply analyze the design characteristics and operational thinking user experience between splash screen/startup/guidance page.
Finally, according to the integrity of user thinking and product thinking, design the interface from 0 to 1? ?
(3) Design of operation interface, AE interaction and visual standard: The combination of operation thinking and product design in e-commerce can find the pain points of users by examining the user's thinking interface, improve the overall operation interface and achieve the purpose of marketing promotion. AE interactive animation design improves the interactive operation experience of the interface.
Expanding and upgrading class interface design with operational thinking. (Look at the excellent e-commerce products to push back the operational thinking and design)
Highlight the design atmosphere of special pages, pop-ups and splash screens of promotional activities, enhance visual appeal and promote users to click and view.
Design of operation interface. (From model to adding operational thinking to design operational interface)
Master the basic knowledge of ae software with cases: graphic deformation, movement, size and transparent animation.
Depth ae function: slow motion of nodes, the use of velocity map makes the picture softer, smoother and more natural, filters are used to achieve more animation effects, and interactive animation and jumping animation are used for practice and project display.
Main video output MP4, png sequence and quicktime.
4.WEB front-end: UI design does not have to be proficient in Web front-end, but if you know the basic knowledge of front-end, you can communicate with programmers better and achieve the desired effect.
Master the basic knowledge of Web front-end, be familiar with Html5 and Css3, and be familiar with the framework layout.
By studying Html5 and Css3, the enterprise station designed by myself is parsed into a web page.
Through the above study, we have mastered the UI design skills. After entering the UI design industry, you need to keep learning and improve your aesthetics, design and skills. So look at other people's designs, not to copy them, but to think about learning from others' advantages and improve your design thinking.