RESEARCH.

Where do I start when developing my website?

The first step for developing my website is research. I started by gathering all the necessary information I would need for my portfolio. Not only was I compiling all the pieces and works I wanted to showcase, but I also looked online at other professional portfolios for inspiration. Then I developed a theme and brand identity for my website, starting with a color palette and font. At the end of my research, I created a mood board that served as inspiration for the design and coding processes, as seen below.

DESIGN.

What can I do to make this presentable?

The next step is to design wireframes for the website, which is my favorite part of the process. Using Figma, I began playing around with layouts for the site. I went through many wireframe iterations, often designing and coding, until I settled on a final design.

First Draft – Initial Wireframes

After doing research, I started drafting wireframes for my portfolio site. I really wanted a minimalistic design that looked very clean and modern. For the home page, I planned on including an introduction of myself and a sneak peak into one of my marketing and design projects. I included cutouts of a laptop and phone which is where I plan to display my projects and designs. I also didn't want to have a very busy layout for every page, which is why I decided to use an on-click slideshow for my designs. At this point, I knew I wanted a navigation bar and an title/image on every page, but did not know how I wanted to execute that vision.

Second Draft – New Format

For my second draft, I played around with doing a one-page layout since I wanted to code my site using React.JS. I kept many of the same elements from the first draft but with more detailed sections. For example, in the Marketing section, I decided to have images for an on-click function that would display the image on the laptop/phone cutout. I also expanded the design and about sections with more specific titles and sections. This was the "final" wireframe for a while and I ended up coding most of this website out.

Third Draft – Final Structure

I wasn't satisfied by how the website turned out after I coded the wireframe, so I went back to the drawing board to restructure the wireframe layouts. I decided that I didn't want to display any projects on the main page and only use it as an introduction and navigation page. This iteration of my website includes a new page for web development in which I highlight my coding process for this site and other projects. Now, every seection has its own page.

CODING.

How can I make this functional?

The final step is to code out the site so it is fully functional. I first decided to code out the second draft wireframe using React.JS. However, I wasn't satisfied with how it looked; I also wasn't that familiar with the language and couldn't execute many of the features I wanted to. I decided to switch back to HTML, CSS, and Javascript to code this final portfolio website. Click the button on the right to view a version of the site.

JW