People in Progress

As my first foray into web design and UX, People in Progress is a conceptual advice style blog, where our readers would submit questions that would inspire articles. With this assignment, we were required to create one page of the website three times, once in Figma, once is Cargo, and once in Adobe Dreamweaver, using HTML and CSS. While a very difficult and time consuming venture, it’s always enjoyable and worthwhile to learn new software, and I hope to advance my skills to a point where making a simple button click isn’t as groundbreaking as it was during this project. The slight changes in design you see on each platform reflect my process of adapting and learning as I investigated the world of web design.

FIGMA

The easiest to use and the hardest to convert to a real site, Figma was fantastic for learning how to animate user experiences we take for granted, such as buttons changing color on hover, and pop ups on click. This rendition is the most like the original static design of the website.

Cargo

My final iteration of the website is the furthest from my static design – even the fonts – making it a good example of how differently each of the three platforms work. Design adaptation using Cargo looks deceptively easy, but it was challenging for someone at my skill level. I would consider using it again for a simpler design.

HTML / CSS

The build for this site gave me the biggest learning curve, but was very fulfilling. This was my first time doing coding of any kind, and it was like learning a new language, literally. With many rounds of trial and error and multiple instances where I completely restarted, this is relatively close to the static design, and has all of the interactive elements I was looking to include.

Previous
Previous

Graphic Design Workshop

Next
Next

Independent Graphics