[Visual Basic Knjiga Pdfl
Abdul Soumphonphakdy
But we're now sharing it with any and all Designers that want to learn and remember some of the key principles and fundamentals of UI & UX Design, and have a quick reference guide to the basics: -web-design/
However, if you're stuck in an endless cycle of YouTube tutorials and want to start designing real-world projects, become a professional UI/UX Designer, have fun and actually get hired, then come join the Zero To Mastery Academy. You'll learn UI/UX Design from actual industry professionals alongside thousands of students in our private Discord community: -community-discord/
We created this UI/UX Design Cheat Sheet initially for students of our Design Bootcamp course: Complete Web & Mobile Designer: UI/UX, Figma + more. But we're now sharing it with any and all Designers that want to learn and remember some of the key principles and fundamentals of UI & UX Design, and have a quick reference guide to the basics.
However, if you're stuck in an endless cycle of YouTube tutorials and want to start designing real-world projects, become a professional UI/UX Designer, have fun and actually get hired, then come join the Zero To Mastery Academy. You'll learn UI/UX Design from actual industry professionals alongside thousands of students in our private Discord community.
Sketching is the first part of the design process. It is where you generate as many ideas as you can quickly and get them down on paper. Details are not important at this stage. After gathering your ideas together, you can then decide which is the best and most efficient strategy to work with.
Next, you will need to sketch out your ideas into wireframes. In this step you will add details, refine the design, and cut out ideas that don't work. Finally, you will want to pull out the elements of the design that are the most important or repeated throughout the design. These components will really help when building the project.
To start creating your first sketch, you should first understand what you need to draw. Ask yourself, what part of the project do you want to start with and decide where you want to begin. Decide where you want to lead the users and what they need to do to get there. As you are sketching, continue asking yourself what would happen if a user clicked here or what do I want this thing to do? Think about this as the users journey through the product, from the time they enter, to the time they leave. Always be on the lookout for pain-points and ways you can improve the experience.
After building out your first draft, start breaking down each page and thinking about what flow will happen from it. As an example, say you have a search bar that when a user searches, think about whether the user needs to click search or will it automatically search for results? As you progress you should begin to find some similar elements and design patterns taking shape. These will become your components and design system.
A user flow shows the steps a user takes to achieve a goal. Sketching these flows is intended to communicate the steps the user takes through different screens and actions. They should include a name, step number, and type of user for each flow.
Sitemaps are a valuable step because it helps to strategically place content where users can find it and aids in the navigation of your product. Use the sketches and user flows you created to help you build out your sitemap.
Start with the anatomy of your product and list out all the individual pages. Once you have a list, you can start creating the sitemap. Start with the home page at the top. Each section of the sitemap should have a label of the page it's about and a reference number for what step in the process it is.
Wireframes provide a blueprint to your product by detailing information that is displayed on each page, providing an outline and structure to the product, and describing the direction and message of your product. It is a way to use everything you've created up to this point to really start putting the site together.
Wireframes will help you better understand how users will navigate through your product and make sure there are efficient pathways. Build off of them and learn from the feedback you get to better the product. If you are working on a team, wireframes can help everyone get on the same page with the layout. Even if you aren't on a team, get users to test your product. This always uncovers pain points and places where you can improve the user experience of your product. Wireframes are also a great way to get feedback from clients. The earlier you can find and fix issues, the easier it will be once we get to the final product.
Remember to keep it simple, more detailed than the sketch, but not the final design. Start with pencil and paper and then move your sketches to a program like Figma to allow for easier sharing. If you are sharing with a client, add a little more polish to the product to make it look presentable and make sure to explain that this is to showcase the interactions, not the visual design of the product.
Another great benefit of prototyping your design is that you can test it with users at a stage that is pretty close to how the product will be built. This is where you will find out a lot about whether you have made the right assumptions about how users will try to navigate the product and whether the experience meets their expectations.
Getting feedback throughout the design process is a great way to help find potential issues. Finding these issues earlier in the process can make the whole project be more efficient and better for users in the long run.
There are two types of feedback that can impact your design, constructive and destructive. Constructive feedback can be positive or negative, but will still aid in the design process. Destructive feedback impedes the design moving forward. It is mostly caused by asking users the wrong questions or by misleading them. Clients can even go off on a tangent that is not relevant to the current stage of the design process.
You need to be the one that gets others to give constructive feedback. Be as clear as possible when explaining the context of what you want feedback on. You can send a message ahead of time to inform them of what you need. Another thing you can do is set goals that you want to accomplish at each stage. Break down which aspects need to be focused on and what questions need to be answered. Make sure to explain what stage of the design process you are in so that they know what to expect. In a meeting format, it can be overwhelming to have too many people giving feedback at one time so only invite the people you need to. Think about who would have the answers to your questions. Try to get the group involved by generating, voting, and then discussing all of the ideas. Make sure to stay focused and keep on track. If good feedback is off topic, remember to bookmark it for a later time.
Always start with the basics. In this case, base units. The base units are going to define what every other unit is based off of. They make the whole design easier to scale and handoff. The base unit that is the most recommended is 8px because most screen sizes are divisible by 8 and its divisible itself. All other UI elements should be in increments of the base unit.
Grids are made up of 3 elements: columns, gutters, and margins. Columns are the vertical sections that go from left to right. Typically a 12 column grid is used, because it can be divided in so many ways it makes it more versatile. Keep in mind, most desktops today are extremely wide. Use max-width to contain your grid so users don't have to turn left to right to view all of your content. Gutters are the white space between the columns. Margins are the outside edges of the columns that separate the grid from the edge of the screen. The gutter and margin size are going to be a multiple of the base unit.
The responsive part of the grid comes with choosing between fixed, fluid, and adaptive grids. Fixed layouts will stay the same no matter what the screen size. Fluid layouts will stretch and shrink with your content. Adaptive layouts will change to use different grids depending on the screen size it is at. By using breakpoints, you are able to change the design of the page for different screen sizes.
Another thing to look at is who the target users are. Knowing the demographic of the users and if there are cultural influences can really help in choosing the right colors. Think about what the colors mean to you as well. The psychology of color is a powerful tool that shapes how we perceive the world.
Colors should be able to be scaled or added to, by having a mini monochromatic palette within each color. You can add depth to your blacks and greys by adding in hints of the brand colors. Sometimes black comes off as too harsh if left untouched.
The most important thing when choosing colors is to test for accessibility. Make sure there is enough contrast between backgrounds and foregrounds to ensure it is readable for everyone. Colorable allows you to test 2 colors for accessibility on the web as well as plugins within Figma like Contrast.
Typography means the style and appearance of our text. There are a few types to choose from and combining these together correctly can be a great way to enhance your design. Serif is a traditional typeface with serifs, or tails, at the edges of the letters. Serifs have many different types just within that style. Here are just 4 of them:
When working for a client, you may have a limited choice of fonts you can use. Thinking about adjusting the line height, increasing the spacing of the letters, or using different font weights can really change the look and feel of a single font.
There is also the possibility of too many choices. When presented with lots of options, try to narrow down your options by thinking about the brand it is representing. What are the goals of the product? Are they more traditional or more modern? What platform is it centred on?
795a8134c1