Web Design Course

Module 1 offers an overview of what role an understanding of graphic design plays in web, UI and UX design. Students will examine the fundamental principles and philosophies of graphic design from the new perspective of working within the constraints of designing for the internet. Module 1 will coalesce these skills together to bring students to the point of laying out an online feature article.

Definition: A definition of web design and it’s associated and specialised industries.

History: The history of digital communication from Blaise Pascal’s numerical proof for the calculator To Modern times. Major milestones are marked with defining moments from that year, decade or era.

Roles: Explanation of the various specialities and roles within the field of web design and development. An understanding of the skill sets involved in these roles.

• Understanding of the principles of user-centred design and its application in web design.
• Understanding of the principles of information design.
• Understanding of the principles of interface design.
• Advanced understanding of the principles of graphic design for the screen environment.
• Understanding of the role of markup languages for web design and what they do.
• Ability to plan and design a multi-page website project.

Module 2 explores the use of images, multimedia and web-unique elements in website design. In this module students will critically analyse the use of these web design elements, accounting both for their effectiveness in the design and also their performance on the site. Module 2 will also begin to foster students’ understanding of the role of wireframe prototypes in a webpage’s design and how to implement a grid system over a page.

Vocabulary: Learn many of the most common filetypes and documents encountered online both as a user and designer.

Elements: Look into the most commonly utalised web design elements and how they function to contribute to or detract from a greater website’s design.

Hierarchy: Explanation Of the purpose and use of hierarchy in page layout design to make user readable and understandable interfaces.

Grid Systems: Introduction to grid systems in website design. Students will look at applying grid layouts to a page in order to size, shape and position their web elements.

• Define resolution and identify standards for print and for screen.
• Understand image file formats and compression for use on the web.
• Compare and understand different image techniques used in web design.
• Identify grid systems and how they are utilised.
• Understand how grid systems are used in planning and developing an interface design.
• Improving interface design with learnt skills.

Module 3 builds a familiarity and experience with working and designing for a fully scoped website. Students will expand upon their knowledge of single page hierarchies and design systems and translate into multi-page and multi-level website structures.

Information Architecture: The categorical or structural description of a website, looking at how the user will journey through the site and how to give a consistent, layout to multi-level sites.

Taxonomy: The descriptive terminology used to label items, pages, or products in an online shop, blog or portfolio.

Target User Analysis: How to define the key demographics and descriptors for user groups high value and vital user groups to the site. Analysis looks at the intent, digital literacy and conversion efficacy of these groups.

Responsive: Introduction To designing to differing screen and interface devices.

• An understanding of the role Information Architecture plays in mapping out a website’s design.
• Apply procedures to create target audience demographics and design for their needs.
• Understand how to shape designs around the limitations and constraints of current day interfaces and accessibility requirements.
• Simultaneously work their designs to both desktop and mobile users, whilst still making effective considerations for intermediary devices.

In Module 4 students will begin to work on their Main Web Design Project for their work in the Web Design Course. Students will be allowed to choose their website design client from a list of supplied clients, create a site for their own design work or choose a real world client of their own.

Design Brief: The aspects of written analysis looked at in each of the earlier modules will now be applied to the student’s chosen project.

MVP: The Minimum Viable Product is the minimum level of design necessary in order to demonstrate how the site will look and feel to the client.

Specifications Document: Students completing each assessment in this module will consider each aspect of the design process, including product research and scheduling.

• Students will work to create a full and professional level design brief for a newly created (or completely redesigned) website.
• This design brief will include the research and presentation requirements for the specification documents included in a professional website design project.
• Additionally, with their work in this design brief, student’s will learn the proper presentation of visual web elements in a printable or digital document.
• Lastly, students will workshop a single webpage design from written User Interface description to a fully rendered mockup in, presented in Adobe Xd.

Module 5 simulates the design process after the review of the Minimum Viable Product. Students will be tasked with incorporating client feedback into their design and then extending that design from a one page render to a full prototype.

Prototype: Create an Adobe Xd prototype of the site. This includes all unique pages, structured with correct hierarchy and hyperlinking.

User Interface: How to approach User Interface (UI) design when working with desktop and mobile devices. Students will look at rules and guidelines to make sure their work is always accessible.

User Experience: Students will be taught the sciences of User Experience (UX) design

• Students will extend a single page render in Adobe Xd into a fully interactive prototype of a website, with both mobile and desktop layouts.
• In making their Adobe Xd prototype interactive, students will gain hands-on experience in hyperlinking pages in a website according to the guidelines of Information Architecture Design.
• Having applied feedback and tutor suggestions from the previous module, students will use Adobe Xd Components to adapt their designs globally whilst always taking into account the guidelines of UI and UX design.
• Students will critically analyse a website 's design, specifically evaluating the effectiveness of their Information Architecture, user navigation features, layout and device responsivity, accessibility and the presentation of it’s visual design.

Module 6 students take their finished website prototypes and deploy them to the internet using their own chosen publishing platform. Students will develop an understanding and competency with major world-wide publishing platforms, from there they will choose one platform and build their entire website’s design.

Publishing Platforms: An online service that web designers can utilise in order to deploy their designed sites live to the internet. Squarespace, WordPress, Shopify and Wix are all covered in this course.

Deploy: The process of converting a designed Adobe Xd prototype into a working, functioning and interactive website.

Domain Name: The process of creating, configuring and deploying a domain name live. Additionally looking at the colloquial expectations of different domain names and how to pick one that is best for the intent of your site.

• Back in Module 4, students were asked to choose their Main Website Design Project. This was a choice of; a personal portfolio, a website for a client, or an example project suggested in the course. In Module 6, Students will take this site online using their choice of Publishing Platform,
• Familiarity and competence with major publishing platform tools, including the pros and cons of each system, as well as understanding how to use their interface.
• Students will analyse and reflect on both the less and more successful aspects of their Adobe Xd design in a live, deployed website.