References PDF 205

References  References Table of Contents S. No. Sessions Page numbers 1. Session 1: Introduction to User I...

References  References Table of Contents S. No. Sessions Page numbers 1. Session 1: Introduction to User Interface Design  UX mental model, implementation, and represented models 4 in UX  Mobile UX Design Principles 9 2. Session 2: Introduction to User Experience Design  Fundamentals of UI/UX design as a component of the pre- 16 service specialist’s curriculum 3. Session 3: Understanding Responsive Web Design  Using Media Queries with Custom CSS 24 4. Session 4: Understanding the Strategies for Responsive Web Design 27  Why Web Accessibility is Important: 4 Reasons to Create Accessible Content 5. Session 5: Using Common RWD Patterns in Mobile Designs  What is and do I need Mobile Responsive Web Design? 30 6. Session 7: Understanding the Figma Tool  What is FigJam by Figma? 31  Why Figma is the best tool to design User Interfaces? 33 7. Session 8: Designing Websites with Figma Tool  How to Create a Website with Figma? 35  Figma Prototypes: A Quick, Step-by-Step Guide to Useful 41 Mockups  References Session 1: Introduction to User Interface Design UX mental model, implementation, and represented models in UX Source https://pointjupiter.com/ux-mental-model-representation- implementation-user-experience-development/ Date of retrieval 26/02/2022 One of the basic concepts and aspects of the user experience design are models – implementation model, UX mental models, and represented models. In this article, we explore each of them, their main characteristics, and mutual relations. Models are more or less abstract representations of how things work. They are our best shots at trying to understand often complex behaviors and processes. They are our tools to help us understand them. If you are a developer – you certainly know about database models. If you are coming from business development – then you know about business models. And if you’ve studied physics – you’ve used models to simplify and better understand behaviors like the movement of planets or nuclear processes in stars. Models help us simplify our reality. Models are everywhere, and they serve a similar purpose – giving us our best shots at understanding how the world around us works. In the area of UX and UI design and software development – models help us understand how users interact with the solution in their daily life. In the area of user experience design (UX design), and the human-computer interaction (HCI) in general, we pay close attention to three leading (software) models:  Implementation model,  Mental model, and  Representational model. Likely the first formulation of UX design models in this form and shape comes from Alan Cooper. Since then, UX professionals and HCI professionals, in general, adopted this arrangement. Implementation models  References The implementation model answers the question, “How does this work?” It represents how a developer will build the system, website, web app, or something else. The implementation model reflects technology, and it is somewhat literal. The implementation model represents how a system (application, service, interface, etc.) works. It is often described with system diagrams and pseudocode to be later translated into real code. It is shaped by technical, organizations, and business constraints. One of the most common and obvious reasons why the teams without UX and UI experts tend to produce poorly designed software and services are because their designs closely resemble implementational models. To book a flight from NYC to Zagreb, users don’t need to know everything in the background. They are, typically, exposed to simple form – enter your destination, dates, the number of passengers. Shield the users In a way, good UX and UI design will shield users from the complexities of implementational models. Not every facet of implementational models needs representation as an element of the user interface and a part of the user experience. Designing software like this is easy because you don’t think about the users and their perception of the model. The next time you see an interface with dozens of buttons on the screens, one for each implemented function – chances are you are looking at a system designed according to its implementation model. Granted, we will have an (almost) perfect translation between the system functionalities and the user interface, but real users will suffer. This approach is questionable: creating the interface that forces users to provide the data when the software needs it, not when it is most convenient and meaningful for users. User interfaces designed exclusively by engineers generally follow the implementation model; their user interface is mapped to the program’s functions. They create wonderfully intricate and reliable functions, implement business and other logic, but typically fail to design a usable and good UX and UI. Users don’t care how the developer made the system work. Much like you don’t care how your mobile phone is switching between different cell towers (without dropping a connection) or how the microwave oven heats your food. You want to have your calls continuous and stable, and you want your food nice and warm.  References Does it matter if no one can see it? If the implementation model is hidden, does that mean we can hide behind poorly written code? Does it even matter? It certainly does. Let’s assume that a flawed implementation model is based on bad coding practices, lack of optimization, and an unstable architecture. No matter how well your UX design is, it still relies on that same poorly written implementation, and the UX will be bad. The user experience is not only about mental models and their representation; it is also about the layer that powers the whole experience. You cannon talk about UX without talking about the underlying code, architecture, databases. Just because it is hidden from end-users, its effects are apparent – be it the great ones or the poor ones. A poorly envisioned implementation model’s consequences are as damaging to the end-users’ experience as a poor understanding of users’ mental models and as poorly designed representation models. In a great implementation model, code is well-written, highly optimized, tested, and created following a host of other good practices. This helps ensure a system is reliable, responsive, scalable, and meaningful. What are UX mental models? In contrast to the implementation model, mental (software, UX and UI) models answer the question, “How do users think or believe this works?” Mental models have been studied for years. While they might appear to be novel, the fact is that they appeared for the first time back in 1943 in the book “The Nature of Explanation” by Kenneth Craik. Cognitive science is especially interested in exploring and understanding mental models. As such, they represent how users perceive external environments and realities. Areas of user research, visual design, interaction design, and user-centered design, and even game theory, rely on basic principles and ideas from cognitive science. A mental model is a set of beliefs about how a system works and how people interact with that system based on their beliefs. Beliefs, not facts! Remember, facts are what defines the implementation model – mental models are all about beliefs.  References For the average user, those beliefs are not coherent and are not even remotely similar to application developers’ implementation models. This gap between the developer’s logic and the users’ perception of things leads to frustration. Mental model differences Jakob Nielsen argues that the implementation model is also a mental model, only used by developers/designers. Our thinking here at Point Jupiter is aligned with Cooper’s approach of having three models defined separately. We also need to keep in mind that implementation models are more objective. At the same time, personal, belief-based mental models are highly individual. This presents a significant challenge when it comes to UX and UI design. It is improbable to cover all theoretically possible mental models. However, the effort towards designing experiences and interfaces closely related to users’ expectations and beliefs about how the system will work and behave – is critical. User interfaces must represent the users’ mental models. And the mental model must be the one that is used as a guide when we are designing user experiences. Two options Nielsen also suggests two basic options you have when you are trying to fix the mental model gap.  The first one is about making the system more conformant to users’ mental models.  The second one has a different approach; Instead of asking you to make the system more conformant, you need to improve your users’ mental model. The goal is to reflect better your system (more descriptive labels, in-app tutorials, and walk-throughs) in your users’ minds. In practice, those two approaches are not mutually exclusive – they fit together nicely. You can use card sorting or thinking aloud techniques to discover users’ models and inform the system design decisions. But, on its own, a mental model is not enough. It doesn’t help the programmer code the system. It also doesn’t help the UX and UI designer bring it to life with their design. For this reason, we need a third model, the representation, or the represented model. Representation models  References This model answers the question, “How is this presented to the user?” Representation models are directly related to the user interface itself. It connects the layer of interaction between the system and the user. It’s rarely (thankfully!) a direct representation of the implementation model; it’s more often a designer’s view of users’ mental models. Don Norman calls this the designer’s model. The wonderful thing about digital systems is that the (inter)face can differ from what is going on inside the machine. Think about the leap from text-based computer systems to the graphical user interfaces we know today. Suddenly, instead of memorizing lists of commands, all people had to do was to click on a picture of what they wanted. Designers must be closely familiar with users’ mental models to be able to craft great representation models. It will be beneficial for them to know the implementation model’s basics, at least parts of it. Still, it is critical to understand and map users’ expectations correctly – their mental models. And then, create an interface that is coherent with those expectations, not with the actual implementation. Webshop example If, for example, buying something from a webshop requires several transactions and complex operations in the background, hide them from end-users. For them, it is just the process of clicking on an item and adding it to the shopping cart. The designer must create a user interface that represents that mental model. That will lead to the creation of great user experience in which the system will behave exactly as users expect. It makes sense to note that representational models are numerous and differ in their perceived closeness to users’ mental models. It is relatively common to move from the implementation model towards the users’ mental model through a series of represented models. You can build them by implementing feedback from users. That will move them from a represented model that closely resembles the implementation model towards a better represented model – one that is closely matched with users’ mental model. In an ideal world, the represented model would become so similar to the mental model. In the real world – it becomes an approximation. Our job is to make sure that approximation is meaningful and in line with users’ mental models.  References Mismatched keys are an extreme example of how a poorly represented model might look like. Tackling the gap between the mental model and user’s expectations at Point Jupiter We pride ourselves on being a professional, award-winning web development, and UX design firm with global reach. But that’s just the first thing you might read about us. But we go above and beyond that. Our development and design teams work closely together. You can learn more about the 4D (Discover, Design, Develop, Deploy) process we developed here at Point Jupiter. It is carefully envisioned and built on more than a decade of professional work experience. It helps us make sure that the code our developers write serves the purpose. As such it is a driver of excellent UX and it tiles the UI to users’ expectations. Our designers understand the intricacies of the development process, and at the same time, developers understand designers’ expectations and reasoning. Home  References Session 1: Introduction to User Interface Design Mobile UX Design Principles Source https://www.toptal.com/designers/mobile-ui/mobile-ux-design- principles Date of retrieval 23/06/2022 Good design is good design, right? True, but there are specialized considerations that come into play depending on the medium for that design. Design principles for something like an app made to run on a desktop computer are usually slightly different from the most effective mobile UX design conventions. Even within an umbrella category like “mobile UX design” there are differences between designing an app and designing a mobile website. When users download an app, they don’t just want the mobile version of the website. They want a unique experience that justifies the time they spent downloading the app (as well as the space it takes up on their phone). Users have no qualms about deleting an app they don’t find worthwhile—75% of apps downloads are only opened once. Mobile design, in general, cannot be overlooked. Worldwide, more people access the internet from their mobile and tablet devices than from desktop computers. Ignoring those users is no longer something that UX designers can justify. It’s important for mobile designers to consider mobile UX best practices at every step of the design process. Put the User First: This should go without saying, but in any design project, the user should always come first, and user needs are even more important (and more specific) on mobile devices. If designers don’t cater to mobile users’ needs, those users will very quickly move on to other websites, apps, or distractions. Following are a few things designers can do to meet the specific needs of mobile users. Always put the user first in designing any mobile experience. Make Navigation Intuitive: Navigation on mobile sites and apps needs to be more intuitive than it is on desktop sites. Users need to be able to immediately identify how to get around a mobile app or website. This can be achieved through recognizable design patterns (such as hamburger menus) as well as recognizable icons (a “home” icon for the home screen, a chat bubble for messaging, etc.).  References Using intuitive icons (a moon for “sleep,” praying hands for “meditate,” etc.) is even more user- friendly when icon labels are included. If users have to think about how to navigate, they’re more likely to disengage from the website, or close the app and look for a simpler solution. Create a Seamless Experience Across Devices: Whether a user is accessing content on an app, mobile website, or desktop website, the transition between using them needs to be seamless. The design elements should mirror one another (designers shouldn’t use blue for the app and red for the website, for example). Not only does a seamless experience make things easier for people using a website or app, but it also builds trust with the brand. The transition between using an app or website on different devices should be seamless. Focus on User Goals: The goals a person has on a mobile app or website are probably different than those they have on a full desktop site. For example, on a restaurant app, a visitor is likely going to want to do only a handful of things: view the menu, make a reservation, or get directions. In most cases they aren’t looking up the full history of the business on their mobile phone—that kind of content can be hidden in menus or submenus. Think through what a user actually wants to do on a mobile app. One important thing designer often overlook is requiring a login for basic tasks. Banking apps, for example, often ask for a login in order to do anything on the app. But tasks like finding the location of the nearest ATM don’t really need the user to sign in. Making those features easy to access is a great way to improve UX.  References This local credit union allows people to look up locations without the burden of signing in first. Allow for Personalization: For mobile apps, personalization is key to improving the user experience. Personalization can also help achieve marketing goals. It’s a win-win for all the stakeholders involved. Personalization should push users toward content that they’re looking for and away from content that’s irrelevant to them. It can also eliminate distractions on the site, streamline components like the purchase process, and make sure that marketing messages are in sync with what the visitor actually wants. Fitness app Strava automatically loads the most recently used type of sport for the user but also makes it simple to switch sports (putting the most likely options near the top). However, too much personalization can be an easy trap to fall into. The level of personalization needs to match the level of trust a user has with the app and the company. How often do people feel disconcerted or strange when a website displays ads for something they were thinking about (or talking about) but haven’t even searched for? Sure, it’s just the predictive nature of advanced advertising algorithms, but that level of personalization can still leave visitors feeling apprehensive. Always Make Things Easier: When a person visits a website or app on a mobile device, they want to complete the task at hand as quickly as possible. It’s up to the designer to make completing necessary tasks as easy as possible. Eliminating everything that isn’t absolutely vital to each task is a great place to start. Making necessary tasks simpler on a mobile interface is also key. For example, many eCommerce apps and sites now offer a camera option for inputting credit card information. Rather than typing in a card number, shoppers can aim their camera at their credit card and the app will automatically read the number. Other things like specifying the type of input in form fields (so  References that, for example, when an email address is the expected input then the @ symbol and “.com” pop up on the main keyboard screen). Good Onboarding Practices: Good onboarding is essential for mobile apps. But the definition of “good” varies greatly between different kinds of apps. Apps that are straightforward to use—things like to-do lists or web browsers—need minimal onboarding. A couple of splash screens that point out unique features is all most users will need to get started. Masterclass has an excellent onboarding workflow for new users, showing a few of the key features while also giving users the option to see more or log in. But more complex apps, like those for financial services or project management, need more comprehensive onboarding. Use Established Gestures: This one should go without saying, but mobile designers need to consider established gestures people are already used to using on their devices. Things like pinching to zoom or swiping have become intuitive for most users and should be employed whenever possible. Designers should use established gestures people are already familiar with whenever possible. In instances where a designer decides to deviate from an established gesture, it’s important to clue users into this deviation, either during the onboarding process or when the use-case appears for the first time. Mobile Layout Design: Designing mobile layouts isn’t entirely different from designing any other kind of layout, but there are certain considerations designers need to take into account. One of the biggest considerations is the size of touchscreen targets. While a mouse or trackpad can click with pinpoint accuracy, fingertips are much less accurate. Ideally, targets should be 7-10mm on a mobile  References device’s screen. This allows for a fingertip to tap the target without having to aim too carefully. A related area to consider is hand position controls and the “thumb zone” on mobile devices—the area of a phone’s screen that can be easily accessed with the thumb when a person is holding their phone with one hand. Putting the majority of interactive content (and particularly calls-to-action) in this zone is vital to creating a positive user experience. The “thumb zone” is an important aspect of mobile UX design to consider. (Image by LukeW). It’s important for mobile designs to cut out as much clutter as possible. Minimalism is a designer’s friend when it comes to mobile apps. Trying to cram everything in a desktop UI into a screen that’s a fraction of the size makes the design look cramped and can be overwhelming. Focusing on goals, minimizing navigation options (menus and submenus can help with this), and generally eliminating any element that is not essential for users to do what they need to do will create a more streamlined and user-friendly UI. Google’s mobile app has a minimalist design that cuts out all unnecessary elements. While cutting out the on-screen clutter, designers have to be sure not to overlook some key design considerations. One such consideration is making sure various design elements have sufficient contrast. People often look at their mobile devices in less-than-ideal conditions. Things like bright sunlight can make elements on a screen hard to see, but high contrast helps to make elements more visible. Typography is another key consideration. It’s important to have a clearcut typographic hierarchy in a mobile design. Titles and headers should be easy to spot, and fonts, in general, should be larger. No one enjoys squinting at their screen to try to read big blocks of text on their phone. Clear headers, bulleted or numbered lists, and short paragraphs all make mobile text more legible. A final UI consideration is the use of transitions and animations. An animation can be an important signal to a user that whatever action they just took did something. Animations and clear transitions between screens or functions in a mobile app are key bits of feedback that create a more satisfying  References user experience. Mobile UX Best Practices: All of the above are important considerations when designing mobile apps and websites. But there are additional mobile UX best practices to follow to ensure the best possible user experience. Focus on Speed: Despite widespread 4G data availability, mobile networks are still generally slower than wifi or broadband services. And in many parts of the world, 4G doesn’t exist, and mobile users are stuck with either 3G or slower data speeds. Not everyone using a mobile app or website will have the fastest network connection or even the newest devices. That means mobile websites and especially mobile apps need to be fast. Including content in an app that doesn’t need to be downloaded every time the app loads will make the app faster. As will only loading content as it becomes necessary (although anticipating content that will be needed and pre- loading it can make an app appear faster to the user). It’s a balancing act between not loading content that won’t be used (and using up data) and creating the perception of speed by preloading content users are likely to need next. One way to create the illusion of speed and soothe impatient users is to use placeholders until content loads. Facebook’s mobile app does this, with what effectively appears to be a polished wireframe loading as soon as the app opens, holding space for the posts that load as they download. This transitional screen signals to users that something is happening with the content before it actually loads. Provide Feedback to Users: Giving users feedback as they perform actions on a mobile app is an important aspect of a positive user experience. As mentioned previously, animations and transitions are one way to give feedback. Tactile and audio feedback is also possible with mobile devices. Providing touch feedback when certain actions are performed is particularly popular with mobile games, and also with error messages. Audio feedback is popular with functions on all kinds of apps. Nonetheless, designers shouldn’t rely on audio feedback since so many people keep their phone silenced at all times. Minimize Data Input: Another key mobile UX best practice is to minimize the amount of data input required. This was touched on previously, but the more data a person has to enter into a mobile app,  References the more likely they are to abandon the task. Filling out a form with four or five fields might not be a big deal on a desktop or laptop computer, but on a mobile device, those four or five fields might be enough to turn a user away, especially if they can’t see their purpose. Make sure that every single field in a form being filled out on a mobile device is necessary. Eliminate any that aren’t. This is one area where giving people the option to use one of their existing accounts (such as a Facebook, Google, or Twitter account) rather than signing up from scratch can greatly improve conversions. When a user only has to click to authorize access rather than fill out a form for a new registration, they’re more likely to do so. Just don’t rely solely on these secondary apps—some users are still distrustful of linking their accounts and will take the time to fill out a form. Project management app Podio makes it easy for new users to sign up with a Google or ShareFile account.. HOME Home  References Session 2: Introduction to User Experience Design Fundamentals of UI/UX design as a component of the pre-service specialist’s curriculum Source https://www.shs- conferences.org/articles/shsconf/abs/2021/15/shsconf_ichtml2021 _02015/shsconf_ichtml2021_02015.html Date of retrieval 20/06/2022 1 Introduction Digitalization nowadays is considered to be a key driver of socio-economic development. Digital technologies are becoming the basis for creating new products and services as well as for the transition to new business models. Ukrainian course for the development of the digital economy requires the readiness of the education system to provide training of the specialists who are able to provide such transformations, which should be reflected both in the emergence of new areas of training and in focusing its content on the formation of new digital competencies of pre-service professionals. One of the competencies which is crucial today for a wide range of specialists is the mastering the fundamentals of user interface and user experience design (UX/UI-design). According to special studies and evidence, UX/UI de-sign is a high-demand field that requires the set of knowledge and skills which are applicable not only to pure IT jobs, but to a wide variety of careers, from marketing to web design to human-computer interaction. It is also pointed out that UX/UI design is a domain which is the intersection of such fields as pure design, engineering, marketing and psychology. It is relevant to point out that there are a number of courses (specializations) available nowadays on the market of education service both in Ukraine and abroad. They provide a trainee with the set of essential practical skills, necessary to start the career interface designer from the entry-level or extend it basing on the existing skill sets. However, contemporary higher education in Ukraine, which provides systematized learning of UX/UI design in the process of different specialists’ vocational training, needs revision of existing disciplines, their educational content and its renewing on the new level understanding of the design role in the training of potential employees whose expertise expects digital products design of various purpose. The aim of the paper is to cover the approaches to the creation of the content of pre-service specialists’ training on the fundamentals of UX/UI-design.  References 2 Theoretical framework Theoretical background of the work is made by the analysis of the (1) importance of the user interface design in the process of developing of any digital mean, and (2) role of the fundamentals of UX/UI design in the vocational training of different specialists. The user interface design of any application plays exclusive role in the digital product promoting. It shapes the user’s experience, determines the product success, and ultimately increases customer’s satisfaction, which is really essential from the business point of view. In the field of digital design experts distinguish user experience (UX) and user interface (UI) design which testifies that the process of interface development is complicated one and expects specific inter-discipline knowledge of a designer. According to studies, UX design provides the development of the application features focused on improving the overall user’s experience at their interacting with the digital product. UX design is aimed to achieve the application purpose and to supply the maximum user satisfaction. This kind of design creates the basis of any digital product bearing customer’s demands in mind. It mainly focuses on building of the application wireframe and structuring all the components due to their functionality. Hence, proper UX design must base on deep understanding of the product work, interaction between different activities initiated by the user, evolution of the scenario of the user behavior etc. The UI design differs from UX design because it rather focuses on the process of application presentation and pro-vides improving of its interactivity. This type of design concentrates on the product appearance and provides directly interaction functions. There are some essential principles of UI design formulated basing on various fields of knowledge. In particular, the information must be presented aesthetically and attractively, but the applied visual means should not contradict the functional framework of the application and distract the user from its main purpose. At the design developing, it is recommended to follow the principle of visual hierarchy which is deter-mined by the graphical elements ranking in accordance with their priority of using and subordination. In addition, it is pointed out the importance of visual accents and their right location; contrast using for attracting attention to the proper graphical elements; balance keeping in the elements presentation applying the concept of the visual weight and others. On the whole, it is emphasized the importance of UI and UX design in the digital product promotion, as the both types of design shape the first user impression, and depending on their quality, the brand recognition can be created or broken. Thus, the significance and complication of both types of design need for estimation of the role of the fundamentals of UX/UI design in the vocational training of different specialists. The analysis of the curriculum of university training of potential specialists testifies necessity of reasonable content building of UX/UI design learning.  References In particular, it is detected that in the curriculum of IT specialists’ training there are mandatory and special courses on interface design which provide students with its fundamentals. They are aimed to the software developers, demand quite narrow-specialized prerequisites, and can be inappropriate for the students of other vocations. However, fundamentals of UX/UI design become the component of the training of really wide circle of specialists who produce different types of digital product. 3 Practically-driven approach to the building of the curriculum for UX/UI design mastering In this context, it would be relevant to offer and apply the practically-driven approach to the curriculum building. Due to the evidence in the field of digital product development presented above, it is recommended to distinguish invariant and variable parts in the curriculum of such a training. The invariant part might be covered by the set of academic modules which provide rather universal basis for the design mastering, whereas variable part of the specialists’ preparation should includes modules of special training in terms of mastering different specific instruments of UX/UI design. The content of modules which make invariant part of the curriculum is presented below. The first module “Psychology of visual perception” makes a psychological base for the trainees who have to master the fundamentals of design. The content of the module is focused on the shaping of the trainees’ knowledge system which is necessary for deep understanding of the psychological mechanisms and processes underlying visual perception (memory, attention, categorization, decision- making etc.). The special accents in the module are made on the semantics of graphical image due to its psychological significance [7, 8]. From the standpoint of psychology, the model of visual image creation involves some information channels. Logical channel forms the bank of reality images. Aesthetic channel composes the images. However, exactly semantic channel controls the work of logical and aesthetic channels. This channel determines the choice of images and the choice of structure of their composition which matches semantic and conveys the sense of formed visual image-text in the most efficient way. The main forms of work within the module are master classes and workshops. During master classes main focus is given on the students’ analysis of specially picked up examples of the interface which represent correct and incorrect practices from the standpoint of psychology of perception. For example, there were used the pairs of interface samples presented in the figures 1, 2 and 3 to be analyzed during the workshops. The topic of one of the flipped learning workshops within the first module, for example, might be devoted to the psychological features of the reading process and their influence on the design of task- oriented and content-oriented interfaces (figure 3). One group of students is offered to find out and represent material on the peculiarities of these types of interface. It is expected that the students  References an conclude that task-oriented interface (that mostly uses various control elements with brief text patterns, like navigation panels, menus, buttons etc.) and content-driven interfaces (which usually include massive flowing para-graphs of text) need for applying different fonts which might be caused by our special ability to read the texts. Covering the special physiological mechanism of perception of printed information is the task for another group of students. In particular, as an example of our practical experience of similar flipped- learning workshops, the students analyzed the resources to find out that the efficiency with which a person read is a function of the amount of text available to us during reading. In fact, there is a linear relationship between reading speed and the quantity of characters that are visible to the eye (if the perceptual limit is up to 15–20 characters). The students managed to realize basic mechanisms of reading: human eyes do not move smoothly along the lines of the page (screen), instead they make discrete jumps between words, focusing on one word for a short period of time before making a parabolic jump to another one (as it is demonstrated on the figure 4). The students also found out, that despite their non-linear nature, these eyes movements improve our reading capabilities. At the word processing within our focus, we use the additional information outside of the focused word to direct our reading. While reading, our time to comprehension is assisted by the sense of adjacent context, at the same time we often process automatically (just skip them) short functional words (prepositions, conjunctions, articles etc.. Understanding of these findings of cognitive psychology during common discussion at the flipped learning workshop led students to the conclusions that an isolated word (up to 20 characters) will be read more slowly than a word that forms part of a longer phrase. This conclusion, in turns, encouraged students to infer great affect on typographic decision-making for user interfaces: as task- oriented interface tends to collect more isolated words than content-driven one, we cannot rely on the contextualizing effects of neighboring words to help improve comprehension of the labeled control elements of task-driven interface. Thus, students’ awareness of this functional distinction and psychological peculiarities, obtained during such a workshop, can help narrow their focus on providing a set of meaningful constraints. Finally, it can help students make more intelligent decisions about fonts choosing, which then is going to be used by them while mastering the basics of graphic interface design. The second module “Basics of the design of graphic interface” provides a trainee with both theoretical knowledge and practical skills which are in need for the creation of high-quality graphical interface. In particular, it is deeply learnt the spectrum of essential design concepts and techniques: coloristic, font, typography, composition, bootstraps etc. It is also discussed the ways how to high- light the most important elements, to display logical connections between individual elements, to use visual anchors. Principles of visual design, basic qualities and characteristics of creating a successful interface are mastered by the students within the module. Besides lectures, the main forms of work within the module are workshops where students learn theoretical material, prepare presentations on the learnt topics and take part in their discussion. For  References the module content learning at the workshops, specially developed visual aids are used which demonstrate the examples of interface design made with different choice of composition, color, fonts etc. The students are involved in their comparing, critical analysis and estimation of all the variants. For example, during mastering basic principles involved in the use of the visible language (such as: organize, economize, communicate) it is beneficial to offer for students’ analysis chaotic and ordered screen layout; reasonable and unreasonable samples of linking related items and disassociating unrelated items; poor design as for navigation around the site which contrasts with improved de-sign where right layout and color grouping help focus user’s attention to most important title areas, and bulleted items guide the user through the secondary areas. Besides, the trainees are offered to do the set of practical tasks on interface design development with its further analysis and discussion. In particular, the psycho-logical techniques learnt by students at the first module are worked out at the workshops of the second module. We would like to share our practical experience of using specially developed card game “Mental Notes” focused on the involving the trainees in the analysis of applying various psychological techniques to the interface design of their potential web application. Original card deck Mental Notes, created by S. Anderson consists of over 50 insights from psychology which make easy reference and brainstorming tool. Each card describes one insight into human behavior and suggests ways to apply this to the UI design of software applications. We adapted original cards and transformed them into didactic game. At the preparation stage of the game all the students are assigned the topic of their potential web application. They are given time to think over its possible application users, purpose, functions etc. Then the game starts. The students in turn take a card which represents and describe this or that psychological technique (insight) used in the modern practice of UI design. Some examples of these cards representing, in particular, such techniques as social proof, curiosity, regularity establishing, reciprocity etc., are given in the figure 5. The students analyze the technique given in the card, the in turns make and prove their decision as for how they are going to use these exact technique at the UI design of the future web application: which visual language and how they are going to apply; how and which means of color, typography and graphical images are relevant to use and why; why such a technique is going to be beneficial exactly for this application. After the game students obtain the whole deck of the mental cards with different psychological techniques. They are encouraged to apply at least five of them in the UI design of their prototype. Figure 5. Selected cards used for the game Mental Notes The third module “Instrumental interface design” is oriented on the mastering some universal tool environments for interface development. There are a lot of them nowadays on the market. However, the most universal and prospective one seems to be Figma environment. According to experts , Figma is a web-based design instrument allowing to create mockups, interactive animations, and  References high-fidelity prototypes. In addition, Figma provides version control, collaboration features, presentation mode, code generation, which makes it really attractive and professional environment for design projects. The environment supplies a designer with all essential tools for prototype development along with all the workable graphical elements that enables to imitate the functionality of the future digital product, which is significant for potential de- signers’ training. Despite the fact that on the Internet nowadays there are a lot of practical recommendations, instructions and lessons on mastering Figma facilities, it is felt the lack of systematized didactic materials focused on the step- by-step learning in the lines of efficient design of various software interfaces which can be used successfully during university training of different specialists. Thus, the third module of invariant part of the UX/UI design curriculum is relevant to focus on the main facilities of Figma, and provide the students with skills to create and test efficiently the prototype of the digital product applying all the theoretical concepts which were learnt in the first two modules. Here it would be recommended to offer students the set of practical classes within the environment to master both basic tools and advanced Figma facilities including their extension by programming. Below we are giving some sets of tasks which can be beneficial for mastering Figma facilities in the context of theoretical universal basis for the design mastering, presented in the two previous modules. In particular, after the students’ getting familiar with main options of Figma interface, tools, navigation techniques etc., we encourage them to learn deeply peculiarities of color representation in different color systems and their influence on the power of interface elements. The samples of practical tasks offered to the students are given below. Practical task 1. 1. Create a frame 2. Inside the frame, create one square and fill it with blue R (0) G (120) B (240). 3. Create two more identical squares by duplication. 4. Learn the peculiarities of the perception of the same color R (0) G (120) B (240) in the RGB system relatively to the saturation in percent. 5. Create another triple of squares (circles) and experiment with another RGB combination and saturation. Draw conclusions. Practical task 2. 6. Create a new page and frame on it.  References 7. Inside the frame, create any shape and fill it with any color in the HSB system: H (hue – shade in degrees) S (saturation – saturation in percent) B (brightness – brightness in percent). 8. Create a group of shapes by duplicating. 9. Learn the peculiarities of the perception of the same color in the HSB system depending on the change of H at values of: H = 210, 240, 260; H = 360; 0; 20. 10. Learn the peculiarities of the perception of the same color in the HSB system depending on the change of Saturation (separately), on the change in Bright-ness (separately) and on the Saturation and Bright-ness together. Episodes of students’ work upon exercise 9 are given below in the figure 6. 11. Find out information on the Internet about the emotional impact of colors. 12. Create a set of figures that regulate the psychological state (mood). Investigate the dependence of mood and emotions on the “temperature” of colors. Put the results of your investigations into the table. How the results of your investigations may be used at interface design in the context of their psychological impact on user’s behavior within the interface? Make conclusions. Other practical tasks can include more complicated exercises in Figma directed on both mastering its facilities and working out some stages of UX/UI design and its basic principles discussed at theoretical classes. In addition, it would be beneficial to involve students into project-oriented activity in order to apply obtained knowledge and skills in their complex, and try them on the more complicated tasks. Variable part of the said training (the forth module) is relevant to focus on mastering of the instruments of de-sign which are applicable to solving more specific design problems as well as the tools of less universal and desk-top environments (such as InVision, Adobe XD, Sketch , Adobe Photoshop, Adobe Illustrator etc.). The modules depicted above can make either the entire academic discipline of the different specialists’ curricu-lum or they can be included into the other existing courses for training the specialists whose expertise covers various fields including media, marketing, advertising, publishing industry and others. In addition to practical tasks, students performed project-oriented practice-oriented tasks. In the process of completing such tasks, students had to: develop a proto-type of the future site (the type of site was taken into ac-count: landing page, business card site, full-fledged site, etc.); think over a color palette and choose fonts; to de-velop a logo for the site; select information content using information coding to reduce the amount of information that the user must perceive at a certain time;  References implement a project using Figma. The figure below shows the project of the Zoo site, developed for the client’s private zoo (fig-ure 7). 4 Conclusions In accordance with the aims of the paper, it is covered the approaches to the creation of the content of pre-service specialists’ training on the fundamentals of UX/UI-design. The significance of the said fundamentals learning in the process of various specialists’ training is discussed. Theoretical background of the work is made by the analysis of the importance of the user interface design in the process of developing of any digital product, and by the revealing the role of the fundamentals of UX/UI design in the vocational training of different specialists. It is proposed the practically-driven approach to the curriculum building for the said training. It is distinguished invariant and variable parts in the curriculum. The content of three core modules which make invariant part of the curriculum is presented. Some relevant forms of work with students are offered within each module. The prospects of the work make the preparation and doing empirical research directed on the verification of the offered approach to the curriculum building in the process of different specialists’ training. Home  References Session 03: Understanding Responsive Web Design Using Media Queries with Custom CSS Source https://wordpress.com/support/custom-css-media-queries/ Date of retrieval 16/02/2022 CSS media queries allow you to apply different sets of CSS rules based on conditions like browser width or device type. Most commonly, media queries are used to create a responsive design, where different CSS styling is applied to different screen sizes. This lets designers craft sites that are pleasant to use and easy to read – even on very small screens – without creating completely separate mobile websites or themes. Newer themes are usually built with a responsive layout. That means they use media queries to make the site work well on every type of device, from small mobile screens to larger desktop monitors. In the past, a theme may have been made with a fixed or flexible layout. Learn more about the differences between responsive design and other theme layouts. Basic Example Here is an example of a media query that hides the custom header image in the Twenty Fourteen theme for screen sizes smaller than 800 pixels wide: 1@media screen and (max-width: 800px) { 2 #site-header { 3 display: none; 4 } 5} Newer themes on WordPress.com usually have media queries built in, so it’s a good idea to use the preview buttons in the Customizer when adding CSS to make sure you don’t inadvertently break the design for small screens. The CSS inside the @media rule example above only works in the mobile- and tablet-sized previews. It doesn’t apply to the desktop-sized preview because the desktop browser width is larger than 800px.  References ↑ Table of Contents ↑ More Examples In the first CSS example below, the overall container is limited to a maximum of 955 pixels wide and the content and sidebar areas will appear side by side with percentage-based widths. 1.container { 2 max-width: 955px; 3} 4.content { 5 width: 65%; 6 } 7.sidebar { width: 30%; 8} 9 On small screens, that won’t look good because 955 pixels is wider than the device’s width. To make the container responsive to smaller screens, we can set the maximum width to 100% and then force the content and sidebar areas to 100% widths. Doing this will make the container fit nicely on small mobile devices, while also making the content and sidebar areas easier to read. 1 2 3 @media screen and (max-width: 768px) {.container { 4 max-width: 100%; 5 } 6.content { 7 width: 100%; 8 }.sidebar { 9 width: 100%; 10 } 11} 12 ↑ Table of Contents ↑ Editing CSS When adding CSS to responsive-width themes, make sure you view the different device width previews to see how any CSS you’ve added affects those views. You can use the preview buttons at the bottom of the Customizer screen.  References You can also view the site directly, maximize your browser window, and then slowly narrow it to see how the element you wish to modify behaves as the window size changes. Some themes may have only a few media queries and others may have many. You can look at a theme’s existing CSS to see what @media rules are already in use. Those can be the starting point for making CSS adjustments that don’t break the responsive layouts already defined by the theme. To see what media queries are already being used in your theme, look at the bottom of the style panel in your browser’s web inspector. If you need help finding the style panel, see the help page on how to find your theme’s CSS. Home  References Session 04: Understanding the Strategies for Responsive Web Design Why Web Accessibility is Important: 4 Reasons to Create Accessible Content Source https://www.boia.org/blog/why-web-accessibility-is-important-4-reasons-to- create-accessible-content Date of retrieval 26/02/2022 The internet belongs to everyone — but not everyone enjoys equivalent access. According to a 2021 report from WebAIM, 97.4% of the top one million websites had accessibility issues on their homepages. Web accessibility refers to the practice of making digital content usable for people with disabilities. The consensus standard for web accessibility is the Web Content Accessibility Guidelines (WCAG), which offers guidance for designers, developers, content writers, and other creators. By following WCAG, your site can provide a better experience for the 61 million U.S. adults who live with some form of disability. In this article, we’ll explain why web accessibility needs to be a priority for every digital creator. 1. Web accessibility expands your audience One common misconception is that web accessibility is only for people who are blind or deaf. That’s not the case: Disabilities affect about 1 billion people worldwide, and people with disabilities access the internet in a variety of ways. Some use a mouse and keyboard, while others navigate with a keyboard alone. Users with vision disabilities might use assistive technologies like screen readers and screen magnifiers, while people with mobility conditions might use head pointers, trackballs, or eye-tracking systems to control their web browsers. Accessible websites offer an improved experience for all of these users by focusing on four fundamental principles: Content should be perceivable, operable, understandable, and robust. With an accessible approach, your website or mobile app can dramatically improve its reach — without making technology-specific accommodations for every method that people use to access your content.  References 2. Accessible websites provide a better experience for all users The principles of web accessibility are closely aligned with the best practices of web design. When content is easy to perceive, understand, and operate, every user benefits. Some examples of web accessibility considerations that benefit everyone:  Accurate closed captions can accommodate people with hearing disabilities. Additionally, many users find captions more engaging: One Facebook study found that video ads with closed captions increased video view time by an average of 12%.  Appropriate color contrast ratios ensure that text is legible for people with vision disabilities. Color contrast refers to the difference in contrast between foreground elements (such as text) and your website’s background. Using appropriate color contrast can reduce eyestrain for almost everyone.  A simpler user authentication process can accommodate people with mobility or memory impairments. All users will benefit from a streamlined login process, which may improve conversions and customer retention.  Writing clear, concise content can accommodate people with learning disabilities. Once again, all users benefit: Clearer content gets your message across more efficiently. 3. Accessible websites often cost less to maintain Accessible websites tend to use cleaner code, which means faster load times, fewer errors, and improved search engine positioning. When you’re ready to add features, refresh content, or redesign your site, you might end up paying less for development and maintenance. Starting an accessibility initiative may require an investment, but the investment has excellent returns. In many cases, the benefits become apparent almost immediately. With that said, it’s important to remember that accessibility should remain a consistent priority; it’s not a one-time project, and every member of your team will need to share the responsibility. 4. Web accessibility is a legal and ethical obligation Many countries have laws and regulations that require website accessibility. If those laws didn’t exist, accessibility would still be worthwhile — but many businesses begin prioritizing users with disabilities to avoid legal consequences. Laws that require digital accessibility include:  The United States Americans with Disabilities Act (ADA) and Section 508 of the Rehabilitation Act of 1973  Canada’s Human Rights Act and the Accessibility for Ontarians with Disabilities Act (AODA)  The European Union Web Accessibility Directive and European Accessibility Act (EAA)  References In the United States, many states have instituted their own accessibility requirements for websites. Notable examples include California Assembly Bill No. 434 (AB 434) and Colorado House Bill (HB) 21-1110. Ultimately, most private and public sector organizations are legally obligated to maintain accessible websites. Not all accessibility laws require WCAG conformance; however, in the United States, WCAG Level A/AA guidelines are frequently cited in legal arguments and court opinions. To prioritize accessibility, follow the WCAG framework. Every content creator should prioritize accessibility. Building the right approach takes time and effort, but WCAG provides an excellent roadmap for creating (and maintaining) accessible web content. Home  References Session 05: Using Common RWD Patterns in Mobile Designs What is and do I need Mobile Responsive Web Design? Source http://areweconnected.com/wordpress/mobile-responsive-design/ Date of retrieval 16/02/2022 Mobile responsive design? There are two kinds of sites you’ll see on your phone. One where it loads the whole site and you have to pinch and expand to see or click most anything and the kind where it the layout is perfect and there is no pinch, grab or zooming. That kind of site is what is called Mobile Responsive. Google is rewarding sites like that with boosts in the search engines. If your site is mobile responsive, you are rewarding your readers. Win Win! Infographics are great (sometimes). They better illustrate the important points you may be trying to get across. Here’s a really long one from Bluehost. Sometimes they are just giant advertising pieces. This one isn’t. They make some good points. Besides I like Bluehost! Here’s the cliff notes. Mobile is here to stay. But what is mobile? Is it a small iPhone? a Samsung Galaxy S5? an even bigger Phablet? or an actual tablet? Each has it’s own set of screen sizes. Let’s add yet another factor. Are they holding that in ‘portrait’ or in ‘landscape’? Yet another set of dimensions to deal with. You need a website. You also need a mobile website. Mobile Responsive Design attempts to adapt to both of these options. It’s not perfect but it certainly is a great way to cover both bases. Today, I ONLY build sites that are HTML5 / Mobile Responsive. Some of my work is adapting older sites and updating them to Mobile responsive. Home  References Session 07: Understanding the Figma Tool What is FigJam by Figma? Source https://www.innovationtraining.org/what-is-figjam-by-figma/ Date of retrieval 23/06/2022 This online whiteboarding tool is the latest to be used for innovation, UX, and design thinking projects. We’ve highlighted several popular digital collaboration tools and resources, including Miro, Mural, Stormboard, and Conceptboard. FigJam, the latest addition to this list, is another fantastic option for design thinking and innovation projects that take place either in person or virtually. A whiteboard tool like FigJam can help your team stay organized, brainstorm creative solutions to their challenge, and stay focused on what’s most important to move forward with the process. Keep reading to learn more about the features of this new whiteboard tool as well as resources to help you get started. FigJam Features  References FigJam is a truly robust brainstorming tool that makes it easy to get your entire team involved in the collaboration process. The whiteboarding tool allows you to:  Use sticky notes and shapes to share and group thoughts and ideas  Use the marker to draw freehand, annotate the screen, or jot down quick thoughts  React with stickers, stamps, and reactions to flag questions or up-vote ideas  Seamlessly copy and paste between FigJam and Figma, so everything stays in one place together With these tools, you can build diagrams, map out user journeys, analyze results, and much more. FigJam also offers free templates to help new users get started. Resources and Guides Here are some support resources from FigJam directly that can help you get started with using their software.  Templates: The FigJam community has a wide array of story mapping, flow chart, brainstorming and more templates available for download.  Support Guide: Browse various technical articles and guides on using FigJam.  Collaborating on Zoom: Tips to host a virtual workshop or brainstorming session using Zoom. You can also watch Figma’s introductory video to FigJam below. Conclusion FigJam is a fully-featured digital whiteboard tool that may be a useful addition to your innovation software toolkit. Looking for more innovation resources, tools, and guides? Review these other relevant articles on our blog. Need custom help? Click to see our design thinking training or innovation workshops which can be done for teams and organizations. Home  References Session 07: Understanding the Figma Tool Why Figma is the best tool to design User Interfaces? Source https://dev.to/raoufbelakhdar/why-figma-is-the-best-tool-to-design-user- interfaces-5322 Date of retrieval 26/02/2022 Figma is one of the most powerful UI tools in the market. whether you are an experienced designer or a beginner; Figma makes it easier for you to create, prototype and collaborate. For a decade as a UI designer, the only tool I worked with was Photoshop. New tools were emerging, like Sketch, Adobe xd, and Figma, but I wasn’t paying attention. Photoshop was the only tool I needed. In the last years, UI design practices were evolving faster. we moved from designing for one screen to multiple devices and from working alone to live collaboration. Design became more connected and collaborative than before. I couldn’t follow up with all that change relying only on photoshop to do my job. In late 2019, I started to search for an alternative and found Adobe XD. It was a revelation, I told myself “ why I did so much time to make the move”. Adobe XD changed my way of doing UI design. It was simple to use and has everything I needed to get my work done. Unfortunately, the excitement fades away shortly after XD started to crash. Sometimes I couldn't open my files, I felt stuck. I thought that the problem came out from my hardware configuration, but photoshop was working smoothly even if it consumes way more resources than XD. Maybe those bugs are corrected by now, but back then, it was frustrating. I dropped XD but didn't want to go back to Photoshop. A quick search in google about the best alternatives of XD, Figma came first. Most of the comparison websites were ranking Figma as the best tool for UI designers. I created a Figma account for free and started designing straight on my browser, no need to install anything. with more features than XD and a simple user interface, it was powerful. After four months of using Figma, I could say that it is the best UI tool in the market by far. Here are the main reasons why Figma is the best tool out there! Figma offers three things: A better way to design, an easier way to work together and better accessibility. 1 - A better way to design: Here are six Figma features that make the design process faster.  References Components: When designing interfaces, you need to work with the same elements multiple times, like buttons, icons, cards..etc With the components feature, you can transform any element into a master component and create instances of it; if you add any change to a component, the same changes will be applied to all its instances. Styles: Styles are the same as components but for colors, typography and effects. You can save any color or text style, then apply it to multiple elements by a click of a button. No need to repeat yourself. Constraints: The constraints feature helps you transform your static screens into responsive design. One design fits multiple screens. Auto layout: The Auto Layout feature is a state of a frame that fits magically its content. You can add elements inside an Auto Layout frame without resizing it manually. It will take the right size needed to fit the elements well. It is made to solve the problem of resizing objects. Prototyping: Prototype a clickable and animated demos is possible in Figma. you can prototype without leaving your artboards. Google Fonts: Figma integrated the Google fonts library for free. More than 800 fonts at your hands. no more importing fonts. 2 - A better way to work together: Collaboration in Figma is simple. You can create a team and invite other users to work together on the same project. Working live in the same file is possible too. Everyone invited to the project can comment and duplicate the file. 3 - Better accessibility: Figma is free: Figma is solving the accessibility problem, by offering a free version of the software for individuals. The free version includes most of the features of the premium version. Browser-based: To open a Figma file, you just need your browser. You can work on any operating system. Fileless: Figma stores every file you create in the cloud and offers Unlimited storage space for free. You don't have to worry about losing your files anymore. If you’re still doing UI design with photoshop, Adobe Illustrator, Sketch or XD, you should try Figma. It will change your way of working. Since I started working with Figma, I designed a lot of user interfaces. I shared all my files for free on my website. Feel free to check captain-design.com, maybe you’ll find something that can help you with your projects. Home  References Session 08: Designing Websites with Figma Tool How to Create a Website with Figma? Source https://figment.so/blog/how-to-create-website-figma Date of retrieval 26/02/2022 Figma is a popular no-code tool used by designers and creators to prototype websites. In Figma, you can layout your entire design down to the exact pixel. This tool is great for crafting unique web designs that break the mold of boring website templates. The problem with using Figma is that you can spend hours creating the perfect web design but you still don't have a working website. Now you must spend even more time building or outsourcing the development of your website design. With Figment you can build your website directly from a Figma design, without coding. Here's how it works: 1. Create A Design in Figma The first step to creating your new website is designing it in Figma. If you are already familiar with Figma this should be a breeze. Even if Figma is new to you, it's easy to learn. To speed up the process, there are tons of free Figma templates available online. You can grab one of these and customize the design or start fresh and bring your vision to life. Design For Both Mobile and Desktop: While you are busy creating your design, consider if you plan to support both mobile and desktop users. Mobile users make up a large portion of internet traffic, so it is likely that you will have both mobile and desktop visitors. This means you need to create a design for each screen size. Don't worry, in Figma it is easy to copy components so you can easily duplicate your design for the other size screen. You can also make use of the screen frames in Figma to make your design the perfect size. 2. Install the Figment Plugin When your design is complete, it is time to generate your website. To do this, install the Figment plugin from the Figma Community page. On the Figment plugin page, click 'Install' in the upper right corner. Now you have everything you need to create your website from Figma. Export Your Site Using Figment: Next, open up your design in Figma. Click to select the frames you want to export to your website. Remember that each frame will be treated as its own webpage.  References While keeping your design selected, in the toolbar, go to plugins and click Figment to run the plugin (or setup a keyboard shortcut). You will see a screen like this: This screen will show you any warnings or errors you might have while generating your website. If there are no errors, click 'Generate Website'. After the plugin generates your website, click 'View Website' on the next screen. This will open your newly generated website in the browser. 3. Layout Your Website Your website is ready to be setup in the browser. First, you need to give your website a name. Next, you need to setup the structure and pages of your website. Your first time doing this, you will be greeted with a short tutorial, but we'll also go over that here.  References On the left side of the screen is a gallery view of all of your frames/webpages. On the right side of the screen is where you organize them into pages. Drag Your Frames into Webpages: Start by clicking and dragging a frame from the frames section to the pages section on the right. In the right column there are two places to drag it to: the mobile or desktop screen (remember earlier how we needed to create both desktop and mobile designs). This ensures that your design looks great on devices of all sizes. If you only have one screen size design right now, no worries! Figment will show you a warning but you can still continue and even import more frames later. Name Your Webpages: After dragging in your frames, it is time to name your pages. The name of each page will not show up on your website, this is only to help you stay organized while building your website. The first page in the editor is your index or homepage. This is the default page visitors see when they visit your website. The path for the homepage will always be '/' but you can name the page anything. The path defines how each page on the website is accessed and you will need to choose a unique path for each additional page. For example, if you are creating a page with your pricing info, you would name the page 'Pricing' and the path would be '/pricing'. To visit the pricing page, a visitor would go to 'your- website.com/pricing'.  References Add New Pages: To create additional pages for your website, click the 'Add Page' button to create a new one. Then repeat the process of dragging and dropping your frames in the editor, then name and assign paths to your pages. When you are finished adding pages. Click done at the bottom to save and continue. 4. Make Your Website Functional Now that you have your pages organized, it is time to bring your website to life. In the Figment editor you can customize your website before publishing. The editor greets you with a tutorial of all the things you can do in the Figment editor but we will go over them here too. While you are editing your website, you can switch between pages using the menu in the navigation bar on the top left. Add Links: The most important element on any website is links. This is how websites share information, send users to other webpages, and connect to services. Basically, adding links to your website is a must. In the Figment editor you can add links in just a few clicks. Hovering over any element on your website will outline it. Hover and click on the element you want to link. A side menu will open up. In the text field, enter the URL of the link and press 'Save'.  References You can choose from the menu the type of link you want to insert. Supported link types include email addresses, phone numbers, external URLs, and other pages on your website. Add Buttons: The process for adding buttons is the same as regular links. With buttons, it is important to select the background of the button and not the text. You want your users to be able to click the shape on the button and not just the text in the middle. Removing Links and Buttons: If you accidentally linked the wrong element or decide you don't want to link an element any more, you can delete that link. Click the element again to reselect it and press 'Remove' in the side menu. Keep in mind, this only removed the link from the element and does not visually remove the text or button that is a part of the Figma design. 5. Publish Your Site Now that we've made your design functional, it is starting to feel like a real working website. All that's left to do is share it. With Figment, publishing your website is a breeze. Click 'Publish' in the navigation bar at the top. If you are not yet logged in you will need to login to your account or sign up. In the publish menu, enter the domain where you want to publish your website. With a free account you can host your website on figment.so but paid accounts can use a custom domain.  References After you've entered your domain, click 'Publish' again in the menu. Now your website is on the internet and ready for you to share with the world! Hosting Your Website with Figment: Figment makes it easy to build a website from Figma with no coding required. The time to create a website using Figma is cut in half so you can spend more time designing and less time coding. Host your website with Figment and keep making updates to your site. Make changes in your Figma design and use the plugin to upload your design again. Make any changes in the editor and publish the updated version to your domain. Home  References Session 08: Designing Websites with Figma Tool Figma Prototypes: A Quick, Step-by-Step Guide to Useful Mockups Source https://www.sitepoint.com/figma-prototyping/ Date of retrieval 23/06/2022 Prototyping is the process of turning a static mockup into an interactive and dynamic mockup (better known as a prototype). Bringing a static mockup to life is without doubt one of the most — if not the most — exciting step in the design workflow. It’s also super important that developers understand the design’s user flow, and how it should feel and function. What better way to do that than by using Figma, the best design tool in the world according to the 2020 Design Tools Survey? Prototyping with Figma is easy and enjoyable once you know how it works. Start off by duplicating this static mockup (click on Series of Interactions and then Duplicate to my drafts), and then throughout the tutorial we’ll add more and more functional fidelity. Your local copy should look like this: Step 1: Create a Horizontally Scrollable Frame Let’s start with Artboard 1, making the selection of cards that overflow the viewport horizontally scrollable. This is one example of how we can make our mockups dynamic without having to create what Figma calls “Connections”. Connections direct us to new Artboards, but that’s not what we’ll be doing in Step 1. Start by selecting Cards from the Layers Panel (left sidebar), and then from the Design Panel (right sidebar this time) change the Group option to Frame using the dropdown.  References I won’t dive into this too much, but the main difference between a Group and a Frame is that Groups wrap their children tightly, whereas Frames can be any size. This means that:  grouped children scale with the Group, whereas Framed children are a little more stubborn (a feature, not a bug)  framed children become aligned relative to their Frame, whereas Grouped children are still relative to their Artboard  frames can have overflowing content that can be scrolled horizontally or vertically (this is what we’ll be attempting) Wait, does this mean that Artboards are actually Frames? Indeed: what other UI design tools call Artboards, Figma calls Frames. This is likely because, in Figma, Frames can be nested within other Frames, which is slightly different from what Artboards do in other tools like Sketch, Adobe XD, and so on. Switch to Prototype mode (⌥ + 9) where the Overflow behaviour setting will now be available, and then change the dropdown option from No scrolling to Horizontal scrolling.  References Now, you’ll notice that the shadows are oddly cut off by the newly converted Frame, but this is actually standard behavior for overflowing content, and it can be fixed relatively easily. Since the shadow’s blur variable is 30 and Frames can be any size, we’ll need to resize the Frame to allow for an extra 30 spacing around its edges. It should be easy enough to Resize (shift + ⌘ + ↑↓←→) and Nudge (shift + ↑↓←→) the objects accordingly. By the way, you might notice (if you click on the Frame) that the cards and their spacing can be rearranged quite easily. This isn’t relevant to the tutorial specifically, but still awesome.  References Step 2: Create An Artboard Transition For this next step, let’s try an interaction that connects one Artboard to another Artboard, otherwise known as a “Connection”. Select the Cards frame (yes, the entire frame, since it doesn’t really matter which card ends up being tapped right now). Then, assuming that you’re still in Prototype mode, drag the Connector (that is, the bordered circle that shows a + when hovered) into Artboard 2. These Artboards are now connected. After dropping the Connector onto Artboard 2, the Connection settings (which should now be revealed), should look like this:  Interaction details  “On tap” (the interaction will be triggered by tapping)  “Navigate to” / “Artboard 2” (tapping will cause the user to navigate to Artboard 2)  Animation  “Push” / “←” (“Artboard 2” will push itself onto the screen from the right)  “Ease Out” / “300ms” (over the course of 300ms, the animation will start off fast and slow down towards the end)  Check the “Smart animate matching layers” checkbox (common elements such as the back button and the navigation will not animate if left unchanged)  References Want to see what we’ve done so far in action? Click the “Present” button (i.e., the play icon) in the top-right corner. If you’re using Figma in a web browser, this opens a new tab. Tip: hit R to reload the prototype. Step 3: Retreat! Before we move forward and dive into more complex Connections, let’s make sure that we can return to Artboard 1 (or whatever Artboard we came from). Create another Connection, this time originating from the back button(s) with the following settings:  Interaction details  “On tap”  “Back”  References Animation settings won’t be available this time, since the options are fixed. Specifically, the transition will animate in reverse. For instance, if we transitioned into the Artboard with “Push ←” then we’ll transition back out with “Push →”. Step 4: Create a (Relatively) Complex Timed Animation During this next and final step, we’ll create a singular animation that actually spans across several Artboards and individually animates several objects rather than the entire Artboard. Specifically, we’ll rotate the expanded card to the left upon the click of a button, and then set up a timer to rotate it to the right before returning to its original state. Essentially, a swinging animation. Select the Button object on Artboard 2 and establish a Connector that connects to Artboard 3. Use these settings:  Interaction details  “On tap”  “Navigate to” / “Artboard 3”  Animation  “Smart animate”  “Ease Out” / “300ms” Note: as we’ve chosen “Smart animate” as the animation type, layers that exist in both Artboards but are visually different will transition smoothly, but only if the relevant layer structure and layer names remain consistent. If they don’t remain consistent, Figma will fail to understand that the layers are one and the same, and they won’t animate correctly. From the “Design” Panel, you should see that I’ve made the button’s background #FF0000 and rotated the card to the left. But how do we then rotate it to the right after the 300ms “rotate left animation” has run its course? Well, that’s where timed animations are needed. Repeat the steps above, this time connecting Artboard 3 to Artboard 4 with “After delay” / “300ms” being the only difference. To complete the interaction, repeat once more connecting Artboard 4 to Artboard 5.  References This is how we run animations consecutively. In our case, the initial tap interaction activated a “rotate left animation” and then the following animations happened automatically on a timer. Home ~~ End of References ~~