[Project Proposal] Portfolio Website – Noah Semus

Goal/ Concept statement

For my project, I decided to completely overhaul my portfolio website. Seeing as I am moving deeper into the digital design world, I needed a portfolio that would reflect my aptitude in that environment. I set out to create a simple site that will dazzle through fun microinteractions. I developed the ideation within Sketch and then moved into Webflow for development.

The site is now up and running; it can be found here.


Development Stages

Phase 1: Define

The dry details of the project. Describe what it is you’re making, define its requirements, needs, perimeters, etc.

  • What is the problem being solved?

The problem is how to showcase my personal work in a way that reflects the ideas of interactive design.

  • What are the project expectations?

To design and ultimately create a visually entertaining portfolio website with the use of Sketch and Webflow.

  • Describe what is being made

A portfolio website.

  • Who is the audience?

Generally it will be employers and other various designers.

Phase 2: Shape

Concept development. This is where you describe the process of exploring the concepts and begin defining more interpretive goals.

  • What are the precedents

Most portfolios tend to be straightforward; they have an about page and some sort of grid to showcase their work.

  • What do they do well? What don’t they do well?

The simplicity lends itself to what a portfolio is trying to accomplish. A portfolio isn’t attempting to make the user stay there for hours, but rather a quick glance to learn about the designer and their work. The problem, I find, is that many portfolios tend to look the same now because of this. Very clean and a nice grid. They look good, but it is also hard to find unique ones. The ones that are unique follow the simplistic format, but are presented in a new and interesting way.

  • Develop concept art

Phase 3: Make/ Prototypes

Development. Describe how this thing will be made.

  • What were the prototype stages and what did you learn from each prototype?

I started with a concept prototype. I wanted to make sure that the animations being put in were not only visually distinctive, but also helped in terms of usability. After learning from that, I went into visual prototyping in Sketch to think about the interface itself. I learned using cards and a limited colour palette would be not only aesthetically pleasing, but also help in terms of hierarchy and navigation. After that, I started general development to create the interactive animations. This further tested the idea from the proof of concept, and also allowed me to learn the development software needed.

  • How will this be built? What technology and development process?

The website would need to be built in HTML, CSS, and Javascript. Initially I thought I would need to use Launchpad for Sketch, but that didn’t allow for the animations needed as it had no support for Javascript. I then stumbled upon Webflow, which allows one to build out their website through these three languages in a visual UI. This allowed me to import assets from Sketch and build in Webflow.

Phase 4: Launch

Since this is a personal project, the site is already launched with no need for team approvals.


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s