Menú

Maynooth Furniture Project 1 - 11

Hey Dan! Just started your course and I'm honestly a little nervous about submitting this but I'd love to get some feedback on what I can improve and what I can add to make it better. It's been a great experience so far, thanks for your time!

(8/8/19)

Class Project 1: Wireframe Homepage & Contact Us Page

Maynooth Furniture Project 1 - 11 - image 1 - student projectMaynooth Furniture Project 1 - 11 - image 2 - student project

 

(8/8/19)

Class Project 2: Prototyping

  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.

Thought it would be fun to work with both a page and a popup modal.

Maynooth Furniture Project 1 - 11 - image 3 - student project

 

(8/8/19)

Class Project 3: Symbols and Repeat Grids

Made a few minor adjustments to the homepage and contact artboards. 

Changes made:

Homepage
- divided "New in Store" and "Clearance" for prototyping

Contact Us Page
- added an FAQ 

Contact Us Overlay
- added a link to the FAQ

  1. Clear your assets panel from any unintentional assets.
  2. Make your navigation & footer a named symbol in your assets panel. Maynooth Furniture Project 1 - 11 - image 4 - student project
  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. Maynooth Furniture Project 1 - 11 - image 5 - student project
  5. 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.Maynooth Furniture Project 1 - 11 - image 6 - student project
  6. Prototype all the pages..Maynooth Furniture Project 1 - 11 - image 7 - student projectMaynooth Furniture Project 1 - 11 - image 8 - student project

(8/8/19) 

Class Project 4: 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. 
    https://xd.adobe.com/view/6d747de7-0454-4a46-42b2-e6c379df7044-1b45/
  3. Record yourself doing a basic demo. 
    *I don't own a working mic so I'll get on this when I can get my hands on one

(8/8/19)

Class Project 5: 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.
    *I decided to use pinterest instead because I'm more familiar with it
  3. Take a screenshot of your moodboard.Maynooth Furniture Project 1 - 11 - image 9 - student projectMaynooth Furniture Project 1 - 11 - image 10 - student projectMaynooth Furniture Project 1 - 11 - image 11 - student project

(10/8/19)

Class Project 7: Text & Buttons

  1. Create your text stack.
  2. Add to your Character Styles.Maynooth Furniture Project 1 - 11 - image 12 - student project
  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. 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. g. Start Shopping, Buy Now, More Details.Maynooth Furniture Project 1 - 11 - image 13 - student project

 (10/8/19)

Class project 8: 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.
      *I created a heart icon that I plan to use for the product page. For now it's sitting in the Top Nav
  2. Add to your Maynooth Furniture Mockup.
    *Tried out a few things and ended up liking them so I thought I'd save it like thisMaynooth Furniture Project 1 - 11 - image 14 - student project

(10/8/19)

Class project 9: Full Hi Def mockup

  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. HomepageMaynooth Furniture Project 1 - 11 - image 15 - student project
    2. Category Page e.g. Living RoomMaynooth Furniture Project 1 - 11 - image 16 - student project
    3. Product Page e.g. 3 Seater SofaMaynooth Furniture Project 1 - 11 - image 17 - student project
  2. Make sure you include all the features from the brief (Exercise Files > Class Project > Brief - Maynooth Furniture.pdf).
  3. Use at least one instance of the following tools/techniques in your design.
    1. InDesign
    2. Unsplash
      1. Download at least 1 image to use in your design from Unsplash.
        *I do not own Photoshop, Illustrator or InDesign at the moment so I won't be able to complete the 2nd task for 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
  • Then add this to your XD Mockup.
  1. Mask at least one image.
  2. Adjust the blur or darkness of at least one image.
    1. Maybe as a background image like we did for the FAQ page.
      *Done for the Hero Image

 (11/8/19)

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 .
    *I added a bottom bar and fixed it into position, it works fine in the preview but it looks a little weird as it is 
    1. HomepageMaynooth Furniture Project 1 - 11 - image 18 - student project
    2. Category Page e.g. Living RoomMaynooth Furniture Project 1 - 11 - image 19 - student project
    3. Product Page e.g. 3 Seater SofaMaynooth Furniture Project 1 - 11 - image 20 - student project
  2. Because this is an app I want you to create a login & signup page.Maynooth Furniture Project 1 - 11 - image 21 - student projectMaynooth Furniture Project 1 - 11 - image 22 - student project

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

(12/8/19)

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 prototypeMaynooth Furniture Project 1 - 11 - image 23 - student projectMaynooth Furniture Project 1 - 11 - image 24 - student projectMaynooth Furniture Project 1 - 11 - image 25 - student projectMaynooth Furniture Project 1 - 11 - image 26 - student project