Minneapolis Design Show

Website for Minneapolis College Portfolio Showcase

I worked on a team to design and build a portfolio showcase website for the design students from last semester. This website allowed students to feature three of their top portfolio examples and present their work. There were several phases to this project, including designing all of the UI elements, building out the website, and organizing the content for each student. I was on the team responsible for both the website design and the front-end build. It was a great experience collaborating with a team to build a platform that highlighted everyone’s work for our final presentations.

Website

Figma Website Design

We started by designing the layout in Figma, working from an overall concept that was created by another student. We each took responsibility for a specific section, collaborating closely through notes and comments to ensure the final design felt cohesive.

Here is the initial design content and brand assets we were given to create the website.

We split the website layout into three main sections, with each of us taking charge of an initial section to design. The image above shows the overall Figma layout we created for the web design. We designed what it would look like on the desktop as well as on a mobile device.

I created the layout for the main page featuring our student designers, as well as the view that opens when a student’s photo is clicked to display their portfolio pieces. I also designed the overall background for the website, creating something fun and playful to match the energy of the overarching design concept.

Website Creation

We worked together as a team to code the website, using GitHub to manage and submit our code. This phase involved a lot of moving parts, and everyone played a key role in making sure the build ran smoothly. Each person took responsibility for coding a specific page, while ensuring we stayed consistent with one another and followed our Figma designs. Whenever we ran into technical issues, we collaborated to troubleshoot and work through them together.

In addition to building the website, we conducted thorough user testing to identify and fix any bugs or layout issues before launch.

I was responsible for coding the Designer section of the webpage, including the layout and visual elements. Initially, I ran into a challenge getting the background shapes to line up correctly with the photos. After researching solutions and collaborating with a classmate, I successfully resolved the alignment issue. I also helped set up the links so each student profile opened to their individual detail page.

Beyond coding, I designed several visual assets for the site, including the main background image, the decorative shapes behind student photos, and the social icons for the detail pages. Additionally, I formatted and resized all student headshots and portfolio images to ensure proper site performance and layout consistency.

LinkedIn Banners

Additionally, one of my instructors asked me to design a LinkedIn banner to help promote and showcase the website on her personal profile. I designed three different variations for her to choose from. She used the first concept as her main LinkedIn banner, and used the other two designs in online posts in our class discussions to help spread the word about our student show.

This is the image that my professor chose to use as her LinkedIn banner.

You may also like