Personal Site Inspiration

1. adandypunk.com -quirky design, it really shows the personality of the designer and the fun of their work. I want to be able to highlight those aspects of myself in my site.
2. pollenlondon.com -the design is sleek and modern, making it very easy to read- a reminder to not over clutter!
3. imtawn.com -your attention is immediately grabbed by such a large image with very little text, again it looks very sleek and uncluttered
4. strange.wales -the site is very light and monochromatic which lets the work steal the show because it is the only variety, also very simply organized
5. jessewillmon.com -the design seems very personal with the appearance of hand drawn aspects highlighting the artist once again
6. guillarmejuvenet.com -beyond my skill level but it is a good example of interactive and engaging design, maybe find a way to do that where I can bring an aspect of that in to my site
7. vitosalvatore.com -his organization is a bit weird to me at first but it does appear to get better, the about page has a great concept for what an artist statement should include
8. heckhouse.com -a large image is attention grabbing and the logo and site design are very personal to the artist which is something we need to have a strong grasp on
9. seanjkassen.com -the first thing you see is actually a great indicator of his work
10. vanderlanth.io -very sleek, an excellent use of repetition of the logo throughout to maintain cohesion and the identity of the artist

The biggest struggle for my concept is going to be figuring out how to represent my style. I tend to have a mix of organic illustrative pieces, and then very geometric sleek designs. This comes from my background in fine arts shining through in to my graphic design work. I have always wanted to achieve that balance, however, it seems a harder thing to conceptualize in to a cohesive site design and logo. A lot of these sites are super sleek. Do I want to conform to that? Will I risk looking too illustrative if I don’t? In search of a design that balances the aspects of my style, which part should be the focus?

 

Project 2- Personal Portfolio Site

Project 2 is the development and creation of our personal portfolio sites, that will also be used in Web 2.

To do:

• Research 10 other portfolio sites for things such as layout, look, fonts, navigation, etc.
• Come up with a cohesive look for my design style- includes a logo, color scheme, and fonts.
• Create a site map. Must have:
  • Page for PDF resume
  • Artist statement- 2-3 paragraphs
  • 10-12 pieces of artwork
  • Social Media
  • Contact Me email submission

3 concept ideas for the main page of the site are to be done in photoshop and are due Tuesday November 1st.

 

Final Sites

Final sites were due Tuesday October 25th for presentation. Any changes that needed to be made must be done by Thursday for submission to the dropbox.

Blog Posts?

I forgot to continue my blog posts as we were just building our site and not taking notes on new content! The site is coming along well, I have slightly changed the layouts, as I mentioned, because I realized there were better options. I also realized my wireframes were a little off, so I did learn a bit more about organizing wireframes.

Design to HTML

When designing my site it Photoshop, I did not fully understand the capabilities of HTML. In the last few class sessions before we started coding our own pages I learned that I could do much cooler, helpful, and aesthetically pleasing things in HTML than I had originally designed. I now have an embedded google map and a PDF job application. If my final design looks different from my photoshop ones it’s because I’ve discovered something better in HTML.

Site Building

The site is being built in HTML now. The social media icons need to be switched out and I think the footer needs to be split into left and right sections to achieve the text layout I have there. Overall, it’s looking very similar. I figured out how to make the background more transparent with opacity: .9 and center align the text text-align:center.

Final Designs and Wireframes

This slideshow requires JavaScript.

My final desktop and desktop wireframe layouts above, mobile design and wireframes below.

This slideshow requires JavaScript.

Week 6 Thursday

Extra note of the day: main already exists in html so no “.” is needed. Main_left does not, so we must define it with a “.” making it .main_left.

When the content goes beyond what we have allotted, remove the height in container and main so it adjusts to the content. This can affect other areas, so check your other pages for formatting issues.

To make one of the pictures link to a page for that event we copied menu.html and renamed it event_10_4_16.html and then made it in to the page we wanted. To link them, we found the picture we wanted to associate with the page and wrote in html the link for the new page.

In that page, we are inserting an image and caption. Homework is to have 15 event pages.

Week 6 Tuesday

To make the menu options actually function by taking the viewer to that page in the site, change the links we originally put in.

Create an About page by copying the index.html and pasting it renamed about.html. Do the same for Contact. In Contact we also embedded a google api in the HTML. We just googled “embed google maps in html” and used this site. We can google this for twitter, instagram, facebook, google calendars, etc.

In the menu page we are inserting PDFs and images to represent the menu items. The href lets us link the pdf that can be opened. The img src is just a screen shot of the cover of the menu.

For events we learned about making a square in photoshop and importing pictures in to it so they are a single white box with many photo layers that can all be saved as jpegs.

We then put them in the main section of HTML.