[Interactive Prototype Concept] – Nicholas Lucaccioni

After much time spent trying to decide on what to do for a interactive concept I decided to try finding an interesting way to redesign my online portfolio site and add more interactivity to it. For this first iteration, I decided to focus on presenting my 3D work.

To be honest, I had and still do not have a clear direction of where I want to go. I have thought about several ideas of how to present my work. This includes finding away to present them in an actual interactive 3D space, through the use of transitions in the way the works will present themselves, and the use of 3D elements to explore more works of a specific series. Through these ideas and many more that I had, I tried to think about how the user would interact and whether or not it would add or take away focus from the work.

As a result of much toiling, I ultimately decided to start of with a very simple site that would work in 2D space. So far I have only created the one single home page. I plan on creating many other iterations as I develop more ideas. Looking at what I currently have, I have thought that perhaps I should not overthink whether the experience would add or take away focus from the work and ultimately let the user decide this instead of using my own biased opinion. This is something that I will need to work on.

Screen Shot 2018-02-19 at 1.33.58 PM.png

 

Prototype V2

The previous week I worked on the visual look of the site. This week I decided to pursue a couple ideas I had for how to present my work.

20180226_130230_HDR

The 2 ideas I decided to pursue where a carousel for the images and then a more fluid vector grid that would use parallax to create interesting interactivity. I prototyped both of these ideas in After Effects. I hope to get feedback this week to see if one idea is working better than the other.

Prototype V3

20180305_150118_HDR.jpgThe previous week I worked on a couple concepts I had for interactivity for my site. This included a carousel for my work as well as a vector-parallax based presentation. After some user testing, I found that while the carousel was much cleaner and more straightforward, the vector grid was a more interesting concept and much more unique.

I decided this week to create a working draft of the website. Instead of focusing only on my 3D work like I have for the past iterations, I wanted to find a way to incorporate both my branding and 3D work. As a result, I came up with the idea to have two sections: one for my branding work, and one for my 3D work. The branding sections would be a grid, so as to present the work in a straightforward manner. Taking ideas from my previous vector-parallax idea, I decided to create a parallax section for my 3D work, so as to emphasize the 3D element and create a sense of the work being in sort of a 3D space.

I used Webflow to create the site. The draft can be accessed at
http://portfolio-prototype-6ab4cb.webflow.io/

Portfolio Site Re-Design

Goal/Concept statement

My current portfolio site is rather bland, boring, and overall I have come to dislike more and more. In this project, I set out to completely redesign my site from scratch, without the use of a site builder, such as Wix, or Adobe My Portfolio, as I had for my original site. Instead I will use Webflow to build my site. I aim to create a much more unique experience that presents my work in an engaging way.

Live Site: www.lucadsgn.com

artboard.png

Development Stages

Phase 1: Define

I will be creating a live and viewable website that will replace my old portfolio in an attempt to better present my work and myself as a designer. I expect this site to include an engaging layout and transitions. The audience for this site would be potential employers and clients as well as fellow industry professionals.

Phase 2: Shape

In an effort to create a unique experience, I explored several different concepts. I had originally focused on only my 3D work and how to create an experience that presented the work uniquely. To this end, I first created a static layout in Sketch to figure out what sort of aesthetic I wanted.

I then moved on to the idea of using transitions and animation in the presentation of my work. I came up with 2 different ideas for this. The first would be to use a set of image carousels that would be constantly rotating but would slow in rotation if you hovered over one. The other idea was to create a sort of network of connected vector points that would be constantly moving and interact as you moved your cursor around the screen.

Then as I began to create the live site, I decided to incorporate elements from these previous explorations, using a fairly standard grid when presenting my branding work and using a parallaxed network of images for my 3D work.

Phase 3: Make/ Prototypes

During the prototyping phase, I used a couple programs. These included Sketch to create a static layout and then later After Effects to create concepts for transitions and show concepts for interactivity. For the final design and live site, I used Webflow.

From the static layout created in Sketch, I was able to establish a design aesthetic that I used in subsequent prototypes and eventually the final product.

After some user testing and feedback from my concept animations, I learned that while the vector grid was more engaging and unique, the carousel was more straightforward.

Using Webflow, I created the live final version of the site. Using the design aesthetic I had established earlier, as well as taking a couple of the ideas from the transition concepting phase and incorporating them into the site.

Phase 4: Launch

In order to launch the site, I will link the Webflow project/site to my domain name that I already have. By doing this, I can make changes to the site in the future through Webflow that will update the live site automatically.

Questions?

Is there a way I could make the branding grid more engaging so it has a similar focus draw as the 3D section of the site?

How might I add a video/animation to the site?

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