FALSE Urban Designer Clothing is a site to promote a new high-end clothing brand called 'FALSE' which will be launching its first clothing range during Paris Fashion Week 2022. Users will find out when the event is taking place and be encouraged to sign up for 'exclusive access' to a live-stream event.

The site is targeted towards upper middle class / upper class men and women aged 20-40 years old. The demographic have a passion for, and invest in, high-end fashion. They demand modern, fresh and exciting clothing.

The sites design is all geared around the companies need to be dynamic and stand out.

The brief in short: Engage. Intrigue. Inform. Use Red.

The design layout aims to challenge conventions. We reference minamilist / abstract art and use negative space to give a simple and uncomplicated, but impacting result.

• Navigation
  • Designed to be fixed to the top of the screen for easy access.
  • User feedback through text and background colour change on hover.
  • To retain a good design the space between menu items change in response to the screen width.
  • On mobile devices the menu items are centered and the logo removed to retain minimalist feel.
  • Simple design so as not to distract.

• Home
  • Instant impact is gained by presenting the user with large blocks of colour.
  • Designed for the white box to be off-center on larger screens and centered on mobile devices.
  • White container goes off the bottom of the screen to encourage the user to explore and ask "What comes next?".
  • Minimal text and clean design to stand out against other design companies.
  • Images are not used as this is a pre-release website. The company wants to promote the feelings of 'mystery' and 'what's coming?'.

• Home text
  • Clear company message.
  • Text zooms and changes colour on mouse over.

• Tree transition
  • This element helps draw the user down into the launch section of the website.
  • A soft transition from the vivid to the more relaxing atmosphere of the white background.

• Launch Section
  • The white background helps users to relax and take in the information.
  • The font of Paris Fashion Week gives the message of quality and status. The text enhances the feeling that this is a prestigious event and something to be part of.
  • As the only black text on the screen, the user is drawn to the date and location. This is the most important information on the screen.
  • The use of no imagery is intentional, as it keeps the user neutral. We do not want them to judge if they like or dislike the brand until they see the launch event.
  • The video will only run when the user clicks play. The video is 40 seconds long, as we do not want to distract them away from the site.

• Sign Up Section
  • The site switches back to dynamic minimalist design to stimulate the user and encourage action to be taken.
  • The user to taken back to the emotion felt on the home page.
  • The message is simple and clear.
  • It is important to not 'over sell', as this is not liked by the target demographic.
  • The design is fluid. An example of this are the white boxes containing the input elements. These stretch as the screen width increases to maintain the design aesthetic.
  • The submit button features the word 'join' as it is softer and more playful than 'submit'.
  • User engagement is enhanced through a mouse-over colour change on the submit button.
  • To maintain the design on mobile devices the elements re-oder and the triangle graphic is hidden.

• About Us
  • The White background makes the text easy to read.
  • A Soft type font makes for a friendly feel.
  • To help retain the user the page uses negative space. This is enhanced via minumal text and placing the main image un-aligned. The 2022 collection logo frames the page and helps enforce the design concept.
  • Flexible margins are used to retain the design over various screen sizes.
  • On mobile devices the elements re-order and stack.

• Retailers
  • This section of the site promotes the retailers who will be re-selling the clothes.
  • A red background serves as a call-to-action to the user. Users are softly encouraged to visit the retailers.
  • A red rose brings warm and emotion to the page.
  • The feeling of space is created via the spacing between the pages elements. The left margin frames the design and the rose floats to the right.
  • User interaction can be found with a mouse over color change on the 'visit website' link under each retailer
  • On mobile devices the elements re-order, stack and center.

• Social Media
  • The social media icons encourage engagement through mouse-over color change.
  • They sit in the footer of the site so as not to distract from the site's current goals.

Extensive testing has been carried out to ensure that the site functions as intended. A single scroll page design was utilized to make navigating the site intuitive, and navigation is present for users who wish to go directly to a specific section of the site.

The site layout of landing page > Launch information > sign up > retailers creates a natural flow for the user. An average user will want to see this information and in this order.

Color is used to stimulate the user, this to create feelings of anticipation and challenge the normal perceptions of 'what a website should look like'. This is intentional, as the company wants to show potential customers that they are not afraid to break the rules, that they are about to launch a clothing range that is something new and something exciting. Fashion and art is all about stimulation. Presenting challenges and emotions for the viewer. This website needed to do this, but in a way that did not leave the user feeling stranded or lost. Splitting the website into sections and alternating white and red backgrounds keeps the user engaged and supports their journey through the website.

Soft feeling fonts are used across the website to act as a friendly voice against the dynamic design and color. The event information on the landing page is the only place where more impactive font is used, so as to be direct clear and not ignored.

The site functions well on mobile and desktop devices. Four different screen widths were used to ensure the site looks good on all platforms. On mobile devices, color and horizontal space are the main elements used to create an impactful site, whereas for the larger screens, imaginative placements of text and images enhance the sites message.

The scaling of the site was very challenging. I extensively explored the various measurement units that could be used to control scaling (such: as px,vw,rem) and strived to use them to support my design goals for the site.

I created my wireframes using Adobe XD. Trying to translate those wireframes into reality proved challenging, as in many sections of the site the elements move as the screen size enlarges and then the elements re-order when they are scaled down to mobile devices. Flex helped me to create the desired effect.

Padding and margins are extremely useful! When I started the project, I was still a little unsure about how and when to use them. As the building progressed, and my understanding grew, I could see that my code was getting cleaner and my solutions were getting simpler.

I grew to rely heavily on Google Inspect. The ability to identify elements, edit live and quickly identify specific code lines created a productive work flow.

The site is tested on Google Inspect using the various mobile phone emulations, and I used a MacBook Pro (2017) with a large external monitor for testing the large scaling of the site. The site has been tested on Google Chrome, Safari and Brave.

There were various small bugs and fixes along the way, which are documented in the GitHub commit history.

• HTML
  • No errors were returned when passing through the official W3C validator
• CSS
  • No errors were found when passing through the official (Jigsaw) validator
• Lighthouse
  • The site scored very well.

No unfixed bugs

• The site was deployed to GitHub page using the following steps:
  • From the GitHub repository, select the Setting tab.
  • From the left hand menu select Pages.
  • Click on Branch and select main and then save.

Here is a live link to the site FALSE Urban Designer Clothing

This project contains no external code. All the code in this project was written by myself. I used tutorials or forums to help me understand specific parts of code to solve design or functional challenges.

• Font are from Adobe Fonts and Google Fonts
• Information was taken from Paris Fashion Week
• To refresh HTML Semantics I read developer.mozilla.com
• For font size guidelines I referenced smashing magazine
• Tutorial on embedding video was from w3schools
• Various image tutorials were: object fit, image cropping
• The icons in the footer were taken from Font Awsome
• Information on measure units
• Reference for create centered menu
• Reference for Html Forms
• Reference for Flex box ccs-tricks and css-tricks
• For smooth scroll I referenced gomakethings.com
• Reference for screen sizes was from browserstack
• Reference for hidding text or elements was from moz.com

• Images on the site are from iStock by Getty Image
• Music in the video was made by and used with the permission of Dark Arts Club
• The video was made using Adobe Premiere Pro
• Sound was edited using Logic Pro X
• Images were edited using Adobe Photoshop
• Wireframes were created using Adobe XD
• Tree transition image was an image I modified from Poster Poster and created by Diego Machado