User Experience Design Essentials - Adobe XD UI UX Design

DOWNLOAD THE EXERCISE FILES HERE

Class Project 01 – Wireframe Homepage & Contact Us Page

1. Review the brief & persona for the client: Maynooth Furniture.
   1. Exercise Files > Class Projects 1 > Brief - Maynooth Furniture.pdf
   2. Exercise Files > Class Projects 1 > Persona - Maynooth Furniture.pdf
2. Homepage
   1. Using the skills we’ve learnt so far, wireframe the homepage using the homepage feature listed in the brief:
      1. Logo
      2. Nav
         1. Living Room
         2. Bedroom
         3. Kitchen & Dining
      3. Shopping Basket
      4. Contact
      5. Search Box
      6. Hero Slider
      7. vii.New in store
      8. viii.Inspiration Ideas
      9. Clearance Deals
      10. Footer
3. Contact Us
   1. Create a second artboard named ‘contact us’.
   2. Either using examples from the ‘wires’ XD template or creating your own version. Build a simple contact us form.   
   3. Look to other sites for examples.
4. Create JPG of finished work.
   1. File > Export All Artboards > Jpeg
5. Share your work in either or all of these:
   1. Assignments section of this website
   2. Add to comments of the page.
   3. Social media & tag Dan
      1. Instagram: @bringyourownlaptop
      2. Twitter: @danlovesadobe
      3. Facebook group here.
   4. All of the above ☺

Class Project 02 – Prototype

1. Connect your homepage to your contact us artboards.
2. Your contact us page can be either a page or a popup modal.
3. Take a screenshot of your Prototype.
   1. Make sure you’re in Prototype mode.
   2. Edit > Select All
   3. Take Screenshot
      1. Mac
         1. CMD + Shift + 4
         2. Then drag a box around your artboards.
         3. Your screenshot will appear on the desktop.
      2. PC
         1. Windows logo key + PrtScn
         2. OR Windows logo key + Ctrl + PrtScn
            1. OR Windows logo key + Fn + PrtScn
         3. Your screenshot will appear in a folder called “Screenshots” inside your default “Pictures” folder.
4. Share your work in either or all of these:
   1. Assignments section of this website
   2. Add to comments of the page.
   3. Social media & tag Dan
      1. Instagram: @bringyourownlaptop
      2. Twitter: @danlovesadobe
      3. Facebook group here.
   4. All of the above ☺

Class Project 03 – Symbols & Repeat Grids

1. Clear your assets panel from any unintentional assets.
2. Make your navigation & footer a named symbol in your assets panel.
3. Create a new artboard called ‘Category Page – Living Room’
4. Using your current wireframing skills, including the repeat grid to create a page that lists out all of the products that appear in that category.
   1. List out the things you feel need to be on this page. If there are cards, what should be in the cards. Does it need a left nav like the instructorHQ mockup? Remember to keep Katherine in mind!
   2. Look to existing e-commerce websites for ideas on how a category page can work.

E.g: www.ikea.com, www.dfs.co.uk, www.habitat.co.uk, www.amazon.com, www.ebay.com.

1. Create a new artboard called ‘Product Page’
   1. Using your current wireframing skills, create a page that shows details about the final product.
   2. As above, list out all the things you feel should be on this page to help Katherine make a purchase.
2. Prototype all the pages.
   1. Connect them all up into a working mockup.
3. Take a screenshot and share using the options listed earlier.
   1. After sharing your work, please look at other peoples versions and offer encouragements & constructive criticism.

Class Project 04 – Wireframe Feedback

1. Create a public prototype.
   1. Give it a name: Maynooth Prototype V1.0
2. Share the link with someone you know and ask them to leave a comment.
3. Record yourself doing a basic demo.
4. Share your link & video in either or all of these:
   1. Assignments section of this website
   2. Add to comments of the page.
   3. Social media & tag Dan
      1. Instagram: @bringyourownlaptop
      2. Twitter: @danlovesadobe
      3. Facebook group here.
   4. All of the above ☺ 
5. Be sure to comment on someone else’s mockup so you understand what it’s like to be the client. Someone will do the same for you so you can see what it’s like to receive feedback.

Class Project 05 – Moodboard

1. With the Maynooth furniture in mind, create a moodboard for style, font, colour & layout ideas.
2. Add the mood board to your artboard or niiice.io.
3. Take a screenshot of your moodboard.
4. Share your moodboard in either or all of these:
   1. Assignments section of this website
   2. Add to comments of the page.
   3. Social media & tag Dan
      1. Instagram: @bringyourownlaptop
      2. Twitter: @danlovesadobe
      3. Facebook group here.
   4. All of the above ☺ 

Class Project 06 – Colours

1. Option 1: Using the existing colours.
   1. Import the Maynooth Logo.
      1. Exercise Files > Class Project 1 > Logos > Logo-Maynooth-Option1.svg
   2. Add the colours from the logo into your Assets panel.
   3. Add the colours from the logo into your Swatches panel.
   4. Reorder both sets of colours.
2. Option 2: Using your own colours.
   1. Choose your own colours & update the logo.
   2. Import the Maynooth Logo.
      1. Exercise Files > Class Project 1 > Logos > Logo-Maynooth-Option1.svg
   3. Ungroup the logo.
   4. Update with your own colours.
3. Sharing
   1. Only share your work at the moment if you’ve picked your own colours.
   2. Screenshot your new coloured logo and share:
      1. Assignments section of this website
      2. Add to comments of the page.
      3. Social media & tag Dan
         1. Instagram: @bringyourownlaptop
         2. Twitter: @danlovesadobe
         3. Facebook group here.
      4. All of the above ☺ 

Class Project 07 – Text & Buttons

1. Create your text stack.
   1. Heading 1, Heading 2 etc.
2. Add to your Character Styles.
3. Create your Hero Text (Heading 1 & Body text).
   1. Because your site is an e-commerce site you’ll find the hero space is more about specials & promotions and less about brand development so we’ll have a seasonal hero image.
      1. E.g. Spring, Christmas, Black Friday etc.
   2. Look to existing furniture sites for inspiration.
4. Create a button in the hero section
   1. What ever fits with the promo you’ve decided to use.
      1. E.g. Start Shopping, Buy Now, More Details.

Class project 08 - Draw your own icons

1. Using any of the tools learn so far in the course (pen tool or Boolean) create:
   1. Account Icon.
   2. Shopping cart icon.
   3. Plus one more icon of your choice.
2. Add to your Maynooth Furniture Mockup.
3. Screenshot the icons from your mockup and share.
   1. Assignments section of this website
   2. Add to comments of the page.
   3. Social media & tag Dan
      1. Instagram: @bringyourownlaptop
      2. Twitter: @danlovesadobe
      3. Facebook group here.
   4. All of the above ☺ 

Class project 09 - Full Hi Def mockup

This is a big one for you! We’ve learnt a lot about creating images & graphics. Now it’s time to put the tools into practice to move your mock-up into a finished’ish design. I want you to use all of the tools/techniques listed below in your Maynooth Furniture design. You’ll be better at some things than others. I want you to focus on the things you are not good at ☺

1. Compete the desktop website views for the following pages. We’ll work on the mobile/app versions later in the course. Remember you’re designing for Katherine!
   1. Homepage
   2. Category Page e.g. Living Room
   3. Product Page e.g. 3 Seater Sofa
2. Make sure you include all the features from the brief (Exercise Files > Class Project > Brief - Maynooth Furniture.pdf).
   1. Note: If there is anything in the list that you don’t understand the meaning of just ignore it and move on. Normally you would get clarification from the client but it’s likely I can’t get back to you quickly enough and you’ll be held up by me.
3. Use at least one instance of the following tools/techniques in your design.
   1. InDesign
      1. Create at least one object/graphic in InDesign and bring this into your XD mockup.
   2. Unsplash
      1. Download at least 1 image to use in your design from Unsplash.
      2. Add the image to CC Library via Photoshop or Illustrator or InDesign and find visually similar images.
         1. It’s up to you if use the watermarked Adobe Stock image in your design but make sure you screen shot your results in the CC Library and share with your own homework.
   3. Photoshop
      1. Open one of your Unsplash images in Photoshop.
      2. Add it to your CC Library.
      3. Then add this to your XD Mockup.
      4. Then open the CC Library item (not the original)
      5. Remember, to open the CC Library item from with in XD you need to open the library: File > Open CC Libraries and right click it and choose ‘edit ‘.
      6. Adjust the image in Photoshop
         1. E.g. Masking, Level/Curves, Filters, Content Aware Scale – Anything.
      7. vii.Save & close the updated image and see it update in XD… eventually.
   4. Mask at least one image.
   5. Adjust the blur or darkness of at least one image.
      1. Maybe as a background image like we did for the FAQ page.
4. Screenshot the 3 page from your mockup and share.
   1. Assignments section of this website
   2. Add to comments of the page.
   3. Social media & tag Dan
      1. Instagram: @bringyourownlaptop
      2. Twitter: @danlovesadobe
      3. Facebook group here.
   4. All of the above ☺ 

Class project 10 - Mobile APP/Website

The client has asked for a APP version of their e-commerce site.

1. Create mobile versions of the 3 pages you’ve created for the desktop view of the website .
   1. Homepage
   2. Category Page e.g. Living Room
   3. Product Page e.g. 3 Seater Sofa
2. Because this is an app I want you to create a login & signup page.
3. Don’t worry about Prototyping at this stage. We’ll look at mobile specific prototyping in upcoming videos.
4. Screenshot the mobile version of your mockup and share.
   1. Assignments section of this website
   2. Add to comments of the page.
   3. Social media & tag Dan
      1. Instagram: @bringyourownlaptop
      2. Twitter: @danlovesadobe
      3. Facebook group here.
   4. All of the above ☺ 

Class Project 11 – Micro Interactions

1. With your Maynooth Furniture project, create at least 3 examples  of your micro interactions. You can use any of the techniques learnt in the course so far or to create your own.
2. Record yourself testing the animations.
3. Create an animated GIF version of your prototype
   1. You can use Adobe Media Encoder or https://ezgif.com/video-to-gif
4. Share your animated GIF:
   1. Assignments section of this website
   2. Add to comments of the page.
   3. Social media & tag Dan
      1. Instagram: @bringyourownlaptop
      2. Twitter: @danlovesadobe
      3. Facebook group here.
   4. All of the above ☺ 

Class Project 12 – User testing

1. I want everyone to do a moderated test. This is done in-person. Make notes & changes based on their feedback.
2. Sign up for a trial account with usertesting.com and have your Maynooth design tested.
3. In this exercise I want you to share you experience with everyone rather than screenshots or prototypes. Tell us how it went. What you learnt. What you’d do differently next time. Ask questions.

Class Project 13 – Roar Cycles

This is a big one. This can be as big or small as you want to take it. It would be a perfect project for your portfolio. Use all the skills you’ve learnt in the course to build a Website &/or Mobile App for Roar Cycles.

1. Review the brief & persona for the client: Roar Bikes.
   1. Exercise Files > Class Projects 2 > Brief - Roar Bikes.pdf
   2. Exercise Files > Class Projects 2 > Persona - Roar Bikes.pdf
2. Logo is available in Exercise Files > Class Project 2 > Logo
3. You’ll need to create Wireframes & Hi Fidelity Prototypes.
4. Fonts, colours & images are all up to you.
5. Have your HiFi Prototypes tested.
6. Create and share:
   1. Flats
      1. Screenshots of both your wireframes & hifi versions.
   2. Public Links to your Hifi examples.
   3. In situ mockups
      1. Examples of your work in place being used.
      2. Like the versions we made with smart objects in Photoshop using the ‘Adobe Market > For Placement’ graphics.
   4. Micro interactions x3
      1. I’d like you to animate any of your micro interactions or artboard transitions & share via MP4 or Animated Gif
      2. Extra points: After Effects or Proto Pie examples. 
7. Share your work in either or all of these:
   1. Assignments section of this website
   2. Add to comments of the page.
   3. Social media & tag Dan
      1. Instagram: @bringyourownlaptop
      2. Twitter: @danlovesadobe
      3. Facebook group here.

All of the above ☺