The Mandalorian
User-Centric Frontend Development Milestone Project - Idea 1
Website is aboute The Mandalorian series done by Jon Favreau, used in a way that fits the Project Example Idea 1, as a on of three options that we have in Milestone Project 1.
This project is for educational purposes and can not be used as a template for a business use. Main goal was to build responsive website with HTML and CSS only. Use of Bootstrap framework was optional and i will not use it this time.
The Mandalorian series done by Jon Favreau, used in a way that fits the Project Example Idea 1, as a on of three options that we have in Milestone Project 1.
We all know how strong force can be, why not explore it a bit deeper on a pure html css website!
Join us on The Mandalorian journey...
Site is published at github pages
Content Tree
UX
Owner goals
Goal was to build simple but effective website with features similar the mandalorian series so it will embodies the genre of the series.
This way; by simple eye catching and intuitive/interactive form which is already well known as beginner friendly, that allows us to get closer to the rest of the audience, even to those who never heard of Mandalore before.
It also a "place" that contains/provides all information regarding Mandalore series: form stores, galleries, history, news, where to watch, soundtrack, etc.
User goals
1.New goals
- Where to Watch
- Where to Buy
- Where to Follow
- Knowing about history and ideas forme screenwriters
- How is made
- Check the All news regarding the Mandalorian series
2.Returning user goals:
- user's can always finde whats new in Mandalore world
- user's can prety mutch do the same staff listed above in New goals
User side
As a Industrial Designer
- FFA = form must follow function in every aspect of creation!
- Saying that evrything on my site it has a purpose, a goal and a task., followed by ffa rule.
- And all that for simple goal: to allow customer for simple eye catching fun and thrilling surf on Mandalore page.
- Keeping visual integrity simple but in same time effective eye catching product that will leave a smile on every customer that visits Mandalore page.
- Ensuring their imminent return
- Less is more
Green customer:
- Interested in; what new technologies did they use on set?
- Interested in; where can i buy Mandalorian helmet,and for what price?
- Interested in; artwork of Mandalorian.
- Interested in; soundtrack of Mandalorian.
- Interested in; who are all people who are working on Mandalore set.
- Interested in; any one famous?!
- Interested in; searching for inspiration for current project.
Veteran customer:
- It can be all of above, and more.
Structure of the website
FFA, so all media query are covered and the simplistic styling is detained on all platforms: desktop, tablet or mobile device. Simple but effective.
First brakpoint at: @media screen and (max-width: 1016px) = quick pick section of 5 consecutive options, they are first one witch brakes structural visual integrity of a site!
- Since my goal was to keep structural integrity of visual identity through all screen sizes
Second brakepoint and last one for my form was on (max-width: 552px) when my right side of menus are colliding with left side causing unpleasant visual disturbance.
- And since that width it so close to phone size from that point on, I decided to translates it all smartphone sizes, since it only small gap of width: 100px max
Beginner friendly, intuitive with moderate tones that do not strain the pupils further after a long stay.
Interaction interface so all buttons and links have one or two interactive effects.
Wireframes
Idea was to used website wireframe.cc to create a wireframes...if i got in time!
Surface
Colors
Main colours:
- background color: none
- font color base: #555555, rgb(255, 255, 255)
- link color base hover: rgb(255, 145, 0, 1)
- link color base: #555555
- link color base hover:rgb(255, 145, 0, 1)
- hoover color in general: rgb(255, 145, 0, 1)
Fonts
- Lato = Google Fonts Library as general
- Montserrat = Google Fonts Library
- Mandalore = Picture and Magic as maine title
- WaltDisney = Picture and Magic situational
- sans-serif as a backup!
Images
- Images from Google will be all credite in credits section.
Video
- Video in background = The Mandalorian | Season 2 Official Trailer
Features
The website contains six pages. Three are accessible from a navigation menu.
Navigation bar
Footer
-
Navigation bar and footer dock are visible on each website.
-
It is responsive and will slide under maine titile on mobile devices.
- On left side is maine title as logo and home link.
- On right side there are three links:
- Home
- Gallery
- Sign In
- On bottom we have fotter who provide 5 links:
- Each link will open in a new separate tab in a browser.
All pages
- Maine page
- As a user type, I want to achieve eye catching maine page that will set the first impression on customer
- Three "popup" providers on maine page: info/history, sell/promote, how it made
- Quick chek by picking one of three popup's that leads to a separate page only by itself providing all adiditonal info as easy dive into topics.
- Middle-bottom section consist 5 href's that lead on new page that are important to series
- Header and footer provide standard links options as home, gallery, sign in, and diferent social media platforms
- Gallery page
- Making the bond
- Images that provide a wide range of diversity covered by the series that which depicts scenes similar to those from everyday life making it easier to immerse into world of Mandalore and becoming part of it
- Making the bond
- Sign up
- Everyday Sing in followed by similar style and colors to stay consistent, with adorable baby yoda who adds another layer of pressure on you becoming next new member
- PopUp
- links in form of a three image, that are represents on new separate page:
- Info - information and history about Mandalorian sereies
- Sell - dection wher users can buy everything related to the Mando brand
- Disney official trading site of Mandalorian Artwork
- And many others...
- How it made - part where are link's with technology that producers are using in filming the majority of mandalore scenes
- but because of lack of time on project i will leave just blank page
- links in form of a three image, that are represents on new separate page:
- Middle bottom section another row of 5 href's that are more specified options:
- Disney = official Disney chanel which includes Mandalore as well
- IMDB = page as useful links to all general information about series in general for the seventh art
- who is the director, which year recorded, full cast crew list, box office, and many more
- Emmys = television academy link with Awards & Nominations related to Mandalorian series
- Soundtrack Spotify link to all The Mandalorian Original Series Soundtrack
- Season 3 = everything related to new season release of Mandalorian series
Features Left to Implement
-
I was trying so hard to push my main idea into realization by having short delay of icons(main title/home,gallery,sign in buttons, etc) that will follow the beats from video in background on loope, and be able to pefomr hover effect after the delay effect is done, plus having a options thet will indicate by different color the page you are currently on
- due to I wasted entire week trying to make that one part to work by trying from all different angels and not have success, it forces me to take simpler approach
-
among other staff, goal was to make all pages not just blank page "work in progres..", but i don't have enough time to create them all
-
idea again was simple:
- for How it Made.html goal was to make playable video intro of latest footag of mp4. format and it will take 70-80% of width and 40-60% max of hight as main attraction-so to say
- under that will go all less intrested links and stories on evrything how did developers on set decided to film this series
- Info and Sell department, for them i was having something simple in mind = like simple list of hrfef's that leads to stores/history pages
- for How it Made.html goal was to make playable video intro of latest footag of mp4. format and it will take 70-80% of width and 40-60% max of hight as main attraction-so to say
-
and there is another issue or small mistake that i will not have time to settle, and that is in "Gallery" page: on hover all img that are near to borders are being cut off after animated part is done? I'm not sure what is causing that effect!
Technologies Used
Core structure
- HTML5
Style language
- CSS
Icons
Fonts
Storage
- GitHub
Coding platform
- Gitpod
Wireframe.cc
- As a wireframing tool.
Image editor
- Photoshop
Video editor
- LosslessCut
Testing Performance editor
Visual editor
Testing
Functionality testing
- Most of the time i was doing this topic, testing, testing and a bit more testing the code and checking on inspect how will my code change trough css.
- Im using Microsoft Edge/Chrome
Compatibility testing
Site was tested across multiple virtual mobile devices and browsers. I have checked all device emulations in Chrome developer tools.
I tested on Msi laptops, Msi workstation, Custom made desktop, Galaxy s10e android 11, Redmi, Redmi Xiaomi, Redmi Note 8.
Performance testing
I use Lighthouse tool to check performance of the website. I had to do couple of changes to improve performance. Screenshots are presented below:
- although I did not have enough time to correct all the mitigating circumstances I received through the lighthouse report!
Deployment
The project was deployed on GitHub Pages. I used Gitpod as a development environment where I commited all changes to github. I used push command in Gitpod to save changes into GitHub.
-
Your site is published at https://danthestar.github.io/the-mandalorian/
Credits
Idea
- The idea of going with the Mandalorian series it purly becouze i love that series my self and that the area that im way more familiar than Musical bends or Gym, and third option: personal portfolio site (potentially for myrself) im keeping that one as last project.
- YouTube the Mandalorian link for trailer as the source of my inspiration; since the original series i watch over the stream (and there is no point of linking that)
- not to mention that it’s close to my passion regarding art as Industrial designer, form which I also find ideas in SW triology
Content
- The base for main structure in similar to structuro of Love Running from where i take mouste of structural frames
- Readme file inspirations are:
- NielMc on GitHub
- marcin-kli
Media
-
img files are seperated in 2 sections:
-
mp4 files this is the original link of Mandalorian intro that i have used
- the one that i'm using its recrop by myself = root folder source
-
all others links that i have used:
- soundtrack link provided by Spotifey
- official page link provided by Disney+
- IMDB link provided by IMDB
- Emmys link used form Televison Academy
- season 3 link provided by ScreanRant
-
Icons used fom Font Awesom
-
Fonts
- Lato: from Google Fonts Library
- mandalore: from Picture and Magic
- waltDisney: from Picture and Magic
Acknowledgements
- Special Thanks to:
- my Mentor - Adegbenga Adeye.
- all the Tutor Assistance (even tho i didn't use them as mutch)
- HUGE thanks to all girls and guys in the Slack Community for providing constant and quite fast response time for every my query!!
- no matter how stupid that query my be
- Student Care for constant care and providers of usuefull additional information out side of follow lectures
- Troubleshooting Tips - it a handy
- and everyone else who supports me on this Coding journey
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent
