Portfolio

This page shows my journey as I designed and developed my personal website. Starting from the design phase, indecisiveness, developing, and rapid prototyping, see how I started this venture that will always be updated.

Getting Started

After hours of youtube videos and tutorials I was ready to build an online portfolio to showcase my skill. I picked a cool website and began to replicate it. The layout was clean and I figured it’d be simple to complete. Originally the website was going to be for my photography and architecture.

Changing My Mind

At this point, I realized I thoroughly enjoyed the learning, the design, and the developing processes. I was not having much luck in the architecture area so I figured I’d just change careers. While learning in codecademy, from some software developer friends, and youtube, I picked up HTML and CSS pretty quickly. In this process, I didn’t truly understand the differences between UI, UX, front-end, back-end, full-stack, libraries, or frameworks. I just went with the flow taking in all the information.

Stephen Dunlap's Web developer website attempt

Interactive Wireframe

During the prototyping, it didn’t sit right with me that the design wasn’t my own. At this point I produced a wireframe that I thought would make for a cohesive online portfolio. I thought that a horizontal scroll would be a unique factor that I could add so I designed it to switch main pages on a horizontal scroll and switch to a vertical scroll once a page was officially selected.

More Attemps

I took a little break to learn more about my craft and got back to the project. With a better understanding, I was able to design with ease of mind when thinking that I could develop and ideate simultaneously. The design that I landed on was a bit more flamboyant. It made a statement that just didn’t seem like me. So, yet again, I scratched that iteration and started all over. Each time I got better and learned more.

Stephen Dunlap's UX Design website attempt

Current

Finally I decided to make the website a reflection of myself and values. The color scheme I went with calms me and is reminiscent of the time I had in architecture. The wood accent is testament to the woodworking that I partake in. The transparent menu in mobile view is the last piece to complete my aesthetic of greenery, wooden texture, and glass. With a multifaceted approach similar to architecture, the design and development process almost completed itself. This is the design that I developed for myself.

Planning

Throughout this entire process, the one thing I would have done differently is utilize UX design as I do for others, for myself as well. I jumped right to developing most of the time and did little planning. Much time could have been saved had the layout and flow been structured. During this current iteration, having a plan and css variables in place streamlined the entire process and reduced stress that I would’ve experienced had I not done so.

Future Steps

For now, this will do. This project will never simply be done because as I learn more design and development practices, I also learn of all the ways I can express myself and help others express themselves by creating unique experiences.