Project 1/Congressional App Reflection
Our first project for WCP was making an entry for the Congressional App Challenge, an annual challenge that encourages students to code an app that helps address an issue in their community. For this project, I worked in a team of 4 people total. One of the first things we did was figure out what issue we wanted to address, deciding to address the issue of vaping. Our team was alarmed by the recent trend of vaping among youth and observed many at our own school vape, feeling the need to educate others why vaping is bad. This need inspired us on how to combat this trend in vaping, creating an online resource to educate teens and parents about the risks of vaping.
After we decided on doing a website raising awareness, we needed to figure out what sections and content we wanted on our site. On our home page, we wanted to inform the audience what vaping is and its harmful effects, getting the user familiarized with the terminology and avoiding confusion in later sections. The other sections we wanted our site to entail were a statistics section, displaying stats related to vaping and using the alarming figures to justify our argument that vaping is bad, a quit section, giving a basic overview into what goes into quitting and setting users who want to quit on a path to achieve such, a game section, where we would let the user play a game about avoiding vaping and achieving a double whammy with our app in the process, and a sources section, obviously highlighting our sources to seem credible.
After we decided on doing a website raising awareness, we needed to figure out what sections and content we wanted on our site. On our home page, we wanted to inform the audience what vaping is and its harmful effects, getting the user familiarized with the terminology and avoiding confusion in later sections. The other sections we wanted our site to entail were a statistics section, displaying stats related to vaping and using the alarming figures to justify our argument that vaping is bad, a quit section, giving a basic overview into what goes into quitting and setting users who want to quit on a path to achieve such, a game section, where we would let the user play a game about avoiding vaping and achieving a double whammy with our app in the process, and a sources section, obviously highlighting our sources to seem credible.
Since we were now doing a game and website, we decided to split roles - half of the team would work on the website and the other half on the game. I, along with someone else, worked on the website portion of the app. Together, we further split responsibilities making the site, my teammate working on the mobile site while I worked on the desktop version and the site's assets. After creating all necessary folders and setup for the site, one of the fist things I did was make the navigation. I had researched for other types of navigation besides the common hamburger and top nav styles, coming across a style which slid in the navigation from the side after the user hovered over a certain indicator. To give the site some uniqueness, I went for this style of navigation, breaking away from traditional navigation styles. How I achieved this functionality was with a bit of CSS. I offset the div of the side nav using the left property, setting it to a negative number so it went off screen while making sure the indicator inside the nav, which had been styled such way that it was all the way at the right of the nav, was still visible. I then created a :hover pseudo class rule for my nav div and redefined the offset from the page left to 0, bringing the div onto the screen. All that was left to do was to add a transition property to the normal CSS of the div so that when the user hovered over the exposed nav, that change in the left offset would take place gradually rather than instantly and shuddery.
Once the navigation was complete I focused on styling the rest of my site. Since this was the desktop site and monitors could be really big, I made sure the content being displayed was centered and took up less than around 60-70% of the overall width of the page, mainly to reduce the length the users would have to move their head or eyes to read the content. The font size was made big and the line spacing was fairly wide so that the content looked appealing and easy to ready. Since we couldn't get permission to use infographics we had found online, I made many of the inforgraphics for the statistics page and still cited where the information being portrayed came from within the graphic itself. I conducted a usability test and asked others what they thought about the site, fixed a few errors and heeded a few suggestions based on testing and feedback, and called it a done site. One my teammate finished the mobile site, I used JavaScript to link the two based on the width of the user's screen, coding a logic statement which would switch to the mobile site if the screen was less than 700 pixels.
These skills are important to a web designer since they are essential for making a usable site for an intended audience. A web designer must know what they needs of the audience are and format their site accordingly, which I did using CSS to account for the potentially larger screens of desktops users. A web designer also needs to appeal to a target audience, which teens and parents, which we hoped to achieve by creating 2 sites optimized for a specific platform. By making web site accessible to platforms its most likely going to be accessed by, the chances of it reaching the intended audience increase significantly.
Once the navigation was complete I focused on styling the rest of my site. Since this was the desktop site and monitors could be really big, I made sure the content being displayed was centered and took up less than around 60-70% of the overall width of the page, mainly to reduce the length the users would have to move their head or eyes to read the content. The font size was made big and the line spacing was fairly wide so that the content looked appealing and easy to ready. Since we couldn't get permission to use infographics we had found online, I made many of the inforgraphics for the statistics page and still cited where the information being portrayed came from within the graphic itself. I conducted a usability test and asked others what they thought about the site, fixed a few errors and heeded a few suggestions based on testing and feedback, and called it a done site. One my teammate finished the mobile site, I used JavaScript to link the two based on the width of the user's screen, coding a logic statement which would switch to the mobile site if the screen was less than 700 pixels.
These skills are important to a web designer since they are essential for making a usable site for an intended audience. A web designer must know what they needs of the audience are and format their site accordingly, which I did using CSS to account for the potentially larger screens of desktops users. A web designer also needs to appeal to a target audience, which teens and parents, which we hoped to achieve by creating 2 sites optimized for a specific platform. By making web site accessible to platforms its most likely going to be accessed by, the chances of it reaching the intended audience increase significantly.
Comments
Post a Comment