In this course, you’ll learn how to create and sell website concepts from scratch. We’ll explain how to analyze your competitors, communicate with your site’s target audience, and identify their pains. You’ll take apart the Figma interface, select fonts and styling for the project, conduct a design session, assemble a mudboard and sitemap.
As a result, you’ll create a site design, present it to a real client and add it to your portfolio. After the course you will be able to work as a freelancer, in an IT company, or in a studio. The main thing is that you will forget about website constructors forever.
You will get 25 lessons, feedback and support from lecturers, and an online meeting with a recruiter, after which you will get an interview invitation.
For whom
- swatchers
you will get the necessary base of knowledge and create website layouts in Figma, either at the agency or on a freelance basis - novice web designers
you’ll structure your knowledge and learn how to create websites on a professional level: from strategy and wiseboard to the final concept - graphic designers
You will expand your skillset, learn how to create a user-friendly product, and be able to undertake web design projects on a freelance basis
Stage 1: Getting to know the basics
There is no shame in asking – what do web designers do?
- types of sites: types, structures, functions
- Stages of work on the site and the role of a web designer at each of them
- does a webdesigner need a team?
Stage 2: Discovery (UX/CX)
Creative brief – what’s the point?
- creative brief
- review of basic google analytics metrics
- S/A: prepare questions for client briefing
Briefing
Meet with a real client. Briefing .
S/A: fill in the creative brief. Define the emotion and archetype of the brand
Looking at competitors’ chips.
- But first, let’s check out the previous lodges
- easy to find and hard to forget – looking for competitors
- Direct and indirect types of competitors
- UI-, UX-, CX-analysis: understand difficult words
- S/A: find direct competitors and analyze their sites
Customer Development – testing ideas for a future product
- looking for respondents and generating hypotheses
- choose your research type: quantitative or qualitative
- create a list of questions for the audience
- S/A: generate hypotheses and make a list of research questions
Feedback session. Analyzing competitors
Brand archetypes and emotions
- Archetype and emotion: concept, role, place in design
- 12 archetypes and types of emotions: case study
- How to define an archetype
- S/A: define an emotion and an archetype in a project
Feedback session. Testing hypotheses and research questions
Finally we get to Figma. Creating graphical objects
- it’s not hard, if you understand it – Figma’s interface
- examine basic tools
- a master class on working in Figma by the example of buttons and banners
- creation of graphical objects
- S/A: redraw the design section provided by the lecturer
How not to get lost on the site. SiteMap required
- create navigation and site architecture
- the user should not get lost – structure information, design pages
- user story – description of a feature from the user’s point of view.
- job story – circumstances under which the user buys the product
- marketing models: what, why, and to whom
- S/A: Create a sitemap for the client
Wireframes – creating a clickable prototype
tools and strategy for creating Wireframes
customizing the clickability of prototypes
Feedback session. You make a sitemap, and the lecturer gives you feedback.
S/A: draw your keyframes on the project
A design session is like at uni: you have to prepare for it
Steal like artists, adapt like web designers
a little about the main graphic technique
metaphor in design – using Mind Map
Mudboard – how to create your own and not to take someone else’s (but this is not exact)
S/A: come up with a design idea and create a mindboard based on it
Learning the basics of composition. Capturing the taste in typography.
Typography: grotesque, antiqua, typeface pairing, combination
Coloristics: color, saturation, combination and proportions
decorations
presentation creation
S/S: create two reference concepts based on an idea
Feedback Session. Piecing together ideas for mudboards
Feedback session. Looking at a reference concept
How to create a quality concept
Where to start, how to finish
Generating draft sections
Consistency of styling – simplifying the user’s life
S/A: start working on the design layout of the home page. Create drafts of the first two sections (3 versions of each)
Feedback session. Checking drafts of the concept
Website animation – add some dynamics
Readback session. Checking final drafts of the concept
User Interface (UI) Kit: creating buttons, icons, panels, and other website elements
Implementation Design. How to make your concept work with different interfaces: from desktop to mobile
Adaptive Design and Plugins for Adaptive Design
Artboard devices and sizes
Rubber and static design: should the site be stretched?
S/A: create an adaptive concept for mobile and tablet
Web designer’s career. Meeting with a guest recruiter
Creating and selling a presentation of the concept. Communication with the client: who are you a partner or a contractor?
Your stellar time – final presentation to lecturers and recruiter.