This module will introduce learners to good practice in web and app development by immersing them in concepts such as User Interface, User Experience and Usability. Through this module learners will acquire the skills to design and structure UI, create wireframes and vector graphics and produce digital content for embedding in applications and websites that makes user interactions easy and straightforward. The module also familiarises students with a number of design tools, techniques and mark-up languages that are used in web and app development.
This module will ensure learners meet the following objectives:
- Comprehend the relationship between the concepts of User Interface and User Experience.
- Design and implement functional static and animated graphics and User Interfaces for web and applications.
- Understand the benefits of Usability and how the ease of access and/or use of a product or website can add to the overall User Experience.
- Have a practical understanding of various industry-accepted tools used in UI/UX.
- Implement web design using standard web technologies such as HTML and CSS.
- Contemporary theories and standards in Interaction and Web Design
- Principles of design for Graphical User Interfaces
- Introduction to User Experience Design
- Introduction to Usability Principles
- Identify target audience types and their requirements
- Designing for access and compatibility
UI Design - Working with Wireframes & Vector Images
- Basic principles of vector images – how do they work? What are they used for?
- Creating and saving vector images, drawing and editing shapes, colours, and strokes
- Working with layers, type, gradients, brushes, symbols, and effects
- Arranging objects and layers, grouping items, working with artboard, guides, rulers etc.
- Editing and combining shapes and paths
- Introduction to the pen tool
- Importing and exporting assets
Introduction to Web Page Authoring
- Writing and saving files for web
- How to structure a HTML page - Semantic and non-semantic tags, creating Text blocks, Lists, Tables, Links, and Images etc.
- HTML syntax – tags, attributes, and values
- Meta-data and link structure in HTML
- CSS syntax – selectors, declarations, properties, and values
- Format and Style in CSS- using id and class, working with margins, padding, alignment, floating, positioning etc.
- CSS Animation and media queries for dynamic and responsive design
Sourcing, Editing and Embedding Media Assets
- Basic principles of modern Irish/European Copyright Law – How to assess or assert the copyright status of a media asset
- Sourcing public domain assets online
- Editing media and optimising for web publication
- Embedding media assets in a responsive website
- Understanding web-safe fonts
Web and App Animation
- Core principles of animation – timing, anticipation, squash and stretch, ease in/ease out, overlapping action, follow through, staging/framing, arcs, straight ahead and pose-to-pose, secondary action, solid drawing, appeal
- Working with key-frames
- Using curve editor to adjust timing
- Importing 2D assets
- Creating bone-based animation – setting pivot points, grouping and arranging
- sprites, setting sorting layers
- Animating effects
- Controlling animation via scripting