SeeRem

During the first month of the project, I began creating wireframes and a style guide for the SeeRem website. The style guide consisted of designing the basic structure and elements that would be incorporated into the site which would help keep a consistent design and code structure on all the web pages. This stage also included understanding the branding of the company and how it would be represented through the website, which led to communicating with the CEO of the company for additional information regarding their SeeRem application.

Development of the website began in the second month, where I started creating template pages using HTML and CSS. Throughout the weeks, we began refining the layout of the overall site by compiling content, images, and deciding on the overall flow that would create a positive user experience. For instance, the home page went through multiple iterations with the first one only containing a brief overview about the SeeRem division as well as the different services links. I realized that this was not very informative for potential customers when they are trying to learn more about the application. This led to the decision of including a section discussing the features as well as the application’s benefits immediately on the home page so that this key information would be easily accessible to customers. JavaScript was also used in the site to increase the functionality, such as having a scroll to top button and confirmation messages which would inform users when their form has been successfully submitted.

Once the structure of the website was developed, I had to ensure that the site was responsive so that it can be viewed on different device screen sizes, including mobile. This was one of the more challenging tasks of the project as it was my first time developing a website that would be fully responsive. Making the website work well for mobile devices proved to be very hard as the screen size was a lot smaller in comparison to a desktop screen size. However, through the use of media queries and additional mockups for mobile screens, I was able to make the elements of the page more appropriate for smaller screen sizes.

Overall, the whole process took two months and the website was coded to be responsive on a variety of devices and browsers. Although we were able to showcase the necessary information to promote SeeRem on a front-end website, I would like to explore the possibility of developing the back-end portion of the site in the future to handle user data. Using the experience from this project, I would spend more time considering how future website projects would look on mobile to make the process of implementing responsiveness easier.

By completing this project, I was able to learn more about front-end web development, especially the process of making websites responsive, while improving upon my HTML, CSS, and JavaScript skills. It was also my first time developing a style guide and working with GitHub to collaboratively code with my partner which is a practice that I will carry over to future coding projects as it allows us to stay organized. The final website was then submitted to the company, which received a positive review from SEEDA that led to an internship position where I assisted with the official SeeRem website launch and worked on a prototype for their web application.