2/21/19

Author: David Hogue

• Interaction designers are most often associated with web and mobile design, but we work on much more than that.
• interfaces themselves are much more diverse than the pixels on screens of laptops and smartphones. It’s common today for people to use touch screens, spatial gestures, voice, and even traditional physical controls. If people are interacting with the product, then an interaction designer should be involved.
• In the course of our work, we contribute to, or create many different types of documents and design artifacts, that capture and organize the information we need, the ideas we have, and the descriptions of the people, products, flow, systems, and services, and more.
• We work closely with researchers, to help understand people and problems. We work closely with engineers and developers, to understand the technical constraints and opportunities. We work closely with product managers, and business leaders, to identify opportunities and solutions, and we work closely with other designers, to coordinate the different efforts into cohesive product design.
• An important part of your work as an interaction designer is to identify what a project needs. Not every document, deliverable, and artifact, needs to be created for every project.
• Finally, the deliverables and artifacts we create are living documents, they evolve and change as our understanding of the people, the problems, and the product solutions change.
• Interaction designers use many tools, and we have a vast array of techniques to help us generate and identify potential solutions. We are pragmatic. We apply our skills and select our tools based on the problems we need to solve, the solutions we need to communicate, and the people with whom we are working.
• These early sketches can also help develop consensus about what problems we are solving and what goals we are trying to achieve. As our designs progress, we typically need an increasing level of detail and fidelity.
• You should spend your time thinking about solving problems. As long as you are able to capture, represent, and communicate your ideas and design intentions effectively, almost any tool can be valid.
• Our problems and design challenges are becoming increasingly complex because technology and people’s expectations are changing rapidly.
• We need to go beyond simply drawing our solutions, and an increasing number of design tools focus much more on creating interactive prototypes to validate our ideas.
• There are many tools to help us bring the pixels to life, so choose those that help you best capture the intent and the experience of the design and the prototype. Remember, you are evaluating the design solution, not launching the product yet.
• There are many fields which have contributed to interaction design because aspects of our work include information organization, digital technology, graphics and aesthetics, ergonomics, engineering, product materials, social sciences, and more.
• Training and classes can help us develop the specific skills necessary to use our software tools, understand the technology for which we are designing, improve our written and verbal communication skills, work efficiently on teams, and participate effectively in research.
• here is no single path to a career in interaction design. There are many ways to contribute, but in the end, we can think about our skills and knowledge, helping us understand three things- people, technology, and design.
• The web is a very very big place and there are more online resources for Interaction Design than we could possibly list here.
• Understanding how people think, feel, understand information and make decisions can help us generate better ideas and solutions and help us craft and deliver better experiences.
• For every problem, challenge or need we seek to address through design we can use methods from psychology to help us gain insights about and take the perspective of the people who will be using your product or service, and we can do this in a very structured and systematic way.
• First, we want to identify what problems should be solved or which needs should be met.
• identifying problems and needs and evaluating how well our product or service addresses them involves research.

1. I already know that I need to identify the problems and needs of my product. I already know that the web is a very very big place and there are more online resources for Interaction Design than we could possibly list here.  I already know that training and classes can help us develop the specific skills necessary to use our software tools, understand the technology for which we are designing, improve our written and verbal communication skills, work efficiently on teams, and participate effectively in research.
2. I learned that interaction designers are most often associated with web and mobile design, but we work on much more than that. I learned that interfaces themselves are much more diverse than the pixels on screens of laptops and smartphones. I learned that the deliverables and artifacts we create are living documents, they evolve and change as our understanding of the people, the problems, and the product solutions change.
3. I want to learn what psychological methods I can use to find out how to fix my problems with my products.

2/19/19

Author: Diane Cronenwett

 

• UX designers are not expected to code as part of their skill set. However, I think it’s worthwhile to show you these frameworks because it will help you have a better understanding of how responsive design works, or if you need to put something together quickly, like a portfolio or a quick marketing page, these are some viable options to do that.
• Bootstrap was developed internally at Twitter and was released to the public.
• The Carousel component is a default component that is responsive.
• Bootstrap is a good choice if you want to get a better understanding of how a responsive webpage works or if you just want to start a responsive web project.
•  Foundation, similar to bootstrap, is also focused on components and uses a responsive grid. Foundation was created by Zurv, a product design company and while it’s not as widely used as Bootstrap, it does have a community of users and is actively maintained.
•  Foundation is a bit more advanced with less styling by default so you can add your own style. Bootstrap in comparison has a stylized look and feel which may take more time to strip away, especially if your project already has a defined look and feel that you want to portray.
• In this case, Foundation has created a bare-bones approach for you to apply your styles to the components.
• Responsiveness isn’t just for websites. It’s also useful for email.
• Emails can be painstaking to make sure they work in every client and if you’re tasked with designing marketing emails, you may want to consider a tool like this to ensure your emails are being read on a mobile device properly.
• Content management systems, also known as CMS, are prevalent on the internet. CMS systems power the content for your website and have a blog that allows for commenting, image loads, video, and other types of content.
• WordPress is one of the more popular CMSs and has a lot of themes that support a responsive layout. Unlike Bootstrap or Foundation, there is no coding required.
• CMS layouts are modular-based, which means you can have various layouts that make up the content modules for your site.
• A CMS like WordPress might be a good option if you want to put up a responsive site without dealing with code or to use for your personal responsive design projects.
• When working in cross-native platforms and through various devices, it’s important to use these design documents as a guide to make sure that you’re adhering to platform standards.
• However, there are times when you may want to deviate from the standard look and feel, but that’s a choice that you’ll make depending on the project you’re working on.
• If you start working on native Android platforms, take a look around this document, ’cause there’s a lot of information on Responsive web and multi-device design considerations.
• Becoming familiar with the components and interactions of the platform is helping to make sure you’re adhering to standard platform behavior.
• Navigating to the App Architecture section, there’s some guidance on how to structure your app’s navigation and some links to different view components.
• Another section we’re going to want to look at is the Visual Design section. In this section, there’s some information on layouts and the dimensions for portrait and landscape modes.
• Becoming familiar with the interface guidelines will help you with the design of your native mobile apps and adhere to the platform look and feel.

1. I already knew that your website will appear differently on different screens. I already knew that you have to be familiar with the designing platform to create your own. I already knew becoming familiar with the interface guidelines will help you with the design of your native mobile apps and adhere to the platform look and feel.
2. I learned that UX designers are not expected to code as part of their skill set. I learned that responsiveness isn’t just for websites. It’s also useful for email. I already knew if you start working on native Android platforms, take a look around the document, ’cause there’s a lot of information on Responsive web and multi-device design considerations.
3. I want to learn how to pick a design platform that is best for my website.

2/14/19

Author: Diane Cronenwett

• To add a new artboard you can simply press the letter a or you can go to the Insert menu at the top left of the screen and insert artboard.
• You also have options for common paper sizes and to customize your own artboard size.
• focus on making sure the information is laid out in a clear organized manner.
• The search screen is a blend of discovery and search fueled by recommendations from previous likes and people who might be similar in musical taste while highlighting trending artists that the user might be interested in.
• We don’t need to have exactly the same UI across each device, but we do want to set expectations on how the content will be delivered and how it will be organized holistically.
• When we developed some context scenarios earlier in the course, we noted that the watch might be a pared down experience of the mobile app, focusing on the core task of selecting a playlist and playing music.
• Given that the viewport is so compact on the watch, we want to keep this design highly focused.
• keep the tiled view and allow the user to scroll through the playlist. For the songs that are listed in the playlist, I’m showing the songs with the image of the album, similar to the mobile version, and added the play button over the image. And for the song itself, I took the player controls and overlaid it onto the song cover.
• Even though the Apple TV templates have been applied, we can still navigate this app the same way we have with the other two devices.
• Once we’ve selected the playlist we want to listen to we see in the next screen that there’s a list of songs in the playlist selected with options to share, create and like.
• Also, we’d want to explore connecting different devices for a radio DJ scenario we came up with earlier in the course.

1. I already knew that your design has to fit the mobile, computer, tv, and watch. We have to make sure that no matter what device the user is using, they should be able to access all of my design pages. I already knew that our design’s information has to be clean and simple for someone to read.
2. I learned how to layout a basic home page for an app. I learned that we don’t need to have exactly the same UI across each device. There can be changes to the other device can use our app better. I learned that I need to keep the watch design highly focused. 
3. I want to learn how to create a real app and apply all I learned in this lesson to the app.

2/12/19

Author: Diane Cronenwett

• As designers, we have to be aware of the various screen sizes, but we won’t be designing for every single device. Instead, you might pick the most common devices in the market and create a scalable design that can accommodate various form factors and screens.
• Designs viewable on mobile, tablet, and desktop, regardless of whether your app is responsive, native, or hybrid, will need to employ a mobile-first design and make some choices about the core set of tasks the user will be performing in the experience.
• Approaching the design mobile first helps to prioritize key tasks and start creating an information architecture that can scale up to a bigger sized device.
• Information architecture, also known as IA, refers to how the content is organized, which will inform the layout of the screen and the navigation model.
• Creating the IA and the navigation model are important for experiences to scale across devices so that users understand how to navigate through your apps. Image scaling, content prioritization, and navigation are the high-level key considerations when approaching a multi-device design approach.
• Tap targets should be easily viewable on the site with enough space for users to be able to easily tap on it without accidentally selecting an unintended target or button. Simple data entry. Even on a desktop entering data can be a laborious process.
• The animation is useful for reinforcing state changes and for giving users feedback that something just happened, like adding an item to a cart or acknowledging that something was deleted.
• Animation can also bring an element of delight, and sometimes you can see examples of that in loading icons.
• Depending on your app you may want to consider designing it for both portrait and landscape if the user might need to view the content in the landscape view. Gaming apps, for example, are mostly locked in landscape as are some video apps.
• Apps for watches should be highly focused on a singular task. Given the nature of the small screen, there isn’t a lot of affordances to accommodate a complex task and it can be tedious to scroll or interact with multiple views and screens for information on a small device.
• Given the small screen, the text should be both legible and minimal. If you’re going to have content blocks of text, make sure it’s broken up into smaller digestible pieces.
• the ability to utilize location, altimeters and accelerometers can provide a lot of data to create a compelling fitness app.
• While sitting 10 feet away, you’ll want to ensure there isn’t a lot of text on the screen and that the text is large enough to see from a distance. Using light text on a dark background increases contrast, making it easier to read the text at a distance.
• When navigating content with remote control, gaming control, or an app, it’s essential that the navigation pattern on the screen is clear and mapped to the proper controls on the device.
• Controls in the screen should be scaled to a size that is easily accessed with remote control.
• Keep in mind that contrast is important to ensure legibility of text and that some colors might be harsh to look at if they are too bright.
• A benefit to having a voice-controlled interface is that it allows the user to multitask.
• You may have noticed in your own experience with these products that it’s sometimes difficult to get the answer you’re looking for without asking your question in a particular way. The reason for that is because we have expectations for how a conversation should flow, and sometimes the context and nuance of dialogue are missing from a voice system, and there isn’t enough information to receive the correct response.
• When designing a voice interaction, keep in mind the following. The design is hands and visual-free.
• The user will be interacting with your device only with the voice so clarity of feedback, errors, and the content will have to be clearly defined to make it easier for the user to understand the response.
• The goal of the interaction is to make it as brief and clear as possible so the user gets the information they need quickly. You’ll also want to keep in mind the tone of the interaction should feel more conversational, not as if the user is interacting with a system.
• By creating a clear flow and script, it will help eliminate any ambiguity and help you think about how to create a frictionless voice experience.
• Not all tasks are suited for each device, and your multi-device strategy will be driven by the needs of your user and the business.
• Consistency refers to having the same content across each device and allowing the users to access the same core set of features.
• The third part of the framework is a complementary design. This approach refers to how we can use multiple devices together to create an experience.
•  Before embarking on your multi-device design, make sure you have a solid understanding of your users. Your design should accommodate the different needs and tasks of your users and which devices will support that.

1. I already knew that my buttons on mobile devices should be easy to tap on and access. I already knew that animations on my design can help viewers on my website and it also makes my website visually appealing. And lastly, I already knew that I have to be aware of the various screen sizes, I may not be able to do every single screen size but I can make a scalable design.
2. I learned that approaching the design mobile first helps to prioritize key tasks and start creating an information architecture that can scale up to a bigger sized device. I learned that creating the IA and the navigation model are important for experiences to scale across devices so that users understand how to navigate through your apps. Image scaling, content prioritization, and navigation are the high-level key considerations when approaching a multi-device design approach. I also learned that I have to keep in mind that contrast is important to ensure legibility of text and that some colors might be harsh to look at if they are too bright.
3. I want to learn how to add animation to the website.

2/8/19

Author: Diane Cronenwett

• Designing for multiple devices can be a very complex undertaking. But there are a few different strategies you can employ depending on the needs of your specific project and the needs of your users and the form factors that you’re working with.
• Some key principles to consider before approaching your multidevice project are design for people first. Understanding your users’ tasks and goals are primary when designing for devices.
• Content can be delivered on any device, but some devices are better suited for particular tasks. To better understand how you’re going to design for a multi-device scenario you’ll need to understand the user, the tasks they want to complete, and any environmental constraints.
• Understanding the context of use is important for any design project, but it’s especially critical for designing a multi-device experience.
• Responsive design is a web-based approach to designing and developing your website so that content is delivered to any device, size, or orientation. Responsive design does not take into account TV layouts or watches as of yet. More specifically, responsive web design refers to a similar or the same web experience between desktop, tablet, and smartphone.
• When thinking about your multi-device design project understanding the underlying technology is helpful when starting to define your design.
• Hybrid applications take an approach to app development that includes a mix of using web-based technologies and native technologies or interactions.
• As a designer, you’ll want to note the limitations and capabilities are of the technologies being used and try to incorporate as much of that native feel as possible in the design depending on the platform.
• Depending on what you’re designing, you may have multiple screens and devices that you have to support. As designers, we have to be aware of the various screen sizes, but we won’t be designing for every single device.
• Designs viewable on mobile, tablet, and desktop, regardless of whether your app is responsive, native, or hybrid, will need to employ a mobile-first design and make some choices about the core set of tasks the user will be performing in the experience.
• Creating the IA and the navigation model are important for experiences to scale across devices so that users understand how to navigate through your apps.

1. I already know that it’s important to think about your design as a whole. I already know that when you are designing, you need to know who you are designing for you. I already know that when designing for multi-device use, apply consistent branding throughout all devices.
2. I learned some key principles to consider before approaching your multidevice project are design for people first. Understanding your users’ tasks and goals are primary when designing for devices. I learned that responsive design is a web-based approach to designing and developing your website so that content is delivered to any device, size, or orientation. I learned that knowing if the design is going to be native will help you as a designer to formulate your design using the existing platform paradigms.
3. I would like to learn more about responsive design and how to apply it well in my website.

2/6/19

Author: Chris Nodder

• You have to approach the creation of the design system like you would any other project, it should have milestones and releases, acceptance criteria and metrics.
• However much you’d like to move the whole organization to your new design system in one massive migration effort, it’s probably more practical to start small and stay generic.
• Focus on common, fundamental and foundational interface elements that every team can use, and on visual branding elements like colors, typography, and icons.
• Plan on creating a sample app as a test case for all your work, and so that product teams can quickly see how much better their stuff would look in this new style.
• Now your job is to get the pilot projects up to speed with the design system and assist them as they work through issues and identify the need for more interface elements.
• If this early adopter group is asking the questions, then others will be too later on.
• As your design system takes shape, you’ll be able to increase outreach to more teams and find out what their individual needs are.
• You’ll probably want a couple of low-key releases to select teams before you announce the new design system globally.
• Even during these low-key releases though, it’s important to keep communicating your progress with the rest of the organization, so that they can plan for the time when they’ll be asked to start using the design system.
• It’s essential to question every part of the current workflow before you add it to the design system.
• You will undoubtedly find many many different types of buttons, checkboxes, confirmation dialogs, carousels, date pickers and so on.
• You’ll need to flag the similarities and differences, especially where the differences might cause user issues.
• You’ll need to decide what’s achievable for an initial design system release. It’s easy to look at other people’s design systems and try to aim for that, but remember you’re seeing their endpoint, not their starting point. Start small and scrappy.
•  A design system won’t solve communication and collaboration issues in your organization.
• The way your company builds software is bound to be mirrored in your design system. That’s one reason why you can’t just copy somebody else’s design system.
• Using it would be foreign to the people in your organization because it wouldn’t reflect their culture.

 

1. I already knew that design systems are more than just a document. They represent your website. I also know that communication is key when presenting your design system. I already know that you have to present your design system for your team and not force them to agree to this design.
2.  I learned that when you have a new design system, however much you’d like to move the whole organization to your new design system in one massive migration effort, it’s probably more practical to start small and stay generic. I learned that if your early adopter group is asking the questions, then others will be too, later on, ask questions. I learned that I‘ll need to decide what’s achievable for an initial design system release. It’s easy to look at other people’s design systems and try to aim for that, but remember you’re seeing their endpoint, not their starting point. Start small and scrappy.
3. I want to learn how to persuade my design team to look at my design system the way I see it.

2/4/19

Author: Chris Nodder

• The main section of a design systems documentation is the list of all the components in that system.
• in a good design system, this list is more than just a pattern library because it doesn’t just describe the patterns. It also provides the code necessary to create and use them.
• So, you’ll need a submission system and a place to ask questions.
• Versioning documentation also lets people know what’s changed from release to release.
• Communication is the key to a successful design system.
• Every system has an underlying process that defines how it works, who’s involved, what the expectations of different groups are, and so on.
• If you don’t spend the time to map out your ideal process and check that it’s actually workable, people either won’t move from that old process and won’t adopt your design system or they’ll start using a design system in ways that you didn’t anticipate.
•  The first thing to work out is whether there really are advantages to proceed.
• Creating change means disruption. If things are working at the moment is it worth the effort involved to make such a big change?
• the new design systems standards you need to convince everyone else in the company that it’s worth the time and effort to adopt this new way of working too.
• When you present your vision for the design system to executives you’ll need to make sure you’re doing so in terms of the cost savings and financial benefits to the organization.
• Start by showing your vision for the user experience, pointing out current inconsistencies and highlighting how much better you could meet business goals with better workflow across and between products if teams have more time to focus on it.
• The meat of your justification will be your plan for what you expect the design system to achieve and by what dates.
• Building a design system is not just a part-time job for one person. It’s a full-time job for several people.
•  Because the design system is about communicating design concepts to developers in a way that minimizes their effort and maximizes their work output, you’ll need a dedicated team with both disciplines represented.
• Although some companies manage with a team size of two people, four to eight appears to be more common. Most frequently, there’s around a 50-50 design and developer split.
• Most of the developers are front-end specialists, but it’s useful to have someone with at least some full-stack experience because it’s important to understand issues that teams might face with implementing the design system within their products.
• On the design side, it’s important to have people with skills in visual and interaction design, user research, and also content strategy.
• design system is more than just a document, so this team will also create the technical architecture, the tools and reference implementation to help developers on product teams to be successful.
• Along with the core team, you’ll need to reach out frequently to others in the organization for review and sanity checks. It’s good to set up a group of interested people from multiple areas of the organization who can do cross-disciplinary check-ins and get involved in critiques and planning sessions.
• Different teams have different needs and you probably won’t want to choose a final tool or platform to host your design system until you’ve worked out what types of information it needs to contain.
• Pre-written and tested code, complete with styling and standard variable names is the key time saver for developers who are going to want to be able to grab working code straight from the system.
• The larger your organization and the more custom elements you feel you’ll need, the more likely it is that you’ll end up building your own system.
•  Either way, it’s worth learning from other peoples’ solutions to help you decide what’s important to you.
• Bootstrap which is a full component library and design system that you can adapt and style to suit your own needs.
• Lingo handles the visual side of the design system with good integration into several design tools.
• UXPin and Frontify have commercial tools that allow teams to create visual styling and then add code snippets inline to create a design system.
• In the end, your choice of pre-existing tools is gonna be governed by your design and development environment.

 

1. I already knew that when it comes to designing a website, communication is the key to creating an amazing website. I already knew that on our website, we need to have a questions page so viewers can ask about what we do. I already knew that if you have a new idea for your website, you have to make sure it will work with your website and you have to share that idea to your team.
2. I learned that when you are adding something to the design or website, is it creating change, change means disruption. You also have to ask yourself, if things are working at the moment is it worth the effort involved to make such a big change? I learned that although some companies manage with a team size of two people, four to eight appears to be more common. Most frequently, there’s around a 50-50 design and developer split. I also learned that when you are presenting your vision for the design system to executives you’ll need to make sure you’re doing so in terms of the cost savings and financial benefits to the organization.
3. I want to learn how to code that ask-a-developer question bubble on the bottom right corner of the screen.

1/31/19

Author: Chris Nodder

• It’s also important to tell people why you’ve chosen a certain style.
• There are also major benefits to customers who really appreciate visual and style consistency across your products and sites.
• The whole point is that this is a public document. It needs to live in a prominent location where people can find it.
• Keeping the organization on brand
• Ensuring greater consistency in visual and written content
• an easy place to find the company-approved resources
• applying a specific visual style to each interface element to create a company specific design language.
• It’s really worth checking out several of the open source design systems out there, but don’t be disheartened when you see how wonderfully complete theirs seem in comparison to where you are starting from.
• And don’t try to copy their system without thinking about the needs of your organization. What works for them may not be right for you.
• Most companies create a design system to make life easier for the people who build and maintain interfaces in your organization.
• the design system is how the style guide gets expressed in code.
• A design system means less review work for the brand team because every element is styled with the correct colors, fonts, and spacing. It means the content team can be confident that the text, images, audio and video that they produce will work how they intended when it’s presented in each interface.
• Design systems tend to each contain the same general elements. The first and most important element is a description of its design philosophy.
• This sets out the reasons why the system’s been designed the way it has.

1. I already know that my website’s style guide will not turn out perfect the first time. I know that when designing my website that my style guide should not stray far from what my website is actually about. I also know that your style guide should match what your website is about.
2. I learned that your website needs to live in a prominent location where people can find it when they search it up. I learned that my website needs to have greater consistency in visual and written content, my website cannot have a grey homepage but then on the next page have a bright pink color. I also learned that most companies create a design system to make life easier for people who build and maintain interfaces in your organization. People who are creating your website can use the style guide to know what you want on your website.
3. I want to learn how to make a good company philosophy.

1/29/19

Author: Chris Nodder

• You start your style guide with a really brief description of the company philosophy and how that translates into the brand and branding elements that the style guide contains.
• The content on those websites needs to quickly show visitors what the organization is about.
• The content you produce must speak specifically to your audience or audiences in order to have the type of impact you want.
• The part of style guides that typically gets the most attention is the section that describes your visual identity.
• Visual identity covers where and how the company logo or logotype can be used, what the main brand colors are and any other secondary colors in the approved palette, typography, such as which font faces, weights and sizes are acceptable and layout issues, such as the grid that’s used and any standard print formats.
• It’s also useful to lay out guidance on how to signify visual elements to people who might not be able to see them. And how to avoid putting essential information and content types that might not render on some users’ devices.
• Typically, logos and color palettes are things that you make available both internally to the organization and externally for third parties.
• Even if you think you’ve covered every angle, there’s always gonna be a situation that needs some extra guidance.

1. I already knew that your logo cannot copy another company’s logo. I already knew that your logo has to represent what your company is about. Your logo has to look appealing and have a good color palette.
2. I learned that you have to know what your audience, thinking like that can help you know what to put on your website. I learned that the part of the style guides that typically gets the most attention is the section that describes your visual identity. I also learned that we need to make sure our website can be seen by people with different devices besides a computer.
3. I want to learn how to make my website visible for people with different devices besides a computer.

1/25/19

Author: Chris Nodder

• Style guides and design systems are two ways of communicating the standards that you set for visual treatment, written content and the user experience behavior of your products, your website, and your printed literature.
•  A good style guide and design system will prevent inconsistent user experience within a product and across products in an organization.
• Typically the style guide describes the content and branding aspects and the design system describes the architecture and layout of your digital products.
• Having the style guide and design system makes life easier for developers, designers, content producers, and external partners.
• The design system sets the guide rails for what’s acceptable to put in an interface.
• The main goal from a developer’s perspective is to minimize the work required to build the user interface.
• Start by focusing on the style guide.

1. I already knew that our website has to have a look that needs to catch the viewers attention.  The website’s look also needs to attention-grabbing.
2. I learned that you have to start by focusing on the style guide. I learned that the main goal from a developer’s perspective is to minimize the work required to build the user interface. Also, that style guides and design systems are two ways of communicating the standards that you set for visual treatment.
3. I would like to know how to make my website stand out from the other websites.