Marketing Page Guess Who
This is the README.md for the Guess Who Lambda School Build Week project.
The basis of the project was to create a mobile first twitter game. The game is a high-score based guessing game, where the player guesses who was the author of a given tweet from 2 or 3 choices. The player continues to play so long as they get answers right. When the get one wrong, they lose and their score is the number of correct answers they provided.
Build a marketing page for a mobile application
In starting this build week, there were several challenges:
- Team size was 11 people.
- There was no formal Team lead
- There were no initial UI / UX designs
UI / UX Designs
Given our lack of a UI / UX designer on the team, I took the initiative to design our mobile application from scratch.
From within the Figma file in the Brain Dump file, I started with a level based game modeled off of the game "Tweet Stars" and other level based games like Candy Crush.
This proved to be a little too complex to complete within the course of 4 days, so we collectively agreed to narrow the game down to a "Streak / High Score" based Game.
Because it's a game, I focused on large buttons, color, consistent UI components, and a very simple UX pattern.
I also made accessibility a priority in the game with large contrast, bold fonts, and icons (not just color) throughout to indicate state
Landing Page Design Decisions
This was very straight forward, as I modeled the landing page off the mobile application design:
- Mobile first design
- Horizontal scrolling to increase mobile interaction
- Large buttons and modeled off UI for application
- Accessibility with alt tags, rems on sizing
- Sizing with phone, tablet, and desktop
Not using a CSS framework
I decided against using a 3rd party library like Boostrap in order to build the responsiveness and layout of the application. This was primarily because there was going to be too many css overwrites in order to achieve the behavior I was looking for.
I chose Sass in order to challenge myself to learn another css pre-processor and after some initial research, it seemed as though Sass is used more often in the professional environment.
Netlify for Deployment
Even with familiarity with Heroku, Netlify made deployment and automatic builds from my git repo just too freaking easy.
Challenges during development
During this project, I ran into several challenges that I did not anticipate and overestimate their ease of implementation.
Getting overflow to work properly
This is just difficult overall, and I ultimately didn't achieve the entirety of the desired effect (with additional padding on the far right scroll of the overflow).
Deciding to use display / not display
After wrestling the overflow for a number of hours, I opted to simply use the ability to display and not display items based on screen size.
Challenges with Deployment
Deployment was very easy, but I ran into issues with my original background image, some text styling, and the layout of components when the website was launched to Netlify. I did not anticipate those issues and ran into them much later than I would have liked.
Netlify NOT displaying properly on mobile devices
For some reason the website just acts funny on my mobile device. I doesn't act funny at any screen size on desktop, but on an actual mobile device, it will just remove DOM elements entirely. No known solution and no known cause of the issue.
Starting with mobile first design and not considering the needs of the desktop
From my landing page designs, I started with a mobile first approach, but soon realized that my mobile designs were not going to correctly size to a desktop landing page. I also failed to design the desktop layout before coding. Bad Idea.
Media query Sizing
I sized my components before I did my media queries, which isn't an issue in it's entirety; however, it made it difficult to determine tablet and phone sizes and I had to create 2 additional media queries for <400px and > 1100px specifically for large desktops and small mobile devices.
Dealing with Sass and Sass compiler
The Sass compiler was being a turd most of the time, until I realized that the compiler stops working if causes an error, even after you fix it. I spent too much time needed to kill the compiler and starting it back up again.
During this project I learned the following items that I did not know before hand:
- Using Netlify for Deployment
- Using and troubleshooting Overflow issues
- Getting cards to flip using CSS
- Using Trello more extensively
- Understanding the importance of designing first and designing simple, and then working toward more complexity.
Future Goals / Wants
Moving forward I would want to implement the following:
- Fadein animations on scrolling
- Actually getting the scrolling overflow to work instead of display none / flex
- I want to build the actual game personally