ARXFans | Responsive Website
![Image of a tablet on a kitchen wall.](../../assets/case-studies/landingpage/presentation.jpg)
Summary
This is the ARXFans app landing website where I worked as a designer and front-end developer.
Product type: Website
View live product at arxfans.com
Table of Contents
About the product
About:
This website is an invitation for fans around the world to download the ARXFans app to support and celebrate their national football team.
The User:
Fans around the world who would like to learn more about the ARXFans app to support their national football team.
The Goal:
The goal for this website is to inform users where to download the app, device compatibility, what they can do with the app, and learn more about the privacy policy which is required by the App Store.
My Role:
For this project I worked as a Designer and Front-End Web Developer. My responsibilities were working on wireframes, visual design, prototyping, and development with HTML, CSS, and JavaScript.
Design Process
![Image of green sticky notes](../../assets/case-studies/landingpage/notes.png)
Organizing information:
Before starting the design, I organized the required information and content that needs to be included in the website.
![Image of squares with text inside representing website requirements.](../../assets/case-studies/landingpage/organizing-information.png)
Paper Wireframes:
![Image of paper wireframes](../../assets/case-studies/landingpage/paper-wireframes.jpg)
Digital Wireframes:
![Image of digital wireframes](../../assets/case-studies/landingpage/explorations-wireframe.jpg)
![Image of digital wireframes](../../assets/case-studies/landingpage/responsive-wireframe.jpg)
Wireframes to hi-fi designs:
![Image of paper wireframes](../../assets/case-studies/landingpage/hifi-designs.jpg)
Final Product:
View live product at arxfans.com
Development:
Once the high fidelity design was approved by the manager, I implemented the design to code using HTML, CSS, and JavaScript.
![Blurry image using background blur to cover code of a website.](../../assets/case-studies/landingpage/code.jpg)
![Mockup of a website displaying on a mac, iPad, and iPhone.](../../assets/case-studies/landingpage/final-product-mockup.jpg)
View live product at arxfans.com
Tools used:
- Figma
- Adobe XD
- HTML
- CSS
- JavaScript
![](../../assets/icons/figma-logo.jpg)
![](../../assets/icons/xd-logo.jpg)
![](../../assets/icons/html-logo.jpg)
![](../../assets/icons/css-logo.jpg)
![](../../assets/icons/js-logo.jpg)