Get Hired
2020
Get Hired Website
The Get Hired website was a semester long educational project for a fictional company with the following description: Get Hired is a start up dedicated to connecting college graduates with resources to reach their dream job. They share resume tips, application/networking tips, and interview tips.
This project is meant to reflect on abilities in HTML and CSS to create a semantic and responsive website. Having only taken basic HTML and CSS courses prior to this one I was challenged to code a three page website using a single page for CSS using properties like flexbox and grid for the first time. I was challenged in various parts of the code from semantics to minor tweaking, and in the end I was able to create an accessible and responsive website I am greatly proud of.
Goals
The goals Get Hired wishes to accomplish with their website to add new tips and links to articles each week, and as they increase their audience they plan to list jobs from partners that want to work with their grads. Their primary audience is college students and recent college grads. They also want to appeal to companies that are looking to hire new grads and to recruiters. Eventually they plan to expand their business to include job listings for new grads once they have established some partnerships.
The website must contain:
Easy Navigation - they want our users to be able to find their tips and other info easily, so links should be easy to spot and should tell the user what they’ll find on each page
Accessibility - The site must be accessible. They care about their customers and want to build their site with this in mind.
Device Support - They want their site to look great and work great on any device and in any browser, whether it’s displayed on a phone, tablet, or desktop.
Provided Assets
The Beginning
I began the process by viewing competing websites as well as websites that had aspects that I found to be well designed. A few of the competitors I encountered were indeed.com, glassdoor.com, and themuse.com. The thing that all of these websites had in common were bright webpages, job search features, and very simplistic layouts. With a target audience of college students I decided early on that I would go for a dark color scheme as that is something preferred by college aged students. A job search feature is not something the client was looking for at this time, thus I did not include one. At first I did not want to have a common layout, yet I did eventually settle on a simplistic layout to make the website more user friendly and familiar to what they see from similar websites across the web.
The websites I found aesthetically or functionally pleasing included hellofresh.com, altar.io, and humaan.com. HelloFresh has a homepage layout that is easy to navigate while also being clean and modern. I liked this for my website because it felt like something I could accomplish as well as something that is user friendly. The Altar and Humaan home pages, which stick out in having one huge image taking up the height and width of the screen introducing the company, caught my interest as this radiated a modern and professional tone. These websites highly influenced my layout with the use of large images to section and introduce topics, the tips being gridded evenly next to one another, and the entire contact page.
Wireframes
In building the wireframes I drew inspiration from the websites mentioned above to form the overall layout of each page. The use of large images was the biggest inspiration from the websites I researched. In these wireframes the tips page was the only page that was not headed by screen width images. I did this so that I could incorporate the "Tips Hub" text on top of the page. At this point I had not even considered overlaying the heading text over over an image to maintain continuity across every web page. When the wireframes were introduced to the client, there were suggested changes to be made mainly on the tips page.
Desktop Wireframes
Tablet Wireframes
Mobile Wireframes
Desktop Mockup
Tablet Mockup
Mobile Mockup
Mock-ups
At this point in the process the final images were decided on, the text for each page and image was written, and the color scheme was finalized. For the homepage I had at least four different images to choose from and I landed on this one because of the handshake in the middle of the screen. I felt that it symbolized the connection between the company and their audience and that the connection was sealed by company logo over the handshake. At this point I decided to create continuity across the entire site after input from the client. To do this I removed the "Tips Hub" from the website and changed the functionality of the tips themselves in removing the drop downs. The tips page was completely revitalized from the wireframes incorporating screen width images to relate better to the other pages and better section the tips from one another. From there I overlaid the tip headings over the screen width images like the slogan and logo on the home page. Finally the contact page was changed to better fit the size of the screen on the desktop version floating the map and forms beside one another.
Coding
Coding the website to reflect the mock-ups was a process full of questions, research and learning how to work with certain styles new and old. Semantic coding was a new concept and one that was very beneficial once I moved on to CSS. From testing for accessibility to figuring out why the padding or margin is messing with the code all of a sudden, there were many improvements made throughout the process. Some memorable issues that I mended were overlaying the text and logo over the image of the home page, formatting the footer content side by side on tablet/desktop, and working with grids and floats to achieve the desired results especially on the contact page. From this I was able to gather resources, advice, and skills to build this website and better ones moving forward.
Conclusion
Through the thick and thin of it all Get Hired was presented with a functional website that met all of their needs. If I were to continue working on this website I would love to add more functionality to the tips page adding a back to top button on the bottom, links on top of the page that directly take the user to a certain section, and changing the color scheme of the site to be more accessible. From here I am excited to continue moving forward in expanding my knowledge to create aesthetically pleasing, accessible, and highly functioning websites that fit the needs and vision of the client.
Get Hired Website: https://www.public.asu.edu/~rrromer4/git414/index.html
