As I learned more about the process to take a design out of a design software such as XD or Figma, and into a functioning application or website, I realized there may be limitations or possibilities I was unaware of in the coding process that might affect my designs. I then decided to learn HTML/CSS/JS and to do so, I decided to rebuild my portfolio from scratch. Since doing so, it has actually sparked quite an interest in getting better at it and learning more languages.
• Keeping everything simple and intriguing while maximizing the amount of information conveyed.
• Deciding how to layout the different projects.
• Overflow issues.
• I ended up going with a simple black and white color scheme because I knew I would be displaying a lot of different colors over it so it seemed best so as to not have anything clash, I also used lots of large images and took advantage of negative space where I could so that everything felt cohesive but not overbearing.
• The “Work” tab was the most difficult part of the design as I didn’t want to use a card style layout. In the end, I hope that what I went with translates well. The verticality of the headings in contrast to each project name separates the two project types visually and hopefully clarifies everything properly while still looking balanced.
• I used quite a few large animated images, as well as a few tilt and hover effects which increased the dimensions of certain elements, I kept running into overflow issues where scroll bars would appear that I didn’t want, I ultimately wrapped the whole body with “overflow:hidden;” however later discovered this attribute doesn’t work on mobile so it took a lot of trouble shooting to learn the best fix for this is to change the meta tag content attribute from “initial scale” to “minimum scale” which fixed everything.
Preparation - Starting with wireframes and such from a strictly design standpoint is very important, at least for myself, in getting to a final result. I however, find this is crucial when moving from a final design into code, as having a visual representation of something you are trying to convert into essentially words and numbers would be much more difficult without having a visual guide.
Consistency - I have learned this throughout many projects but its importance was amplified to me while building this site. Because I would be displaying various projects with different color schemes and assets, it was very important to keep everything consistent as a whole such that every page on the site felt cohesive.
Trial and error - In design, there are certainly right and wrong decisions to some degree, but this is amplified significantly when programming. While frustrating, it does encourage you to just go for it and learn through mistakes which can ultimately wind up being very rewarding.