Warm Up Video reflection 33 – Designing and Prototyping a Website with Adobe XD

Date: 4/23/19

Brian Huynh

Repeating rows and columns – Prototyping a simple interaction

I already know

• You can use the repeat grid to repeat horizontally and vertically, making rows and columns.
• When creating multiple screens, you’ll end up with duplicating a bunch of elements, text fields and seperate graphics. What you really want to do is link them all together to make it more clean.
• To prototype, what I want to do is to start linking these different buttons to the various screens.

What I’ve learn

• To add a symbol, take the magnifying glass, and click on the graphic.
• If you decide you want to maybe break it apart, you can ungroup this symbol so it’s basically going to break it apart and no longer be a symbol at all if you want do that
• If you want to create multiple pages, all you do is zoom in, and use the spacebar to kind of pan around.

What I want to learn

• I want to learn what do you need to use a symbol for

Warm Up Video reflection 32 – Designing and Prototyping a Website with Adobe XD

Date: 4/23/19

Brian Huynh

Creating multiple screens – Repeating elements using Repeat Grid

I already know

• Creating multiple screens is technically creating artboards.
• If you want to duplicate artboard to make two screens, just go ahead and select Command + D, or Control + D if you’re on pc.
• When designing for mobile, you want to get ahold of UI kits cause we want to be able to use all of those elements that are provided by ios and google materials.

What I’ve learn

• When you’re creating for different platforms means, of course, resizing content to make sure it fits within that space as well as making sure they’re large enough to, say, be clicked on, in the case of mobile
• Once you have homescreens set up for all devices, You want to make a content screen by command + on mac and Control + if you’re on PC.
• When designing and diving into screen design or website design, you often find yourself repeating multiple elements. You can do it easily.

What I want to learn

• I want to learn how do you make a computer design fit into a phone design.

 

Warm Up Video reflection 31 – Designing and Prototyping a Website with Adobe XD

Date: 4/5/19

Brian Huynh

Understanding the workspace-Adding effects

I already know

• When you launch Adobe XD you’ll be greeted by a splashscreen. You can start the tutorial and pick Ui kits etc… during this screen
• When it comes to creating graphics in Adobe XD, it’s done pretty easily, just using their tools right over here in the toolbar. In fact, what you want to do is create a navigation bar and then draw a magnifying glass
• If you’re on windows, you can actually just right click on the objects and select group.

What I’ve learn

• To import some vector graphics, go to files, import. From there go to the assets folder and import it.
• You can also import bitmap or raster graphics into Adobe XD and there’s a couple things you need to watch out for, so first off, go to File, Import and you can import JPEG files as well as PNG files and even GIF.
• To change text and colors globally you can go to assets buttons on the lower left, open it up and there will be a character styles.

What I want to learn

• I want to learn how to add more and delete artboards.

 

Warm Up Video reflection 30 – Adobe XD for Designers

Date: 4/3/19

Brian Huynh

Testing on mobile devices-resources and next steps

I already know

• In adobe XD you can share prototypes with a client, maybe some users, test it out, do everything you need to, but you can actually also share content with developers using design specs.
• Creating a public link will give the developer all the specifics that they need to create this design.
• Publishing prototypes as well as design specs are a couple ways to share your designs, but you can also export out screens and assets because this is very important being able to not only share the design specs but the actual graphical assets for the developer

What I’ve learn

• In adobe XD you are able to test different screens designed for different devices.
• When you are designing for other platforms, you probably want to take advantage of those graphic elements that are part of that platform, take, for instance, Iphone.
• You are able to share and comment on prototypes in adobe xd and you are able to record a video of the interactions by clicking the record button in adobe xd

What I want to learn

• How do you export the design once you put it into a different device?

 

Warm Up Video reflection 29 – Adobe XD for Designers

Date: 4/1/19

Brian Huynh

Prototyping interactions and transitions – Designing for different screen sizes

I already know

• While we’re designing we always want to be thinking about the end user and how they’re viewing this website, because they might not always be reviewing the website on a very large 1920 by 1080 screen.
• It is best to make website layouts for different screen sizes.
• Responsive Resize allows to automatically resize content.

What I’ve learn

• The arrow tab lets you point to anything else that you wanna point to or any other screen or artboard.
• Another popular interaction is having scrolling content, and that’ll be the case anytime you have a list, or just a lot of content in general.
• Scrolling doesn’t necessarily need to be at the top or behind, it could really be at the bottom. Really, anywhere you wanna fi something, you can do that whenever you make scrollable pages.

What I want to learn

• How are you able to make separate scrolling wheels for separate pages

 

Warm Up Video reflection 28 – Adobe XD for Designers

Date: 3/28/19

Brian Huynh

Using Illustrator and creative cloud libraries- Using repeat Grid

I already know

• Repeat grid will allow you to draw out a rectangle and its just gonna be filled with black, but really this is where the photo is going to appear.
• Holding down the alt key and the shift key will allow you to create the grid.
• Going into XD, sure enough, it updates back here, and if you could imagine me using this everywhere, across multiple artboards, even across multiple apps, again, it could be indesign, after effects, really pretty much anywhere, it will update.

What I’ve learn

• To bring assets from illustrator or photoshop to XD, you can simply just copy, then go into XD, and paste it.
• If you’re collaborating with someone else, you can have the branding person work on that logo and it will update within your interface.
• If the choice is to go with a different color, you can change it accordingly so take advantage of using assets, not only for colors, character styles, but also for symbols, especially as you dive into creating multiple pages.

What I want to learn

• What is the reason to use XD instead of adobe illustrator?

 

Warm Up Video reflection 27 – Adobe XD for Designers

Date: 3/26/19

Brian Huynh

Drawing and editing graphics – Adding images and effects

I already know

• With adobe XD you can import images from other places, just go to file, imporat, and you can import JPEGS, PNG files, GIf images, SVG files as well, and you can do it from file import.
• Grouping in images allows you to organize your layers to make it easily more accessible.
• Command + 1 will fit everything if you go up to view, everything 100% or you could do a zoom to fit all.

What I’ve learn

• Encourage to use your assets panel because you are able to save your colors here, knowing that they’re global colors.
• Typekits allow you to access all of the fonts, assets, and sync fonts.
• Use artboards to access differents projects at the same time or to organize your work.

What I want to learn

• How do you get a gradient background?

Warm Up Video reflection 26 – Adobe XD for Designers

Date: 3/21/19

Brian Huynh

What are UX and UI design? – Using the workspace and tools

I already know

• User experience is all about improving that usability, the ease of use, and the overall pleasure you’re providing to the end user. So, that’s what User Experience Design is all about.
• Adobe XD allows you to design, prototype and collaborate with others for anything you want.
• UX design means User experience while UI mean User interaction to the website.

What I’ve learn

• User experience design is all about the customer, the customer satisfaction at whatever touchpoint that’s gonna be at.
• User interface design is all about the look and feel but also that responsiveness and interactivity.
• For user interface design, it’s not only creating the visual assets, but applying those to the products interface as to best enhance the users experience.

What I want to learn

• How do you use Adobe XD to create interfaces which will satisfy customers.

Warm Up Video reflection 25 – UX Foundations: Interaction Design

Date: 3/19/19

Brian Huynh

Microinteractions: Sound – Next steps

I already know

• Sound can enhance the experience if it is used effectively to complement the content and provide meaningful information
• Sounds can provide feedback and information by acknowledging a person’s interactions and communicating the status of the product
• When there is no display or visual feedback, haptic feedback may be essential may be essential to acknowledge an interaction.

What I’ve learn

•  Error message needs to be well designed, use natural language, and never blame the person. Clearly describe what went wrong.
• An error occurs when an action or process cannot be completed correctly, such as the inability to complete a transaction because the credit card number was entered incorrectly.
• We may not understand why the mistake occurred, and we may simply want to go back to where we were, and try again

What I want to learn

• How to use sounds to enhance the experience of a website and provide with a meaningful information.

Warm Up Video reflection 24 – UX Foundations: Interaction Design

Date: 3/15/19

Brian Huynh

Inputs – Microinteractions: Motion

I already know

• We interact with peripherals, such as keyboards and mice, to create a corresponding change on a separate screen.
• Moving a mouse on a horizontal desk surface with one hand to control a cursor on a vertical screen in another location requires careful targeting and control to position that cursor.
• We use motion and animation to lead people toward gestural interactions.

What I’ve learn

•  Gestures are often more complex touch interactions and comes in a variety of forms.
• We continue to use instructions and demonstrations to help people understand how to interact with more complex gestures
• As people become more familiar and comfortable with voice interactions, their expectations will increasingly demand conversation and contextually aware responses from the product.

What I want to learn

• What kind of micro transaction can you add to a website to make it more interesting