From Nothing to Functional: Breakdown of my Latest Website Project

Vincent Corpes Jr.
cictwvsu-online
Published in
5 min readMay 28, 2024

My goal is to make my designs and projects minimalistic when it comes to graphic design and projects. This passion brought me to design a website for my own Apple reseller business hoping to come as close to the look and feel of the official Apple website. The following approach has made it possible for me to build a user friendly and attractive website that enhances the marketing of our products and services.

What website design do I find most influential and why did I choose it?

The web resource that influenced me most is Apple’s website. Their UI/UX design is laconic and at the same time, functional, due to the usage of product images, minimal navigation bar, and smooth scroll. An effective use of white space as well as splashes of color, circle and oval elements, eradication of complex fonts ensures that the customers’ experience and interaction with these brands is seamless and easy on the eyes. I especially find the integration of sharp colors appealing, and avoiding gradations to give sweeter appealing looks.

What are my go-to resources?

As a layout artist, one gets to work with many fonts or some of the fonts I get to know their names. Regarding fonts, I use only Sans Serif from Apple called SF UI Pro which is used in Apple products. SF UI Pro, or San Francisco, is a modern typeface developed by Apple for literate use in desktop and portable devices. Set as the default font type for Apple’s operating systems, it has a crisp appearance, covering myriad styles; adopting effective changes in type weight direction, which improves legibility and creates a continuous interface. This font can be used conveniently when carrying out communications.

When talking about pictures, my main source is the Apple website because I can directly use the PNG type photos of the phone, which lessens my work by eliminating the need to remove the background every time I save an image.

For someone like me who is just starting to design a website, YouTube has been so useful. When it comes to introduction and the basic concepts I turn to its tutorials and guides. Another aspect, which I find useful, is that I watch source codes from other sites, and this provides me with practical advice and tricks which can be used in my projects. It has been helpful; it has really helped in boosting my learning process in a very short time. However, when things are too complicated for a Youtube tutorial to solve, W3schools is my go to savior. Using this website enables me to come up with effective solutions and tricks that bypass the hurdles that I face. Another savior that I use is Canva. With Canva, I can edit, manipulate, and create elements that I need for my website within minutes and with no hassles. Using these tools really saved my life and a lot of time in creating this website. So in your next project, maybe try using those!

Tips and Tricks

In creating a big project where your grades are in line you need to have a few tricks up your sleeve, here are my tips and tricks that helped me glide through this project.

  • The first thing you want to do is manage time. Start earlier than ever because it will help you to have more hours to dedicate to the creation of your web site. This means that you can transform something, rearrange, or start something new in your mind knowing that you do not have a specific amount of time that has been given to you.
  • Secondly, do not begin without preparation which entails planning. It is easier and faster for you to work when you plan what to do, where to place it, or what to look for when the resources are well arranged and easily accessible. This saves time that would otherwise be used in looking for them when your planning time is interfered with.
  • Lastly, prioritize self-care. Some of the suggestions include: Ensure that you have slept well, taken your meals, and taken a shower. It is, therefore, wise to live and take care of your health to help avoid stress at work. Don’t work on your website all day long, give yourself some rest in between and some other activities to engage in. However, you should be smart enough to plan the time of work and the time to rest.

What stack technology did I use?

In this web development project, I only used HTML, CSS, JavaScript, and Sass, primarily because that is what our professor advised. These are the fundamental tools of our projects and collectively they are very robust. HTML helps me mold the layout of my web pages and CSS helps me spice them up with style. JavaScript adds all the cool interactive stuff just like my slider, and Sass? Well, Sass is just a tool that makes my CSS work more comfortable thanks to variables and mixing. It is a combination that enables me to develop new and user-friendly websites, at the same time meeting the requirements of our teacher as well as enhancing skills in these significant technologies.

Website Overview

Screenshots from my final website

My Conclusion

It’s not a simple or fast process to build a website but it is a creative and skilled work that needs knowledge. As in this project, I learned the significance of these aspects; however, my website is still unresponsive because I could not find much time to learn. The work that has been accomplished in this project has been very beneficial in enhancing my work skills, my time allocation and thinking ability. Even though my site is a copy of Apple’s site, I have tried my best to emulate the official site. Thus, increasing efforts to continue learning and developing oneself is important so that one can tackle such tasks more quickly and thus improve efficiency at work.

--

--