Ikea Aftonsparv
Design of a website about an Ikea product, from the moodboard to the design on Figma and the implementation on WordPress
Ikea Aftonsparv
Design of a website about an Ikea product, from the moodboard to the design on Figma and the implementation on WordPress
Ikea Aftonsparv
Design of a website about an Ikea product, from the moodboard to the design on Figma and the implementation on WordPress
Ikea Aftonsparv
Design of a website about an Ikea product, from the moodboard to the design on Figma and the implementation on WordPress
MY ROLE
UI designer, Web designer, Web developer (basic HTML and CSS)
TOOLS
PROJECT TYPE
University project | Technologies and People on the Web
YEAR
2023-2024
MY ROLE
UI designer, Web designer, Web developer (basic HTML and CSS)
TOOLS
PROJECT TYPE
University project | Technologies and People on the Web
YEAR
2023-2024
MY ROLE
UI designer, Web designer, Web developer (basic HTML and CSS)
TOOLS
PROJECT TYPE
University project | Technologies and People on the Web
YEAR
2023-2024
MY ROLE
UI designer, Web designer, Web developer (basic HTML and CSS)
TOOLS
PROJECT TYPE
University project | Technologies and People on the Web
YEAR
2023-2024
Brief
Building a website about any product sold by Ikea to present a special offer, using WordPress.
Solution
Our website, developed after sketches, wireframes and mockups, presents the AFTONSPARV rocket, from the homonymous Ikea collection.
Brief
Building a website about any product sold by Ikea to present a special offer, using WordPress.
Solution
Our website, developed after sketches, wireframes and mockups, presents the AFTONSPARV rocket, from the homonymous Ikea collection.
Brief
Building a website about any product sold by Ikea to present a special offer, using WordPress.
Solution
Our website, developed after sketches, wireframes and mockups, presents the AFTONSPARV rocket, from the homonymous Ikea collection.
#
1
|
Moodboard
Looking for an accessible visual solution
The project is based on the rocket colours, which were chosen respecting accessibility and contrast, to pursue the philosophy of universal design.
The primary and secondary colours are the product ones, which means red and blue, accompanied by white and gray of the same product.
#
1
|
Moodboard
Looking for an accessible visual solution
The project is based on the rocket colours, which were chosen respecting accessibility and contrast, to pursue the philosophy of universal design.
The primary and secondary colours are the product ones, which means red and blue, accompanied by white and gray of the same product.
#
1
|
Moodboard
Looking for an accessible visual solution
The project is based on the rocket colours, which were chosen respecting accessibility and contrast, to pursue the philosophy of universal design.
The primary and secondary colours are the product ones, which means red and blue, accompanied by white and gray of the same product.
#
2
|
User Personas
Keeping users in mind
User personas Maurizio, Caterina, and Carlotta guided us through the process.
Instead of a generic user, the design was based on 3 realistic profiles of typical users, both for the design and for identifying keywords (in a SEO perspective as well).
#
2
|
User Personas
Keeping users in mind
User personas Maurizio, Caterina, and Carlotta guided us through the process.
Instead of a generic user, the design was based on 3 realistic profiles of typical users, both for the design and for identifying keywords (in a SEO perspective as well).
#
2
|
User Personas
Keeping users in mind
User personas Maurizio, Caterina, and Carlotta guided us through the process.
Instead of a generic user, the design was based on 3 realistic profiles of typical users, both for the design and for identifying keywords (in a SEO perspective as well).
#
3
|
Design
A mobile first approach
The website was conceived through sketches on paper and then translated into wireframes. Finally, into mockups on Figma.
When creating the representations of desktop, tablet and mobile attention has always been paid to responsive design, so that the content of the website adapted to the form factor of the user’s device.
#
3
|
Design
A mobile first approach
The website was conceived through sketches on paper and then translated into wireframes. Finally, into mockups on Figma.
When creating the representations of desktop, tablet and mobile attention has always been paid to responsive design, so that the content of the website adapted to the form factor of the user’s device.
#
3
|
Design
A mobile first approach
The website was conceived through sketches on paper and then translated into wireframes. Finally, into mockups on Figma.
When creating the representations of desktop, tablet and mobile attention has always been paid to responsive design, so that the content of the website adapted to the form factor of the user’s device.
#
4
|
Psychology principles
Accomodating users' perception rules
When developing the general structure of the website, Gestalt laws were used in the design of the UI.
Some principles of social psychology, such as social influence theories and the persuasive principles of Cialdini, were used in the copywriting phase.
#
4
|
Psychology principles
Accomodating users' perception rules
When developing the general structure of the website, Gestalt laws were used in the design of the UI.
Some principles of social psychology, such as social influence theories and the persuasive principles of Cialdini, were used in the copywriting phase.
#
4
|
Psychology principles
Accomodating users' perception rules
When developing the general structure of the website, Gestalt laws were used in the design of the UI.
Some principles of social psychology, such as social influence theories and Cialdini's persuasive principles, were used in the copywriting phase.
#
5
|
Development: WordPress
Using media queries for responsive design
From the mockups, the website was developed using the popular CMS WordPress, using HTML and CSS to make the needed changes to the Jadro WP theme.
Media queries CSS feature was used extensively, in order to create custom layouts of some elements of the UI based on the screen size.
#
5
|
Development: WordPress
Using media queries for responsive design
From the mockups, the website was developed using the popular CMS WordPress, using HTML and CSS to make the needed changes to the Jadro WP theme.
Media queries CSS feature was used extensively, in order to create custom layouts of some elements of the UI based on the screen size.
#
5
|
Development: WordPress
Using media queries for responsive design
From the mockups, the website was developed using the popular CMS WordPress, using HTML and CSS to make the needed changes to the Jadro WP theme.
Media queries CSS feature was used extensively, in order to create custom layouts of some elements of the UI based on the screen size.
Try the prototype
Enough talking, now it's up to your exploration!
Try the prototype
Try the prototype
Try the prototype
Enough talking, now it's up to your exploration!
Try the prototype
Try the prototype
Try the prototype
Enough talking, now it's up to your exploration!
Try the prototype
Try the prototype
Try the prototype
Other projects you might be interested in
Framer template designed by Goran Babarogic, customized by me
Framer template designed by Goran Babarogic, customized by me