Part 1: Project concepts and first draft Website Design & Navigation System

 

First step was I signed up for Wix and created my account: https://ashleymserafino.wixsite.com/ashleyserafinoportfo/portfolio

I selected a bare, minimalist template so that I could have maximum flexibility in creating my site.   I started by finding a basic template. I found one of the temples to be visually pleasing and changed the image to my painting.   The pages I created include a Homepage, About page, Portfolio page and Contact page.

I wanted the home page to look simple yet still make people want to check out my art.  On the Homepage, I thought it would be fun to take my Tuxedo Sam painting and use it as a focal point.  I then changed the button to the words “View” with an arrow.

After working on the home page, I decided to work on the portfolio tab which is the most important part of the site which shows all your artwork.  I gathered all my images in to Wix and separated them into folders.   The folders I came up with include:  Paintings, Photography, Photoshop Projects 2023, Photoshop Projects 2024.  Next, I put my images of paintings into paintings, photos into photography and so on. Around this time, I decided to change the colors of the portfolio. 

It was greens as I had it on the theme “Technical” but I ended up changing that to more blues template.  I used adobe color’s Accessibility Tools to check if the colors I used would work well.  Check out the Adobe Color link:  https://color.adobe.com/

Next, I then worked on the contact page which was very simple and I used the templates given and changed up the colors.

Finally, I worked on the About page. I liked the idea of having a symbolic image of myself framed.  I used a template that included a frame for your photo.   Next, I used a filter on the frame to change it to a yellow.  The yellow is meant to stand out against the blue making the image be the first thing your eyes focus on. The art of the character is made by me in photoshop which represents me.

Lastly, I worked on my unique header that appears on all my pages.   I used my XP-pen tablet to write my name in photoshop then I exported it and used it as the header. The text is a bit messy and I may clean it up later, however for now I think it looks fine for the first draft.

I would love your feedback so I can incorporate any ideas into my final project.  Thanks so much!

I found it was helpful reading the class materials before working on this project.

In the article “10 Steps to the Perfect Web Design Portfolio”, a few key points that I learned is that you should make sure you have the following:

·       Logo: “if you’re trying to promote yourself online, then it’s a good idea to go by your name.”

·       Portfolio: your portfolio should contain big high-quality images, clearly accessible to the user”

·       Use social networking websites: “Make it clear that they can follow you on Twitter, Facebook, Flickr, LinkedIn, etc.” (“10 Steps to the Perfect Web Design Portfolio — Smashing Magazine”)

An important lesson from the video “Learn Web Design: Simpler is Better” is that simpler is better!  I thought this was interesting that the Josh Johnson said “By maximizing the photo on our canvas we can simplify the layout dramatically while making a much more powerful visual statement.” (CreativeMarket)

 

 

 

Cite:

Color Palette Generator | Adobe Color. color.adobe.com.

 

CreativeMarket. “Learn Web Design: Simpler Is Better.” YouTube, 16 July 2014, www.youtube.com/watch?v=AASd5ewKNSw.

 

“10 Steps to the Perfect Web Design Portfolio — Smashing Magazine.” Smashing Magazine, 26 Feb. 2009, www.smashingmagazine.com/2009/02/10-steps-to-the-perfect-portfolio-website.