designer-friendly webdesign

24×120 minute-long lessons.

Original price: £ 2160

 

Special Lockdown PriceS

 

INDIVIDUALS: 10% OFF

(paid in 6 installments)

£ 324×6

duos: 50% OFF

(paid in 6 installments)

£ 180×6 /student

trios: 66% OFF

(paid in 6 installments)

£ 120×6 /student

What is this module about?

Webdesign (including User Interface and User Experience Design) is one of the most sought after dynamically evolving specialisations a graphic designer can do today. In this module, you will learn how to create a responsive website with Bootstrap, prototyping with Adobe XD, and designing and testing user interface and experience.

Important: this is not a webdeveloper course.

What are the requirements for this module?

Completion of the General Studies (or demonstrable knowledge) is required for this module. No coding knowledge is required. You will need access to Adobe Creative Cloud, and a computer that can run it. A smartphone or tablet connected to the computer via USB is required in order to test prototypes created in Adobe XD on mobile devices.

Whom is it recommended for?

These skills became fundamental for every graphic designer in the past few years, therefore this module is highly recommended for all who completed the General Studies.

Software we use

thematics

New Horizons

Machinations originating from the devil: liquid layout, responsive design, RGB, SVG, HiDPI, and other needful little blasphemies.

 

project “himalaya 2”—step one

Collecting and organising contect for a single page product website. Creating SVG assets and optimising bitmaps for HiDPI screens.

User Interface & User Experience Theory

The principles of logical navigation, clear information supply, and the customs of handling websites from the point of view of ordinary people.

Typography for Screens

Making friends with cascading style sheets and the handling of web fonts. Unlearning printed page thinking.

Layouting for Screens

Introducing Dreamweaver and Bootstrap. The layout grid. Styles in CSS. Adding navigation. Rows and columns.

 

project “himalaya 2”—step two

Creating the website layout in Dreamweaver using Bootstrap.

Working with Content

Adding images, text, cards, and a carousel. Footer structuring.

Testing

What and how to test for compatibility, resolution and usage.

 

project “himalaya 2”—final step

Completing, testing and bugfixing the single page website.

Wireframing

Wireframing methods in Illustrator and Photoshop.

Prototyping

Introducing Adobe XD. Designing a multi-page website. Using blur and shadow effects. Using UI Kits. The Repeat Grid.

 

project “shoemaker”

Sketching, designing, and prototyping a complex website.

Interactions

Creating and showcasing ineractions. Testing on mobile devices. Sharing a prototype. Exporting artboards and assets.