M6: Home Page and Navigation System, Final Project (Part 2)
My final project is my professional website for my writing, and now my portfolio from this class and, hopefully, future work. Originally, I was going to re-vamp my original site but GoDaddy hosts it and their editor is minimal at best and their customer service is hot garbage. I decided to switch back to Wix and created a new site from scratch for this project and my future site. I am also thinking about linking my Blogger page to my Art Portfolio page so that others can go see the process, not just the final work on my page, but so that I may also remember where to go and see my process in the future.
My new site has five pages: Home, Blog, Art Portfolio, About, and Contact. Originally, I had the Contact page under About, but decided to have it as its own page for easier navigation. I also may change “Art Portfolio” to just “Portfolio,” but am still undecided because my site was originally created for my writing which will still be the feature of the page. My aesthetic is probably what one would think of when thinking of Edgar Allen Poe, older, dirtier, dark(ish). Most of the background is a photo of old and worn paper.
I added icons for each page that were “older” because I love antique typewriters, as seen on the banner and the photo of the blog page where “BLOG” is written in antique keys. I had originally wanted to create my own banner with similar keys spelling out “Penner Dreadful,” but I was unable to find all the letters that I wanted. Most of the images I have used throughout this course and on my site have been licensed and I downloaded them from my Adobe Stock account, but this is limited in the amount of the downloads and I didn’t want to use all my monthly downloads for just the banner.
My logo is one that I have drawn myself and edited in Photoshop to remove the background and invert the colors. I changed the menu to match the colors of my color theme. I downloaded the font “Tox Typewriter” from DaFont.com and used to write “Penner Dreadful” in Photoshop and added Kyle’s Spatter Brushes for the “ink” droplets with a transparent background. After several adjustments with font color and placement, I kept the font black and moved it from the lower right corner and placed it onto the book. I then placed the menu in that empty area on the right side.
Now for the breakdown…
· HOME Page
o This page has been blank for a long time. I found that there is a testimonial template that Wix offers so I chose that and am working on getting testimonials from those who have read a decent amount of my work. I’ve got two right now and am waiting for at least two more.
o I extended the black background of the template to the left and right of that part of the page for a more seamless look.
o I took the banner from the icon from the About page, deleting the entire cameo, cropping just the banner, deleting the text and replacing it with “welcome” in the Tox Typewriter font. I also added Kyle’s Spatter Brushes in both the banners color over the black text to age it then in black for ink spatter. Since the background was transparent, I had a hard time erasing everything outside of the banner, but when I added it to the page with the black background, the yellow spatters gave it some character, so I left it alone.
o I added a small welcome text box about the page and below are the testimonies. I copied and pasted the small icons from the About page to separate the welcome text and the testimonies section and to separate the testimonies as well.
· BLOG Page
o I chose to have my blog second on the menu because it’s what I have been using the site for up until this point.
o With the BLOG photo I initially removed the background then changed it to black so it would match the blog’s background.
o I also extended the black of the blog’s background left and right as I did with the Home page.
· ART PORTFOLIO Page
o First, I’m very proud of the Art Portfolio page.
o I really liked the photo album set up that I have on my GoDaddy site, but I could not find anything similar with Wix’s options, but I eventually found the album that is there.
o I found the photo of the white brick background, light, and empty pedestal and immediately knew that I wanted to put the album on the pedestal.
§ With the photo album I took the “portfolio” image that I removed the background from and used it at the album cover.
o I also kept the background of the main area transparent so that it’s all the old paper image.
· ABOUT Page
o This page’s icon was another that I had found and edited. Originally it was a black frame and silhouette with a two-toned blue chevron pattern behind the silhouette and matching tones on the banner. I removed the background and the chevron pattern, changed the color of the banner to one similar to aged paper, typed “Penner Dreadful” with the same downloaded text as the banner (Tox Typewriter) and warped the text. I could not save this one as a PNG, so I saved it for web as a GIF and it added the jagged white lines. I’m not sure how to change it but I think it adds to the look of the icon.
o I kept this template’s area semi-transparent to emphasize the text and icon.
o I also underlined the section titles because they need a bit more of a distinction from the rest of the text.
§ I changed the color of the quote so that it is more separate from my own words.
· CONTACT Page
o This page is very simple. Instead of “contact us/me” I changed the text to “Reach Out” because it seemed less formal. I also added the crow because they’re occasionally used as messenger birds but are well known in some cultures to be messengers of the dead, so I thought it fit.
o The form is just a template that the site offered, and I don’t feel that it needed to be changed, except from the original style to another more simple and black one.
o I kept the background transparent to keep the simplicity of the page.
UPDATE: I switched hosting sites which may be causing issues with the links and the old site is now deleted. Here are the screenshots of the original page taken on April 2, 2020:
This was the "main" page which was my blog.
This is the About Me page.
This is the contact page.
UPDATE #2: Professor’s critique | Art Portfolio page | 4.22.20
· I took the original page and broke it into 3 pages:
o Main Art Folio Page
§ With the original images that had linked to the photo albums and now have new links to the two new pages (below).
§ The photo albums were an issue because the albums were full screen with no left and right borders—I gave up on fighting the photo album editor and decided to put everything directly on a page.
o DIGA1010 Projects
§ I actually had to create this page twice because you cannot delete the photo albums link, you must delete the entire page, which I discovered after arranging the page how I wanted it.
o And Commissioned Works.
§ Which is new. I have added some work that I did this past week for a friend of mine.
UPDATE #3: Professor's Critique | DIGA1010 Projects page | 4.26.20
I did more work on this page. I centered everything; titles, photos, and text descriptions. I also made each image/text uniform: title above and description below each image. I also figured out how to make the separation between the description text and the title of the following image equal. I made sure none of the text boxes and images were bigger than 685px so that nothing goes from edge to edge, it's all centered with good-sized margins. In addition to changes made to the layout, I shortened the descriptions for each image.
I did more work on this page. I centered everything; titles, photos, and text descriptions. I also made each image/text uniform: title above and description below each image. I also figured out how to make the separation between the description text and the title of the following image equal. I made sure none of the text boxes and images were bigger than 685px so that nothing goes from edge to edge, it's all centered with good-sized margins. In addition to changes made to the layout, I shortened the descriptions for each image.
Comments
Post a Comment