Art is subjective. And yes, beauty lies in the eyes of the beholder. However, if you’ve encountered a confusing parking sign or a website from the early 90s, you’ll know that poor design exists.Like any other profession, graphic design also has rigid guidelines that function beneath the surface to harmonize and balance the work. Understanding design principles and how they interplay is crucial for both emerging and senior designers. Consciously implementing them is the secret to producing aesthetically pleasing and practical designs.When I started as a designer, I didn’t fully understand these principles to be able to leverage them in my designs. However, with time I got acquainted and began to understand what works and, most importantly, why it works.In this article, we’ll look at each principle individually and understand how they interact to help you reach the targeted audience with the right message.<h2> </h2><h2>What are Design Principles?</h2><img src="https://miro.medium.com/max/875/1*aIv4zXgQWqbhavS0nbDb7Q.png"> Design Principles, Image Credit:&nbsp;<a href="https://www.skh.design/" rel="noopener noreferrer" target="_blank">skh.design</a>In a nutshell, design principles are rules, behavioural patterns, and considerations to judiciously employ in your designs to minimize users’ cognitive loads and increase appeal. Experts from various disciplines, including behavioural science, sociology, ergonomics, psychology, etc., laid the groundwork for these design principles. They are a representation of the collective knowledge of design pundits and researchers.<h2>How are these principles important for your designs?</h2>Design and usability expert Jared Spool says, “good design, when it’s done well, becomes invisible. It’s only when it’s done poorly that we notice it.” And for this reason alone, good design is difficult to define. As a designer, you must’ve had moments when you’re about to tear off your hair because something is off in your design, but you can’t put your finger on it. Design principles help you fix this problem and many others throughout the design process by assisting you in determining the core values of your product so that you can make decisions that respect the integrity of those values. And if you and your team have a few sets of protocols to return to, you will naturally have a shared vocabulary and set of standards you can leverage while working together.<h1>Six Core Design Principles</h1>While researching for this article, I found a book called Universal Principles of Design by William Lidwell, Jill Butler, and Kritina Holden. It has a comprehensive collection of 125 concepts(or principles) relevant to your everyday design process. But out of 125, I believe these six form the foundational principles of a good design. <h2>1. Accessibility</h2>Commonly known as&nbsp;barrier-free design. Let us talk about the elevator in my building to give you an example of an accessible design. It has wide doors that make it simple to enter, a couple of handrails on either side that help people take support, and two sets of controls that are reachable from a seated position. Additionally, the floor numbers are redundantly coded with numbers, icons, and Braille, and feedback is given visually and audibly. Also, it has an emergency phone system that provides access to specialized assistance.<img src="https://miro.medium.com/max/875/1*uSknZ4crqHUHW5Uj5u8J8g.png"> Accessibility in Design, Image Credit:&nbsp;<a href="https://www.skh.design/" rel="noopener noreferrer" target="_blank">skh.design</a>By referring to the above example, an ideal accessible design should have four qualities: perceptibility, operability, simplicity, and forgiveness.<ul><li>Perceptibility&nbsp;— is when a design is perceivable by everyone, regardless of sensory capabilities.</li><li>Operability&nbsp;— is when a design is usable by everyone, regardless of physical capabilities.</li><li>Simplicity&nbsp;— is when any person, regardless of expertise, literacy, or degree of focus, can readily grasp and use a design.</li><li>Forgiveness —&nbsp;is when a design reduces the likelihood and effects of errors.</li></ul>Designs must be useable by individuals of all abilities without needing specific modifications. The goal of accessibility in design has always been to accommodate those with impairments. But later, it became more evident that many necessary accommodations we can make to benefit everyone.<h2>2. Emphasis</h2>Emphasis causes some parts of the design to stand out. Conversely, it can also be used to minimize the degree of prominence of some elements. We use this principle to communicate information in our everyday life. Imagine a public speaker giving a speech without emphasizing certain words. The audience won’t be able to comprehend the message the speaker is trying to communicate. <img src="https://miro.medium.com/max/875/1*L6aY5fOa5yMfIw-58jiPuA.png"> Emphasis in Design, Image Credit:&nbsp;<a href="https://www.skh.design/" rel="noopener noreferrer" target="_blank">skh.design</a>In the same way, emphasis is a design feature that draws the user’s attention. In other words, it is a centrepiece. Whether it’s the headline, a picture, or a Call-to-Action(CTA), this should ideally be the most essential design section. Sometimes designers mistakenly emphasize the wrong website elements, leading to user confusion.Users should easily find necessary action or vital information to complete a task. As you examine your user journey, you should ask yourself, how am I making it easy for users to complete the tasks they need to do? This might involve adjusting your design’s navigation based on the results of any usability studies you conduct. If someone isn’t finding a critical feature quickly during the study, you want to find a better way to emphasize it.<h2>3. Whitespace</h2>The rest of the design principles all relate to the elements you include in your work. White space is the only one that expressly addresses what you don’t contribute. <img src="https://miro.medium.com/max/875/1*KRrzfo-QgQVp3kOpi__U2A.png"> Whitespace in Design, Image Credit:&nbsp;<a href="https://www.skh.design/" rel="noopener noreferrer" target="_blank">skh.design</a>White space refers to spaces in a design devoid of visual features and spaces with underused space around those items. More specifically, it refers to the voids, open spaces, and locations in your design where nothing is present. White space emphasizes a more straightforward design approach by not adding any features to the composition. Indeed, less is more.It is a common misconception that white space has to be white. Well, not necessarily. It can be of any colour.<h2>4. Hierarchy</h2>Hierarchy is a visual design principle that arranges elements on a page in order of their priority. Now, you might be wondering how hierarchy is different from emphasis. Although both are related concepts, hierarchy refers to a group of elements organized in order of importance. On the other hand, emphasis is about making one element stand out from other elements.<img src="https://miro.medium.com/max/875/1*FMF2TzGAhLZMTPYHbz8yNg.png"> Hierarchy in Design, Image Credit:&nbsp;<a href="https://www.skh.design/" rel="noopener noreferrer" target="_blank">skh.design</a>Why do we need a hierarchy? Visual hierarchy is an essential aspect of effective design because everything on your website appears to be of equal value if nothing is essential. In UX design, we always want to clarify to the user where to focus first and what action to take by giving visual clues. Hierarchy helps point users to the first step they should take in their user journey.<h2>5. Contrast</h2>When two or more design components are near one another, the contrast plays a prominent, noticeable function in their degree of difference. <img src="https://miro.medium.com/max/875/1*aWBf6K39AWJlc3YBhZoQ9w.png"> Contrast in Design, Image Credit:&nbsp;<a href="https://www.skh.design/" rel="noopener noreferrer" target="_blank">skh.design</a>Although when you hear contrast, only the colour contrast is the first thing that comes to mind. But you can show contrast in your designs by differences in element sizes, shapes, or other characteristics.<h2>6. Alignment</h2>Alignment describes how visual components are positioned, arranged, and organized relative to one another and the overall design. It is a technique for visually linking similar elements to make the design look more cohesive. Aligning various visual elements aids in directing the observer through the design. <img src="https://miro.medium.com/max/875/1*1yod5awaDinXO9Niyymosw.png"> Alignment in Design, Image Credit:&nbsp;<a href="https://www.skh.design/" rel="noopener noreferrer" target="_blank">skh.design</a>For example, left- and right-aligned text blocks in paragraph text offer stronger alignment clues than centres-aligned text blocks. Left- and right-aligned text blocks produce an invisible column that is an apparent visual reference for the placement of other design components. Contrarily, centre-aligned text blocks offer more ambiguous visual alignment cues and may be challenging to connect with other elements.Although rows and columns are the most common way to establish alignment, other, more intricate types of alignment do exist. For example, when aligning pieces diagonally, the relative angles between the unseen alignment lines should be at least 30 degrees apart; any difference at all less than that is too undetectable and too faint.<h2>Final Thoughts</h2>When I was first introduced to these principles, being the rebel I was, I wondered, can we make do without these principles? I think design is an abstract art form, and we’re limiting our vision by following only a few rules. But with time, I learned structured creative direction always trumps abstract art compared to usability or comprehension metrics. Designing something that genuinely looks nice and provides the best user experience is usually done by the designer’s intuition and may require a lot of trial and error.

Know the basics so you can master the complexities.

6 key design principles for creating an engaging visual experience.

Similar to building architects using a blueprint to construct every part of a house, from physical structures to more complex inner workings like electrical and plumbing, information architecture describes the hierarchy, navigation, features, and interactions of a website or application. And just as blueprints are the most valuable document for an architect to use in the construction of a building, information architecture can be the most powerful tool in a designer’s arsenal.However, developing one isn’t as simple as putting a list of features together and mapping out how they work — let’s investigate the process.<h1>What Is Information Architecture, and Why Is It Important?</h1>Information architecture (IA) is,&nbsp;<a href="https://www.wired.com/2010/02/Information_Architecture_Tutorial_-_Lesson_1/" rel="noopener noreferrer" target="_blank">like a blueprint</a>, a visual representation of the product’s infrastructure, features, and hierarchy. The level of detail is up to the designer, so IA may also include navigation, application functions and behaviors, content, and flows. There is no set limit to the size or shape of IA; nevertheless, it should encompass the generalized structure of the product so anyone (theoretically) should be able to read it and understand how the product works.We’ll use the blueprint reference often because the purpose of both documents is nearly identical. Just like a blueprint, IA provides designers (as well as product development and engineering teams) a bird’s-eye view of the entire product.&nbsp;Having a single document that delivers a simple and understandable representation of how the application or website works is vital for developing new features, updating existing ones, and for seeing what is possible considering the existing product.With IA available, it becomes significantly easier to make key decisions for new features and implementations, to understand timelines for product changes, and to follow user behavior through multiple processes.Let’s dive into a basic video to see how an IA is built.<h1>How to Design Information Architecture</h1>As part of the UX process, IA design follows very similar patterns to flowcharting: Add shapes and connect them with lines in an organized fashion to a single document. The challenge when building IA is in understanding&nbsp;how&nbsp;your app or website actually works from the user’s perspective, and how to organize that information into a readable, legible format.There are two major requirements for actually constructing IA: organizing it through a visual hierarchy (that is, a hierarchy of features, functions, and behavior) and creating a legend for displaying different types of features, interactions, and flows. With a standard flowchart, the shapes follow specific requirements (rectangles are processes, diamonds are decision points, etc.); however, following that nomenclature isn’t a requirement.In other words, the most important factors in building your IA are where individual components of the architecture are placed (hierarchically), and how they’re labeled and displayed.<img src="https://miro.medium.com/max/700/0*lEZix02xG_svbtR1.gif">Information architecture by&nbsp;<a href="https://dribbble.com/shots/3317909-Industrial-Analytics-Product-Information-Architecture" rel="noopener noreferrer" target="_blank">Yegor Mytrofanov</a><h1>Understanding and Showing Visual Hierarchy</h1>The most challenging aspect of creating a new information architecture is almost always in constructing it hierarchically. It’s a common misconception that IA must be built “from the top down.” That’s almost always more difficult to do unless it’s an existing product, such as in the video above.When building IA from scratch, unless your website or application is following a standard format, drawing out anything after the top level is very difficult. It’s like asking a mechanic to build a car from the top down instead of in parts. Each piece has to be constructed in advance with its own research, time for design, and development. The same is true with IA.Displaying visual hierarchy is a valuable asset to IA, not only because it provides better context for the reader, but also generalizes key regions of the product. If your app’s most significant feature is ordering a ride (a la Uber or Lyft) which can be done from the homepage, then that page will have the most touchpoints and the most value to the product. The same will be true for the visual hierarchy.Sitemaps come in handy for understanding hierarchy since they organize pages numerically (such as 1.0 Home, 2.0 Payment, 2.1 Add Pay Method, etc.). Or consider the example in the image below for Duke University’s library website, where the top navigation isn’t only at the top but also highlighted to be visible across the entire application.<img src="https://miro.medium.com/max/700/0*shO1vQneXNdE2f7r.png">The structure of&nbsp;<a href="https://blogs.library.duke.edu/blog/2013/03/20/information-architecture-plans-for-the-library-website/" rel="noopener noreferrer" target="_blank">Duke’s site</a>&nbsp;is straightforward: The homepage displays global navigation links plus content, and each global link leads to a variety of pages of relative stature.<h1>Hierarchy of Shapes, Colors, and Other Visual Elements</h1>Aside from hierarchy, the architecture above does another thing well: It displays every engagement point uniquely as needed through a simple legend and a few key phrases. The legend denotes page and content type, and it signifies variations between colors of shapes. This is important because, though Duke’s site appears fairly simple, the IA only goes three levels deep. Each yellow rectangle denotes an application, so the processes within each of those boxes aren’t included in this document!Even without those parts available, the structure is such that we can understand how to navigate the website through the IA alone. That stops when we reach an application within the website — it doesn’t have to.The IA below is for a game. Using four shapes, no color, and smartly-placed text snippets, every major interaction is understandable without prototypes, and more importantly, it can be understood by anyone working on it.<img src="https://miro.medium.com/max/700/0*LUFUFd0LE6LO1RSW.png">A student IA —&nbsp;<a href="https://www.behance.net/queendychan" rel="noopener noreferrer" target="_blank">Queendy Chan</a>This model isn’t perfect, but it organizes app hierarchy clearly and delineates what the user either sees or does at any given point.<h1>The Best Information Architecture Tools</h1>There are plenty of software applications that allow for building an IA, but few are simple and quick enough to make the experience enjoyable. Or at the very least, easy to manage.Draw.io, used in the video above, is completely free for personal and professional use and automatically plugs into Google Drive. It also has integrations with Confluence and JIRA, which are paid.&nbsp;<a href="http://www.draw.io/" rel="noopener noreferrer" target="_blank">Draw.io</a>&nbsp;is excellent for flowcharting, creating user flows and information architecture, and with Drive functionality, multiple people can work on the same document and see changes live. There’s also a free offline version.<a href="http://www.lucidchart.com/" rel="noopener noreferrer" target="_blank">Lucidchart</a>&nbsp;is another great tool that provides a slightly better experience than Draw.io and has additional benefits like pre-built templates, many more integrations, a mobile app (rated at 2.5 stars on the App Store), and support for the enterprise.<img src="https://miro.medium.com/max/700/0*YGp5oGPqYlb43yLX.png"><a href="https://www.toptal.com/designers/ia/www.draw.io" rel="noopener noreferrer" target="_blank">Draw.io</a>&nbsp;is a free online tool for creating flowcharts, diagrams, information architecture, and more.<a href="https://www.omnigroup.com/omnigraffle" rel="noopener noreferrer" target="_blank">Omnigraffle</a>&nbsp;and&nbsp;<a href="https://products.office.com/en-us/visio/flowchart-software?tab=tabs-1" rel="noopener noreferrer" target="_blank">Visio</a>&nbsp;are long-time industry mainstays and work excellently for building and maintaining an IA design, though Visio is online only (the older offline version is Windows-only) whereas Omnigraffle is Mac-only and requires separate purchases for the macOS and iOS versions. OmniGraffle has one benefit over the major competitors in that it provides JavaScript and AppleScript automation, which for most designers may be unnecessary, but typically, full-time information architects appreciate it.All of the tools listed above are made for speed and ease of use, specifically around flowcharting, which follows nearly identical principles to information architecture. Other applications like&nbsp;<a href="http://www.balsamiq.com/" rel="noopener noreferrer" target="_blank">Balsamiq</a>,&nbsp;<a href="https://www.mindmeister.com/" rel="noopener noreferrer" target="_blank">MindMeister</a>,&nbsp;<a href="https://www.mindjet.com/mindmanager/" rel="noopener noreferrer" target="_blank">MindManager</a>, or&nbsp;<a href="http://www.xmind.net/" rel="noopener noreferrer" target="_blank">XMind</a>&nbsp;all offer similar-style behavior but are built for other major purposes, such as prototyping or mind mapping.<h1>Information Architecture Best Practices</h1>While there are few defined rules for what constitutes information architecture, when going through the process, consider the following:<h2>Don’t Focus on Hierarchy, Focus on Structure</h2>Hierarchy is adjustable. The homepage will always be the homepage, but where it leads, how users get to those places, and everything in between and beyond is determined later.<h2>All Processes Should Be Logical</h2>Even though the IA in the UX process is for user interactions, every step of the way has to make sense. Registration screens shouldn’t lead to settings, a camera function shouldn’t jump to a map view…the list goes on.<h2>Remember the UX Process</h2>A common mistake is to just&nbsp;make&nbsp;IA, without resources, research, or other assets or work. That’s like telling an author to write a book without an outline, or a programmer to code an app without prototypes.<h2>You Are the Cartographer</h2>Cartographers take everything about a map into consideration, from mountain ranges to state borders. Just like map makers, designers determine what goes into the IA design. Individual pages, specific user behaviors, the context for decision points… and so on.Ultimately, the cartographer decides what goes on the map based on user needs. The same is true for designers, so construct the IA for the end-user, namely the product development and design teams.To drill the point home once more, all IAs are built for change. Products evolve, designs change, users adapt, and the cycle continues, over and over. Don’t take it too seriously and know that there will always be room for improvement. Don’t aim for perfection; build a simple, adaptable IA.<h1>My Information Architecture Is Done… Now What?</h1>It’s a common conception that any design work is never&nbsp;truly&nbsp;done, and that’s certainly the case with information architecture. They grow and shrink and change as our products do. Unlike a blueprint for a building, IA will always evolve based on anything from user needs to new features or a product overhaul. Much of the structure may stay the same and provide consistency between versions so users don’t get confused.And that’s a good thing. Knowing that IA is a fluid document — one that likely changes weekly, and sometimes even daily — is a powerful way to maintain the overall structure of your app or website without ever touching the code or creating new prototypes. The better the entire product development team&nbsp;knows&nbsp;the IA, the faster everyone will know what is and isn’t possible, and how serious any supposed “easy work” really is.This brings us to the real beauty of information architecture: There is no predefined starting point. While the traditional UX design process dictates that the IA is built after completing enough user flows; armed with plenty of user and competitive research, it can also be the first thing done… or the last. The prototyping process often brings up information on how certain behaviors or actions should occur that would be hard to imagine from a logical or unimaginative IA.As an ever-evolving practice,&nbsp;IA design is an art as much as a skill, which is partly why large corporations have information architect positions. These designers are the gatekeepers of massive systems, and with their understanding of product growth over time, they help drive product, design, and engineering teams to make the right decisions over the span of&nbsp;years. That scale of organization isn’t for all designers, but every designer can build a simple, understandable information architecture.

As a standard part of the UX process, designers create information architecture when building products. Defining every avenue and path that users can take through an app or website, information architecture is much more than just a sitemap to show what page leads where.

A Guide to Information Architecture

<h2>DOTRAVEL</h2>Team Sale đã thay đổi bộ nhận diện mới trên các nền tảng online như website, shopee.. mang đến một diện mạo bắt mắt hơn cho khách hàng.<img src="https://conando.vn/wp-content/uploads/2022/05/Docom-3-400x400.jpg">Cửa hàng ViGift đã đi vào hoạt động mở bán khách offline,&nbsp;&nbsp;showroom tại địa chỉ 347 Nguyễn Văn Linh. Đây là một địa điểm hoàn toàn độc lập với các thành viên còn lại của nhà Conando. Ngôi nhà mới này cũng chính là Showroom đầu tiên và lớn nhất từ trước đến nay. Hy vọng rằng với trụ sở tại Nguyễn Văn Linh sẽ là địa điểm tiện lợi cho khách du lịch tham quan trải nghiệm và mua sắm.<img src="https://conando.vn/wp-content/uploads/2022/05/Docom-2-400x400.jpg">Sayhi tham dự workshop Sunword.<img src="https://conando.vn/wp-content/uploads/2022/05/Docm-400x400.jpg"><h2>DOCOMMERCE</h2>Đào tạo workshop mỗi tuần cho team – lên kế hoạch cho nhiều chiến lược mới, vận hành kế toán, thiết lập hệ thống nhân sự.<img src="https://conando.vn/wp-content/uploads/2022/05/Docom-5-400x400.jpg">Buổi đào tạo của Docommerce<h2>CONANDO</h2>Tổng giám đốc Đoàn Thanh tham gia talkshow “Thương hiệu cá nhân” do anh Nguyễn Ngọc Long – Blogger truyền thông xã hội chia sẻ<img src="https://conando.vn/wp-content/uploads/2022/05/Conando2-400x400.jpg">Conando chào đón các nhân sự mới ở vị trí BA, design, nhân sự.<img src="https://conando.vn/wp-content/uploads/2022/05/Conando-400x400.jpg">Buổi hội nhập nhân sự mới<h2>SEODO</h2>Dự án Fastdo kick off chương trình 42 Days To Change, phát huy tối đa sức mạnh của OKRs cùng phần mềm fOKRs<img src="https://conando.vn/wp-content/uploads/2022/05/seodo2-400x400.jpg">Fastdo – dự án mới thuộc SeodoYouth SEO Challenge tổ chức workshop vòng 1, ban tổ chức đã tìm ra 50 phi hành gia bước vào vòng 2.<img src="https://conando.vn/wp-content/uploads/2022/05/seodo-400x400.jpg"><h2>BRANDO</h2>Kinh doanh miền Nam: Trao thưởng cho 2 cá nhân xuất sắc mang về doanh thu 4 ngày liên tiếp và 7 ngày liên tiếp<img src="https://conando.vn/wp-content/uploads/2022/05/Brando1-400x400.jpg">Kinh doanh miền Bắc: Phân chia lại thị trường tiếp cận; Phòng Thiết kế dự án: Chào đón 5 bạn Part-time mới vào đội ngũ nhân sự; Kinh doanh miền Trung: Nhân sự mới ký được hợp đồng trong 3 ngày đầu tiên thử việc<img src="https://conando.vn/wp-content/uploads/2022/05/Brando2-400x400.jpg">Tổng kết tuần qua, các chiến binh Do-er đã làm việc rất nhiệt huyết, cùng hết mình trong tuần tiếp theo để đạt được những kết quả xuất sắc hơn nhé!!Video bảng tin tháng 4 Conando xem tại:&nbsp;<a href="https://www.youtube.com/watch?v=E19ji48tDqk&amp;t=7s" rel="noopener noreferrer" target="_blank">https://www.youtube.com/watch?v=E19ji48tDqk&amp;t=7s</a>CONANDO CORP – DOING THE RIGHT THING !———————————CÔNG TY CỔ PHẦN TRUYỀN THÔNG VÀ CÔNG NGHỆ CONANDOĐịa chỉ: Tầng 2 – Số 23 Trường Thi 1, Phường Hoà Thuận Tây, Quận Hải Châu, Đà Nẵng Email: account@conando.vn Website: https://conando.vn/

Tuần vừa qua các hoạt động nổi bật nào đã diễn ra, hãy cùng Conando Corp điểm nhanh các tin tức nổi bật nhé.

BẢNG TIN CONANDO 2022 (TỪ NGÀY 01 – 08/05)

Sometimes UX design requires the perspective of a kid, full of curiosity, to find new heights. By creating a UX sitemap, you’ll be able to take an early glance at your website or application from the tree tops. Let’s look at the what, when, how, and why of UX sitemaps.<h2>What is it?</h2>A UX sitemap is a hierarchical diagram of a website or application, that shows how pages are prioritized, linked, and labeled. If a user flow is like the street view details, the sitemap is like the bird’s eye view.<h2>When is it used?</h2><img src="https://miro.medium.com/max/600/1*g09eWtH-5a6jFE2NHscUyQ.png">UX Double Diamond Design ProcessSitemaps are used early in the UX design process, right after the discovery phase. You’ll typically create a sitemap after personas, user journey, and card sorting&nbsp;<a href="https://xd.adobe.com/ideas/process/information-architecture/sitemap-and-information-architecture/" rel="noopener noreferrer" target="_blank">(Babich, 2019)</a>. For an existing website, work on a site audit or content inventory before designing the new sitemap.<img src="https://miro.medium.com/max/600/1*J1jSJrhQSGUf1V8v1ka5Ng.png">Create a UX sitemap after card sorting, and before wireframing.<h2>How to create a UX Sitemap</h2><h2>[Anatomy]</h2>A UX sitemap consists of linked pages, each with a&nbsp;reference number&nbsp;and a&nbsp;label. Reference numbers help you keep track of pages even as you move on to wireframes, prototypes, and iterations&nbsp;<a href="https://theuxreview.co.uk/sitemaps-the-beginners-guide/" rel="noopener noreferrer" target="_blank">(Mears, 2013)</a>. Write labels as clear page titles, optimized for users through card sorting.<img src="https://miro.medium.com/max/700/1*kjXuyyoG5jI-UbV1dkjVmQ.png">A single page in a UX sitemapStart with the homepage, and place pages in following rows by priority (high-level categories to specific pages). You’ll see&nbsp;<a href="https://miro.com/blog/how-to-create-a-sitemap/" rel="noopener noreferrer" target="_blank">primary pages in a row</a>, secondary pages in the next, and so on.<img src="https://miro.medium.com/max/700/1*wSjjpk0vXFrHfF8BSO26_w.png">3 vertical levels of pages linked by priorityAnother way to look at sitemap hierarchy is&nbsp;<a href="https://backlinko.com/hub/seo/architecture" rel="noopener noreferrer" target="_blank">through URL structure</a>:website.com/category/sub-category/specific-pageAlthough optional, you can also include a&nbsp;legend&nbsp;explaining symbols and lines,&nbsp;annotations&nbsp;clarifying information, and&nbsp;illustrated page types&nbsp;to show type distribution (<a href="https://www.gliffy.com/blog/how-to-create-a-sitemap" rel="noopener noreferrer" target="_blank">Mock, 2017</a>).<img src="https://miro.medium.com/max/700/1*AaQN0EMgMDnokuwUcU_qPA.png">UX sitemap example of a dessert blog website<h2>[Tips for Small, Medium, Large Websites]</h2>Depending on the size and complexity of your website, you can create a&nbsp;<a href="https://www.nngroup.com/articles/flat-vs-deep-hierarchy/" rel="noopener noreferrer" target="_blank">flat or deep sitemap</a>.<img src="https://miro.medium.com/max/700/1*u2LqtyrDfuM3JixP3uLrSg.png">Flat vs. deep UX sitemapsFor a&nbsp;small&nbsp;website or application (10+ pages) consider creating a flat sitemap, with 4 or less vertical levels. Flat sitemaps enhance discoverability of content because there are fewer levels to click through. The flattest sitemap consists of 1 vertical level, where different sections are placed on one page.For&nbsp;medium&nbsp;sized (100+ pages), you can still create a flat sitemap but with a wider row of secondary pages. To surface those pages,&nbsp;<a href="https://www.nngroup.com/articles/3-click-rule/" rel="noopener noreferrer" target="_blank">consider using a mega menu</a>&nbsp;that groups links into sub-categories to improve scanning.For&nbsp;large&nbsp;sized (1,000+ pages), consider creating a deep sitemap to help house all the information, with 5+ vertical levels. Deep sitemaps can make it harder to discover content, so try to provide alternative ways (like menu shortcuts) to reach deeper pages. Category pages or navigation hubs can also help further organize the volume of pages (<a href="https://backlinko.com/hub/seo/architecture" rel="noopener noreferrer" target="_blank">Backlinko</a>).<h2>Why is it valuable?</h2>A UX sitemap allows you to plan for usability, whether you’re working on a new website or a redesign (<a href="https://slickplan.com/blog/site-mapping-a-comprehensive-guide#para3" rel="noopener noreferrer" target="_blank">Marie, 2018</a>). It provides a full overview, which then helps teams to simplify, trim off unnecessary pages, and keep what’s important. A UX sitemap also helps you see if linked pages are user and SEO friendly. With a sitemap, you can strategically place content where users would easily find it, and also pinpoint problem areas such pages hidden under an unintuitive label (<a href="https://theuxreview.co.uk/sitemaps-the-beginners-guide/" rel="noopener noreferrer" target="_blank">Mears, 2013</a>).<h2>Conclusion</h2>Overall, a UX sitemap informs user-centered decisions in navigation, labeling, and organization. Here’s a quick recap of what we’ve learned:<ul><li>What:&nbsp;UX sitemap is a hierarchical diagram of linked pages.</li><li>When:&nbsp;Create early in the UX design process, after discovery phase.</li><li>How:&nbsp;Each page has a reference number and label, and pages are linked from high-level categories to specific pages. Consider a flat sitemap for smaller websites, and deep sitemap for larger.</li><li>Why:&nbsp;UX sitemap shows a full picture of your digital product so you can make better design decisions.</li></ul>Now that we’ve climbed the conceptual tree of a UX sitemap, I hope you’ve reached new heights on how to improve the UX design of your website or application.<img src="https://miro.medium.com/max/278/1*3nKIyS2gyB0pJY50jzl4pQ.png">References<a href="https://xd.adobe.com/ideas/process/information-architecture/sitemap-and-information-architecture/" rel="noopener noreferrer" target="_blank">Sitemaps &amp; Information Architecture (IA)</a>&nbsp;— Nick Babich, 2019<a href="https://theuxreview.co.uk/sitemaps-the-beginners-guide/" rel="noopener noreferrer" target="_blank">Sitemaps — The Beginner’s Guide</a>&nbsp;— Chris Mears, 2013<a href="https://miro.com/blog/how-to-create-a-sitemap/" rel="noopener noreferrer" target="_blank">How to create a sitemap in 8 steps: Designing a better UX flow</a>&nbsp;— Anna Savina<a href="https://www.nngroup.com/articles/flat-vs-deep-hierarchy/" rel="noopener noreferrer" target="_blank">Flat vs. Deep Website Hierarchies&nbsp;</a>— Kathryn Whitenton, 2013<a href="https://www.gliffy.com/blog/how-to-create-a-sitemap" rel="noopener noreferrer" target="_blank">How to Create a Sitemap: Your Comprehensive Guide</a>&nbsp;— Liza Mock, 2017<a href="https://backlinko.com/hub/seo/architecture" rel="noopener noreferrer" target="_blank">Website Architecture</a>&nbsp;— Backlinko<a href="https://slickplan.com/blog/site-mapping-a-comprehensive-guide#para3" rel="noopener noreferrer" target="_blank">Site Mapping: A Comprehensive Guide</a>&nbsp;— Jenn Marie, 2018<a href="https://www.nngroup.com/articles/3-click-rule/" rel="noopener noreferrer" target="_blank">The 3-Click Rule for Navigation Is False</a>&nbsp;— Page Laubheimer, 2019Source:<a href="https://uxdesign.cc/how-to-create-a-ux-sitemap-a-simple-guideline-8786c16f85c1" rel="noopener noreferrer" target="_blank">https://uxdesign.cc/how-to-create-a-ux-sitemap-a-simple-guideline-8786c16f85c1</a>

“As a little kid, I climbed a lot of trees because I always loved the bird’s-eye view” - Felix Baumgartner, Stratosphere Skydiver

How to create a UX Sitemap: a simple guideline

The World Wide Web contains a tremendous amount of information which is hard to imagine unstructured because a human brain wouldn’t be able to perceive any single thing. People got used to seeing content and functionality of the digital products as many of them are now: structured and easy to use. However, it doesn’t occur unintentionally. Designers and developers take a responsibility of constructing content and navigation system in the appropriate way for users perception. The science that assists experts in the content structuring is called information architecture. Today’s article is devoted to the essence of information architecture and presents the basic points every designer should know.<h1>What’s information architecture?</h1>Information architecture (IA) is a science of organizing and structuring content of the websites, web and mobile applications, and social media software. An American architect and graphic designer, Richard Saul Wurman, is considered to be a founder of the IA field. Today, there are many specialists working on IA development who have established the Information Architecture Institute. According to the&nbsp;<a href="http://www.iainstitute.org/what-is-ia" rel="noopener noreferrer" target="_blank">IAI experts</a>, information architecture is the practice of deciding how to arrange the parts of something to be understandable.Information architecture aims at organizing content so that users would easily adjust to the functionality of the product and could find everything they need without big effort. The content structure depends on various factors. First of all, IA experts consider the specifics of the target audience needs because IA puts user satisfaction as a priority. Also, the structure depends on the type of the product and the offers companies have. For example, if we compare a retail website and a blog, we’ll see two absolutely different structures both efficient for accomplishing certain objectives. Information architecture has become the fundamental study in many spheres including design and software development.<img src="https://miro.medium.com/max/700/0*zsitinTuq77ceCIz.jpg"><h1>The role of information architecture in design</h1>Nowadays, when the user-centered approach in design is a top trend, many designers learn the principles of information architecture science which they believe is a foundation of efficient design. IA forms a skeleton of any design project. Visual elements, functionality, interaction, and navigation are built according to the information architecture principles. The thing is that even compelling content elements and powerful UI design can fail without appropriate IA. Unorganized content makes navigation difficult and inexplicit, so the users can easily get lost and feel annoyed. If the users face first bad interaction, they may not give the second chance to your product.Many companies don’t see the importance of information architecture because they think it’s impractical. It’s hard to argue that IA takes some time to create it and requires specific skills to do it efficiently. However, powerful IA is a guarantee of the high-quality product since it reduces the possibility of the usability and navigation problems. This way, well-thought information architecture can save both time and money of the company which otherwise they would have spent on fixing and improvement.<h1>IA and UX design</h1>After reading everything written above, many people may have the question: “Isn’t IA the same as UX design?”. Technically, these terms relate to each other but they are far not the same.&nbsp;IA is a blueprint of the design structure which can be generated into wireframes and sitemaps of the project. UX designers use them as the basic materials so that they could plan navigation system.UX design means much more than content structuring. In the first place, UX designers aim at making pleasant interaction model, so that users feel comfortable using the product. They encompass various aspects influencing users’ behavior and actions such as emotion and psychology when the IA experts stay focused on the user’s goals.Let’s get this straight: good information architecture is a foundation of efficient user experience, so the IA skill is essential for the designers. Effective IA makes the product easy to use but only united with design thinking the product has the powerful user experience.<img src="https://miro.medium.com/max/700/0*N9a-1bMiqrGw_K_W.jpg"><h1>IA system components</h1>If you want to build strong information architecture for the product, you need to understand what it consists of. Pioneers of the IA field, Lou Rosenfeld and Peter Morville in their book “Information Architecture for the World Wide Web” have distinguished four main components: organization systems, labeling systems, navigation systems and searching systems.<h1>Organization systems</h1>These are the groups or the categories in which the information is divided. Such system helps users to predict where they can find certain information easily. There are three main organizational structures: Hierarchical, Sequential, and Matrix.Hierarchical.&nbsp;In one of our&nbsp;<a href="http://tubikstudio.com/tips-on-applying-copy-content-in-user-interfaces/" rel="noopener noreferrer" target="_blank">previous articles</a>, we’ve mentioned a well-known technique of content organization which is called visual hierarchy. It is initially based on Gestalt psychological theory and its main goal is to present content on the carrier, be it a book page or poster, web page or mobile screen, in such a way that users can understand the level of importance for each element. It activates the ability of the brain to distinguish objects on the basis of their physical differences, such as size, color, contrast, alignment etc.<img src="https://miro.medium.com/max/700/0*Kp7POZ-2mkTKZkIM.png"><a href="http://tubikstudio.com/case-study-big-city-guide-landing-page-design/" rel="noopener noreferrer" target="_blank">Big City Guide</a>Sequential.&nbsp;This structure creates some kind of a path for the users. They go step-by-step through content to accomplish the task they needed. This type is often used for the retail websites or apps, where people have to go from one task to another to make the purchase.<img src="https://miro.medium.com/max/700/0*f_zmzagzA5XuzBqT.gif"><a href="http://tubikstudio.com/case-study-vinnys-bakery-ui-design-for-e-commerce/" rel="noopener noreferrer" target="_blank">Vinny’s Bakery Website</a>Matrix.&nbsp;This type is a bit more complicated for the users since they choose the way of navigation on their own. Users are given choices of content organization. For example, they can navigate through content which is ordered according to date, or some may prefer navigation along the topic.<img src="https://miro.medium.com/max/700/0*6B4CKx-4XXvrRQal.png"><a href="https://dribbble.com/shots/2834048-Moneywise-App" rel="noopener noreferrer" target="_blank">MoneyWise App</a>In addition, content can be grouped according to the organization schemes. They are meant to categorize content the product. Here are some of the popular schemes:Alphabetical schemes.&nbsp;Content is organized in alphabetical order. Also, they can serve as a navigation tool for the users.Chronological schemes.&nbsp;This type organizes content by date.Topic schemes.&nbsp;Content is organized according to the specific subject.Audience schemes.&nbsp;The type of content organization for separate groups of users.<img src="https://miro.medium.com/max/700/0*ZR08hq0GgxvxiR_S.png"><a href="https://dribbble.com/shots/2778634-Book-Swap-App" rel="noopener noreferrer" target="_blank">Book Swap App</a><h1>Labeling systems</h1>This system involves the ways of data representation. Design of the product requires simplicity, so a great amount of information can confuse users. That’s why designers create the labels which represent loads of data in few words. For example, when the designers give contact information of the company on the website, it usually includes the phone number, email, and social media contacts. However, designers can’t present all of this information on one page. The button “Contact” in the header of the page is a label that triggers the associations in the users’ heads without placing the whole data on the page. So, the labeling system aims at uniting the data effectively.<img src="https://miro.medium.com/max/700/0*7GKTuJWWa58v4NNQ.gif"><a href="https://dribbble.com/shots/2795275-Gym-Landing-Page" rel="noopener noreferrer" target="_blank">Gym Landing Page</a><h1>Navigation systems</h1>In one of our&nbsp;<a href="http://tubikstudio.com/uiux-design-glossary-navigation-elements/" rel="noopener noreferrer" target="_blank">UX Glossary</a>&nbsp;articles, we’ve defined navigation as the set of actions and techniques guiding users throughout the app or website, enabling them to fulfill their goals and successfully interact with the product. The navigation system, in terms of IA, involves the ways how users move through content. It’s a complex system which employs many techniques and approaches, the reason why it’s wrong to describe it in a short paragraph. So, we’ll go back to the topic a bit later on our new blog’s article.<h1>Searching systems</h1>This system is used in information architecture to help users search for the data within the digital product like a website or an app. The searching system is effective only for the products with loads of information when the users risk getting lost there. In this case, the designers should consider a search engine, filters, and many other tools helping users find content and plan how the data will look after the search.<img src="https://miro.medium.com/max/700/0*z8zX2H3h7ypXat4m.jpg">To sum up, we can claim that information architecture is a core part of the powerful user experience design. Efficient IA helps users quickly and easily navigate through content and find everything they need without striking a blow. That’s why designers are recommended to learn the basics of the IA science.The topic of information architecture is wide and there are more interesting and useful aspects. Our next article on this theme will be devoted to the various techniques and methodologies which designers employ to create efficient IA. Stay tuned!<h1>Recommended reading</h1><a href="https://www.amazon.com/Information-Architecture-For-Web-Beyond/dp/1491911689" rel="noopener noreferrer" target="_blank">IA for the Web and Beyond</a><a href="https://www.amazon.com/How-Make-Sense-Any-Mess/dp/1500615994/ref=sr_1_1?ie=UTF8&amp;qid=1415130655&amp;sr=8-1&amp;keywords=how%20to%20make%20sense%20of%20any%20mess" rel="noopener noreferrer" target="_blank">How to Make Sense of Any Mess: Information Architecture for Everybody</a><a href="https://www.usability.gov/what-and-why/information-architecture.html" rel="noopener noreferrer" target="_blank">Information Architecture Basics</a><a href="http://www.uxbooth.com/articles/the-difference-between-ia-and-ux-design/" rel="noopener noreferrer" target="_blank">The Difference Between Information Architecture and UX Design</a> Originally written for&nbsp;<a href="http://tubikstudio.com/" rel="noopener noreferrer" target="_blank">tubikstudio.com</a>Welcome to see the designs by Tubik Studio on&nbsp;<a href="https://dribbble.com/Tubik" rel="noopener noreferrer" target="_blank">Dribbble</a>&nbsp;and&nbsp;<a href="https://www.behance.net/Tubik" rel="noopener noreferrer" target="_blank">Behance</a>Welcome to&nbsp;<a href="http://tubikstudio.com/blog/" rel="noopener noreferrer" target="_blank">Tubik Blog</a>&nbsp;and free&nbsp;<a href="http://tubikstudio.com/book/" rel="noopener noreferrer" target="_blank">e-books on design</a>

Information Architecture. Basics for Designers.

empty

Tại buổi lễ, anh Đoàn Thanh và đại diện Trung tâm Hỗ trợ khởi nghiệp đổi mới sáng tạo Đà Nẵng cùng các đại diện doanh nghiệp trong và ngoài nước đang hoạt động trên địa bàn thành phố Đà Nẵng đã tham quan các sản phẩm sáng tạo của sinh viên Greenwich tại Innovation Centre – một cơ sở mới của ĐH Greenwich.Buổi lễ không chỉ là nơi gắn kết Conando Corp với các doanh nghiệp lớn nhỏ khác trên thành phố mà còn đánh dấu sự hợp tác lâu dài, tạo điều kiện cho nhiều thế hệ sinh viên tiếp cận môi trường làm việc thực tế. Hứa hẹn sẽ là điều kiện lý tưởng để các sinh viên được phát huy bản thân và có được nhiều trải nghiệm bổ ích.CONANDO CORP – DOING THE RIGHT THING !———————————CÔNG TY CỔ PHẦN TRUYỀN THÔNG VÀ CÔNG NGHỆ CONANDOĐịa chỉ: Tầng 2 – Số 23 Trường Thi 1, Phường Hoà Thuận Tây, Quận Hải Châu, Đà NẵngEmail: account@conando.vnWebsite:&nbsp;https://conando.vn/

Nhằm hỗ trợ các sinh viên nghiên cứu, đào tạo thực tế tại doanh nghiệp và tuyển dụng sau tốt nghiệp, Conando Corp đã tham gia và tiến hành ký kết thỏa thuận hợp tác với trường Đại học Greenwich Việt Nam (cơ sở Đà Nẵng), đây là một trong những sự kiện quan trọng nhất trong năm của ĐH Greenwich.

Lễ Ký Kết Thỏa Thuận Hợp Tác (MOU) Giữa Conando Corp Và Đại Học Greenwich Việt Nam

In short:&nbsp;The&nbsp;information architecture (IA)&nbsp;defines the overarching structure and relationship between all areas of a site (or multiple sites) and informs the sitemap; the&nbsp;sitemap&nbsp;lists all the (labelled) pages in entirety and shows hierarchy, structure and often page goals and content/functionality that happens to be on that particular page; and finally, the&nbsp;navigation&nbsp;guides users via links to all areas of a website.<h2>1. Information architecture (IA)</h2>An information architecture is usually done at the initial phases of a project. Main goal is to organise and structure all relevant entities — preferably in a user-centric way.Example 1:&nbsp;A retailer has websites for Australia and New Zealand, a blog, a community and a few social media channels. The AU website offers products/services for professionals and consumers, the NZ website only for consumers.Example 2:&nbsp;A globally operating company employs a corporate intranet and several country intranets in multiple languages. Some content is produced centralised and shared with countries (e.g. news, jobs, events).All of these entities can operate or exist individually, but it’s the job of the IA to show how they can/should interact with each other, how content can be shared and how people will navigate from one entity to the other, i.e. how the anticipated userflow will work.<img src="https://miro.medium.com/max/700/1*Bx8hto9Fmyx0io9BosWN6w.jpeg">Example for an IA (of an intranet).<h2>2. Sitemap</h2>Based on user and business needs, and backed up by research (e.g. card sorting exercises), the sitemap is created, challenged and enhanced. One starting point for the new sitemap can be the old one, enhanced with additional analytics data or business/user values.The sitemap artefact usually lists all the pages that will exist within the new solution, ideally with assigned page goals and content/functionality that will be placed on the pages. In addition to that should the sitemap also define the in-page information hierarchy (hierarchy of content).<img src="https://miro.medium.com/max/700/1*0Qq6v1hB-bTgiUjCZHW3lw.png">Example of a sitemap with several “universes”.<h2>3. Navigation</h2>The navigation is the most important interface element that people will use to get to the pages defined by the sitemap. A website usually consists of these common navigational areas:<ul><li>Main navigation.&nbsp;The main entryway for people to navigate the website, mostly task- and activity oriented, preferably user centric (= using the user’s language and adressing his or her mental models).</li><li>Service navigation.&nbsp;Usually close to the main navigation, containing selected links that aren’t represented in the first level of the main navigation and functionality like login/register, language, and search.</li><li>Footer navigation.&nbsp;Very often representing the main nav in some kind, with the option to show the partial sitemap. In addition, legal and compliance related links can be found here.</li><li>And in some instances:&nbsp;“Universe navigation”&nbsp;e.g. if a website adresses multiple audiences that each have a unique main navigation and/or experience, e.g.&nbsp;consumers&nbsp;vs.&nbsp;professionals&nbsp;(predominantly seen on websites of financial institutions, utility providers, or insurance companies).</li></ul>While the sitemap shows one particular page only once at the defined location, the navigation can offer alternative pathways to that page (e.g. links that guide people to an&nbsp;About Us&nbsp;page can live in the footer and the service navigation, as well as in the content area itself).<img src="https://miro.medium.com/max/700/1*dka2BNeLTBJrr_EmycEFTA.png">Examples for navigation of apps and websites (on Pinterest).A navigation can basically take any shape or form, but it should be user-centric, task-oriented, and last but not least, easy to use on any device. Further reading<ul><li><a href="https://www.nngroup.com/articles/ia-vs-navigation/" rel="noopener noreferrer" target="_blank">The Difference Between Information Architecture (IA) and Navigation</a>&nbsp;by&nbsp;<a href="https://medium.com/u/cc41e029efb3?source=post_page-----64eba19296c--------------------------------" rel="noopener noreferrer" target="_blank">Jennifer Cardello</a></li><li><a href="http://www.uxbooth.com/articles/complete-beginners-guide-to-information-architecture/" rel="noopener noreferrer" target="_blank">Complete Beginner’s Guide to Information Architecture</a>&nbsp;by UX Booth</li></ul>

People often confuse these three concepts and use them inadvertently for the same aspects of a website-related project.

The difference between information architecture (IA), sitemap, and navigation

As a UX designer, your portfolio is your best marketing tool. It’s a visual resume that can not only help you land your first job in the field of UX/UI design, but also grow and uplevel your career trajectory.So how is it possible for a new UX Designer to land a job when competing with other professionals who have more extensive portfolios full of big name case studies and flashy designs?Surprisingly … It happens a lot.Many emerging UX designers from&nbsp;<a href="http://share.trydesignlab.com/uxplanet" rel="noopener noreferrer" target="_blank">UX Academy</a>&nbsp;go on to land amazing UX jobs — from junior to senior level — from portfolios that “only” consist of student projects.In this article, you’ll learn what a UX portfolio is, why it’s important, and what to include (and perhaps more importantly: what to cut out).We’ll also share some self-editing tips that will help your portfolio website stand out from the crowd and showcase your abilities to the highest extent, whether you’re already an experienced, seasoned designer, or are just emerging into the field.<h1>What is a UX Design Portfolio?</h1>A UX design portfolio is a collection of design case studies that showcases your approach to the design process as a whole. Typically, most people choose to build their portfolio in the form of a website as an additional layer of proof that they understand how to create effective digital interfaces and flows.This portfolio is then shared as part of the job interview process, so potential employers can see detailed examples of how you approach various challenges in UX design, problem solving, understanding users, research, storytelling, and perhaps most importantly, your ability to empathize with the user journey.<h1>Why is a UX Design Portfolio Important?</h1>Your portfolio plays a major role in the interview cadence for most UX/UI design positions. It’s so important, in fact, that applications can be moved forward or ignored based on a quick glance through the portfolio. <a href="https://designlab.com/blog/janelle-academia-product-design-career-change/" rel="noopener noreferrer" target="_blank">Janelle Academia</a>, a recent graduate of UX Academy, shared her experience of just how important a UX design portfolio website can be:<blockquote>The CEO of Carry actually let me know that even though I didn’t have previous design experience, he was so impressed by the work in my portfolio that he decided to learn more about me.</blockquote> She was eventually offered the job!<h1>How to Build Your First UX Portfolio (Without Prior Design Experience)</h1>If you’ve never had a UX design job, there are two categories of work you can create and put into a portfolio: You can make your own redesigns of websites and apps, and you can design originals. If you want to work on a redesign and make it worthy of a portfolio, you’ll need to work on it as if you were assigned it in a job. It must have strong concepts behind it, as well as top-notch aesthetics. You should:<ul><li>Solve a problem that’s affecting the user experience and hurting the business.</li><li>Interview users, perhaps getting your friends and family to test the website or app, asking them questions — and/or read comments about it online.</li><li>Write out several concepts of how to improve it and explain the pros and cons of each.</li><li>Mock up your best ideas into designs that look great.</li></ul>When you have made several thoughtful and research-driven designs, you can package them together into one portfolio website, PDF, or even a physical folder. But keep in mind that your projects have to look as beautiful as possible, as well as having powerful reasoning to back them up, if you want an employer to make an investment in you and risk their business’s future on your design abilities.Your portfolio is your very own little corner of the internet and, in our competitive UX/UI design industry, it’s crucial to make the most of this space. In this webinar and interview, Kelly shares her top tips for crafting an effective design portfolio. <h1>11 Elements to Include In Your UX Portfolio</h1>If you have several projects to show off — whether your own practice projects or some paid work — you should sit down and go through them all to decide what to put in your UX portfolio. Ask these questions: <ul><li>What parts of the UX design process do I enjoy the most?</li><li>What makes me different from other UX designers?</li><li>What types of projects do I appear best at?</li><li>Which projects taught me the most?</li><li>What projects did I add the most value to?</li><li>Are there engaging stories behind any of these pieces?</li></ul>Pick projects based on your answers, as well as the type of job you’re applying to. These answers might even help you decide on the direction you want your career to head in.Additionally, here are eleven other elements that you will likely want to incorporate:<h2>1. Include Your Elevator Pitch</h2>The design of your portfolio itself is a prime opportunity for you, as a UX designer, to demonstrate that you know what good UX means.This is more than just having engaging visuals: it’s about organizing information in a way that accommodates the needs of your portfolio’s users (i.e. potential employers or clients). One of the first key tests of a portfolio is whether someone can look at your site for just 5 seconds and understand what it is that you do.<h2>2. Showcase Your Best Work</h2>Before including a project or case study in your UX design portfolio, ask yourself honestly: what score out of 10 would I give this project? If you’d give it an 8 or below, consider either leaving it out, or doing some more work to polish it up. Sometimes the extra work is purely presentational, and can be done quickly. Other times, you might want to spend more time digging back into the project, for example, to tighten up your screen designs. It’s always better to show a few excellent projects (aim for 3–6), rather than many case studies of variable quality.Remember: a hiring manager might come to your site, click a random case study, and form their opinion based on that project alone. For each one, ask yourself: would I be happy for my work to be judged on the basis of this case study alone?Don’t forget that your portfolio website is only one place to showcase your work. You can also share other projects that don’t make the cut on other platforms. Try Dribbble, Instagram, or your blog to showcase other work that you’d like to have people see, but isn’t necessarily a priority.<h2>3. Demonstrate How You Solve Problems</h2>Everyone loves beautiful visuals and stunning mockups — but hiring managers need to see more than just the end result from a case study. They’re looking for evidence of your abilities to analyze and define a problem, follow a logical process of research and ideation, and develop a solution that is realistic and meets both business and user needs. You can demonstrate these skills by including images or videos of your process, and by including a carefully written narrative with each project that explains how the project progressed. This can mean quite a lot of extra effort, but doing so means that potential employers can see your ability to handle projects end-to-end.<h2>4. Your Personal Bio</h2>Hiring managers want to rapidly find out about two things: your work, and your skills background. So make sure that your personal bio is easy to find. It could be on the homepage, or on a clearly-labeled “About me” page that can be accessed from the main navigation.The best personal bios are short and focused — a single brief paragraph is enough. Aim to include something about your skills, your values, and your vision as a designer. ‘<h2>5. Contact Info</h2>Once you’ve successfully piqued the interest of a hiring manager, recruiter, or potential client, they’ll probably want to get in touch. Make this step as easy as possible! You could have a “contact me” button in the main navigation, a simple contact form, or you could even just include your email address on each page.<h2>6. Other Links to Include</h2>Although a UX designer’s portfolio is still their most important asset, it’s a good decision to also include links to your resume, LinkedIn profile, and even social media, if applicable. Many UX designers use Instagram or Dribbble as an extension of their portfolio, often using the platform to show work-in-progress, notes, sketches, and experiments.Including links to your LinkedIn profile, and a downloadable PDF resume, can also help to remove barriers that might prevent people from following up or contacting you further down the line.<h2>7. Usability</h2>It’s tempting to make a strong statement through the visual design of your portfolio website pages. There’s nothing wrong with that, but remember that the primary purpose of the portfolio is to present the story behind your case studies and allow people to find the information they need quickly and efficiently. So, for example, avoid experimental navigation that might frustrate the user in reaching those goals, and don’t create a portfolio design that’s so elaborate that it outshines the work you’re presenting.<h2>8. How To Include Bonus Projects (If You Have Them)</h2>UX designers are often highly creative people, and the chances are you have a lot more awesome projects going on than the few you are professionally showcasing in your official portfolio. It’s great to include “bonus” projects that help people to connect with your passion and with who you are as a designer. This could simply be other self-started UX design projects, or it could be complementary skills like writing, photography, illustration — you name it! The key is for any extra content you include to be something you’re proud of and enthusiastic about.If you have training in both print and digital design, but only want to work on websites, don’t highlight your print work. Avoid including work that misleads a viewer to what type of projects you’d like to work on in the future.<h2>9. Incorporate Visual Design and Brand Style</h2>Whether or not you create a logo or use unique typography for yourself, you should always have a brand and personal style. Your brand is the sum total of the presentational choices you make — so make those choices mindfully, and make them meaningful. Even just setting your name in simple text, rather than creating a monogram, can say something about your approach to design solutions: perhaps you favor simplicity and clarity over decoration. Whatever decisions you make here (including fonts, colors, images, and tone of voice), remember that they represent you both as a designer and as a person. You need to be comfortable with the messages your branding conveys, and that those messages are in tune with the work you present.<h2>10. Tell a Story with Your Portfolio Website</h2>If you’re applying to lots of junior positions in big organizations, hiring managers probably have to get through hundreds of applications on a regular basis. Be thoughtful about their needs — and how you can stand out to that person by making their job easier and more delightful. Show how you are thoughtful as a designer: you can do this by transforming each of your portfolio pieces into a compelling story, rather than just a collection of images. Your portfolio is your best marketing tool. It’s your visual resume. When someone looks at a resume, they typically only glance it over, and the same is true for a portfolio. You only have so much time to convey who you are and what you do, so get specific.<h2>11. Be Specific About Your Role in Each Project</h2>If the project was part of a collaboration, it’s a huge red flag if other project contributors aren’t mentioned. Clearly describe your role and properly credit and link to other people on the project team. <h1>Takeaway</h1>An employer is making an investment when they hire you, putting tens of thousands of dollars into an employment package. It makes sense, then, to put your time and energy into&nbsp;<a href="https://designlab.com/blog/10-ux-ui-design-portfolios/" rel="noopener noreferrer" target="_blank">creating a UX portfolio that stands out</a>, which shows them you have the ability to make their investment worthwhile. While you might have to eliminate some of your favorite projects to get specific, don’t forget to personalize. Your bio and any other content on your site should create a clear and concise overview of who you are and the type of work you excel at. While the best portfolio sites let the work speak for itself, your personality can also shine through in your personal branding, copywriting and any other Easter eggs you choose to include.

As a UX designer, your portfolio is your best marketing tool.

Kiến thức