home search Contact
Lmarsden is a non-profit information site

Week 05: Webpage Design and Development

Class Task and Information

  • Lesson 01:
    • Students are to submit their solutions to the JavaScript task (Tip Calculator). Submit your screen-shot of the page and a compressed version of the task in myFlinders.

      • Introduction To Adobe XD - Developing Low and High Fidelity Application Designs

      • Task 01:
        • Students are to log onto Self Service and download Adobe XD

      • Learning objective 01: File naming conventions
        • Files should be named consistently
        • File names should be short but descriptive (<25 characters)
        • Avoid special characters or spaces in a file name
        • Use capitals and underscores instead of periods or spaces or slashes
        • Use date format YYYYMMDD
        • Include a version number

        • examples:
          • 20200101AdobeXD01 (year, month, day, file name, version number)
          • T01W01L01AdobeXD_T02 (Term 01, Week 01, Lesson 01, file name, task number)
          • fileName_date_version
          • File_name_Version
          • Subject_Assignment_version

        • Remember to be consistent and ordered in your file naming conventions.

      • Task 02: Introduction to Adobe XD tutorial and orientation.

        • Video Tutorial Files -= What to Do =-
          • You will need to view the video file and stop it along the way so you can implement, do what the video files shows you.

          • Remember: Information Action = KNOWLEDGE

          • Remember to save your work as you go. Use versioning to name your progressing saves.

          • Tutorial 01: What is UI vs UX - User Interface vs User Experience 2:08

          • Tutorial 02: Why Adobe XD (eXperience Design) 5:39
            • Moving from Photoshop and Sketch
            • The Adobe Eco-System
            • Multi-platform software
            • Built for UI/UX design
            • Interactive Prototype

          • Tutorial 03: Adobe XD interface overview 12:49
            • Apple Menu Bar
            • Top Horizontal panel (Design and Prototype mode, Zoom Drop Down Menu, Device Preview Feature, Desktop Preview)
            • Toolbar (Select Tool, Square, ellipse, line, text tool, art board tool etc)
            • Right screen panel

          • Tutorial 04: Adobe XD Short-cuts 6:37

          • Students are to view and review the tutorials and apply the skills/tools in a creative way to create a basic web page layout.

  • Lesson 02: Visual Hierarchy

      • Research and establishing the parameters of a design

    11 Visual Hierarchy Design Principles - Learn How to Improve and Create Beautiful Graphic Designs

      • Using the Internet collect a series of URL's for food service industries. ( You are to collect 10 of different styles and genre). This will help you draw comparisons and inspiration.

      • Select 3 web sites and annotate their layouts and design features.
        • Fonts, Font Size, Font Style.
        • Object selections - Images Vs Graphics
        • Ratio of objects (text and graphics).
        • Colour schemes - Primary, Secondary, Contrast Colours.
        • Low Fidelity wire frames of layout features.

      • In a summary explain what you like about the features and how they communicate to you in relation to the visual hierarchy.
        • Size
        • Colour
        • Contrast
        • Alignment
        • Repetition
        • Proximity
        • Density and whitespace
        • Style and texture

  • Lesson 03:
    • Video Tutorial Files -= What to Do =-
      • You will need to view the video file and stop it along the way so you can implement, do what the video files shows you.

      • Remember: Information Action = KNOWLEDGE

      • Take physical notes on the following tutorials in your programming book.

      • Tutorial 01: Colour Theory for Websites - Hue, Tint, Shade and Tone 5:21
        • Students are to take notes on the Primary, Secondary, Tertiary colours, Tit, Shade and Tone.
        • Concepts from this tutorial will be used in the task for this lesson.

      • Tutorial 02: Colour Psychology2:49
        • Take physical notes of the psychology of colour - links between colour and design

      • Tutorial 03: Colour Meanings 3:32
        • Take physical notes of the meaning of colours and their emotional connections.

      • Tutorial 04: Colour Combinations 5:55
        • Take physical notes of the types of colour combinations - use Adobe Colour CC Wheel to practice making pallet sets.

    • Task 1:
      • Students are to create a colour board for one of the following possible application designs.
          1. Weather Application
          2. Movie Cinema
          3. Netball Team
          4. Restaurant
          5. Music Band
          6. Animal Protection

    • Task 02:
      • Create the following Low Fidelity Landing Page

    • Place a screen shot of your Adobe XD colour board in myFlinders.

  • Lesson 04:
    • Task 01:
      • Students are to select one of the following business and generate a persona profile of the client or end user:
        • 99 Bikes
        • Apple Store
        • Bunnings
        • Ben and jerry's ice cream
        • Officeworks

    • Task 02:
      • Develop a Art Board / Story Board for a video player

      • Submit your Adobe XD file via myFlinders before the start of the next lesson.

Readings / Homework
  • Students are to complete and submit all required evidence via myFlinders.





Focus Point