This is the README file for FOCUS website. You will find here a bunch of information regarding the User Experience Design, the business and users needs and the code.
Focus is a creative digital company. They product video and photo content for digital platform. They create some marketing digital strategy for their clients and finally they can take care of the media diffusion and social media management.
Focus Website is an application that gives the users a good understanding of what Focus is all about.
The user will have the opportunity to see their work through a portfolio and some images/videos galleries displayed on the website.
The users must understand what Focus is about in the first few seconds after they arrived on the website.
The main goal during the user’s visit is for they to contact the company. TO reach this goal the website is implatemented with some contact links, contant form, call-to-action buton etc.
The website have all the information the users need with a minimal design, easy to understand and easy to navigate.
The two mains goals for the users during their visit are to contact the company and also to purchase their products.
The others goals are showing the company's work, answer any question the users could have direcly on the website.
The users want to see the company's work. They also want to understand rapidly what they are doing and how they are doing it.
Users want to have as much information as possible regarding the products they want to buy and finally they want to be able to contact the company easily.
In order to achieve the businees and user's need the website have some requirements:
- portfolio
- contact form/links
- list of services
- catchy design
Focus website will be divided into 4 mains categories:
- Demonstration: The website shows the users what the company does and how it does it.
- Information: The website gives the users all the answer/information they need.
- Communication: The users can communicate with the company easily.
-
First Time Users
When the users land on the website for the first page, their eyes are catched by a good design with a strong branding. The users understand what is Focus in the first few seconds. During their first visit, the users will be able to navigate easily on the application. On the home page, the users will find information abour the company's services. Each section has a call-to-action button in order for them to get more information or to contact Focus.
-
Returning Users
The users that are coming back already know what Focus is and what Focus is doing. The main goals for the returning users is to answer all the questions they might have. The users are able to navigate on the website to collect all the information they need regarding the comapany's products/services.
I used Balsmamic to make the wireframe.
- Home page
- Services
- Portfolio
- Production
- Diffusion
- Strategy
The mains colors used on the website are dark blue and yellow. The text is white. The yellow color does not change on the website. The blue can slighty change on website from light purple to dark blue. I used a very dark grey for the body background. This are the mains colors used on the website:
- Yellow #fdad00
- Dark Grey #0e0e0e
- Dark Blue #191729
- Purple #5249ff8e
- Light Purple #6c63ff
The font used for all the paragraph is Ubuntu. For all the headings I used Poppins. For any special text I used Tajawal. Those 3 fonts are imported using google fonts.
The video header on the home page has been downloaded on Vimeo. All the svg illustrations have been downloaded on Undraw.. The clients logo have been dowloaded on google images. All the icons are from Fontawesome. Finally all the video on the Portfolio page have been downloaded on Vimeo.
The website is using the latest features in term of accessibility. I have chosen a strong contrast between the font color and the background color (white and dark blue). I have used lots of "aria" attributes on the HTML code in order for the screen readers to work with the website. Each media is using the "alt" attribute. During the development process, I have realized the importance of accessiblity and I had to change the website's layout and design couple of times (changing fonts, changing colors, layout etc.).
- HTML
- SASS/CSS
- BOOTSTRAP 5.1
In terms of features, the website uses bootstrap. The navbar stays stick on the top of the pages. Also when the user click on the contact icon/links a contact modal window opens. The last feature is on the portfolio page, when the user scroll down, the content appear using a fade transition (this feature has been written by someone else, see credits section).
When the users arrive on the home page, they are welcomed by a video header follwed by a quick presentation of the company. The next section is a spotlight of the mains services of Focus. Finally the users can see the current clients of the company. At the bottom of the page, the users are invited to contact the company.
On the services pages ("production", "strategy", "diffusion"), the users can learn more about what Focus can offer. They will learn more about each products and services.
Finally, on the portfolio page, the users can check the company's work. The portfolio page page uses a timeline display from the most recent work to oldest ones.
On each pages of the website the users have the possibility to easily to get in touch with company using a static contact icon and a contact link on the navbar.
The website is fully responsive (mobile, tablet, laptop and desktop). All external links will open in a new tab. The website has been tested on different brwoser.
Focus website has been deployed using GitHub Pages from the master branch. To check the live website click here.. You can clone the project usit "git clone" command in your terminal and pasting https://github.com/nyplex/focus.git
The styling on this project has been done using the preprocessor SASS. You download SASS here.
-
MEDIA
The video header has been downloaded on Vimeo. All the SVG illustrations are from Undraw. All the icons are from Font Awesome. All the client's logo are from Google Images. All the videos on the portfolio page are from Youtube.
-
CODE
All the HTML/CSS code has been written by me using bootstrap mainly for the responsivity of the website with the exception of two features:
- The portfolio animation (JavaScript & CSS) has been written by George Soukos. and modified by me to fit the overall design of the website.
- To make the CSS hover animation on the buttons I have used this Exemple and modified the code to fit my needs