Website Me

Initial sketches! I played around with a few different layouts even though I did have an idea in my head already, just to see if I could create something more appealing. NOPE. The second image shows the refinement of my site planning. Where i wanted the header and footer, links, content, any features/widgets, and so on.

Screen Shot 2016-08-09 at 12.29.57 am

From developmental sketch to creation in Adobe Muse. I set my master page up in this manner, following my sketched out plan. I created a header box at the top of the browser, anchoring/pinning it to the top to avoid it scrolling up. Adding a horizontal menu, brand name and my refined logo. I chose the base colour of pink by looking through my illustrations and previous work handed in and noticed that the colour pink was a common choice I was making. Unintentionally my brand had already started. I decided on this specific pink as it’s not too harsh or in your face, but isn’t too light that’s it’s a baby pink and girly. Instead I feel like I’ve managed a nice in between pink that portrays myself as fun.

I also checked typekit to find a suitable font for my brand. Again I needed something that could be considered fun, and creative, but nothing that would be hard to read and silly. Screen Shot 2016-08-09 at 12.34.36 am

Very quickly I found the Acier BAT font family. I originally planned on using the Acier BAT gris font for my header but found there was too much going on with the half striped fill, so I opted for the Acier BAT Text Noir as it was the same but a solid fill rather than striped. Because this font was more complex I wouldn’t want to use it everywhere on my site. So I decided to get the solid fill text to use for the menu bar options as well as general text throughout the pages. I saw the Acier BAT outline text and decided to add that version as well, which I then made a scroll over effect for the menu bar. Screen Shot 2016-08-09 at 12.30.22 am

To create a sense of connectedness, I filled the drop down menu with the same pink. I also gave the submenu scroll over effec text change to outline for the same reason.

Screen Shot 2016-08-09 at 12.31.50 am

After adding in the same coloured footer, I pinned it to the bottom of the browser, making sure I resized it to fit the browser width. On the right hand side of the footer I placed the copyright indicator followed by the current year and my name. On the left I included social media icons, with a 50% transparent mouse over effect and hyperlinked them to their relative accounts, apart from facebook which I don’t currently have for my art.Screen Shot 2016-08-09 at 12.53.38 am

On my entire site I have one drop down menu which is for the Projects page. However I don’t actually want a ‘projects page’ just a header Projects with the sub menu pages the actual projects with linked pages. To do this all I needed to do was simply right click on the projects page, choose menu options and tick Include Page without Hyperlink. TADA.

This lead me to starting my first web page, the Work Page. To me this is the most important page for the site. I decided to make it my home page as it acts as the portfolio, its what people are coming here to see. To do this i stuck to my sketch plans.

I set up all my illustrations on this page with two or three images per row. I also made sure I left a white border between each image to repeat the themes that Andrew Archer uses for his site (See Brand Me).

To create some interest on the work page I added custom HTML to create a zoom mouse over effect. I also added hyperlinks for each image that would lead to their corresponding projects page which would include more images related to that piece as well as a description.

HTML used:

<style>
.work img {
transition: all 0.4s ease 0s;
transform-origin: center center;
}

.work img:hover {
transform: scale(1.2);
}

</style>  [1]

The “.work img” coding is what I had named my all my images that I wanted to have the zoom effect. I set this up through graphic styles in muse.

I created this layout for each project page to create a sense of similarity and connectedness. I did this using the widget tool in Muse. I then moved around each aspect till I was happy with the layout, this included changing sizes to get the right balance. For the Pride Series page, each sub Title (on the right) and description changes with the picture. I took of the automatic play and made it so the viewer had to physically change the image by clicking on the thumbnails to ensure that they can spend how ever long they want looking over the image and description without it automatically changing. I also changed the normal opacity of the thumbnails so that only the active and mouse over options would be bright, making it easy to differentiate which is not active.

Screen Shot 2016-08-09 at 1.24.56 am

For my about page I went with a very simple layout. A simple about me paragraph with my contact email. I had intentions on illustrating myself but I didn’t have time to finish one and wasn’t happy with one I had started so instead went with an alien version of myself from the comic I had created. I did this to carry on my theme of fun as well as actually explaining more about myself than a normal image would.

Screen Shot 2016-08-09 at 1.25.04 am

I decided to add a store page in because I know I want to be able to sell things on my website, such as general merch. However I didn’t get around to taking professional quality images of the prints or stickers I made so instead decided to simply write coming soon on the page. I played around with the placement and then added the falling hands illustration that was also apart of my comic into the page to insinuate a want or need for the store to be active. I played around with the idea of making the hand part of the word, the c, however I do believe this needs work.

Screen Shot 2016-08-09 at 1.25.18 am

My final page is my contact page. Since I have included links to social media as well as my email written out on previous pages I decided to only include an email widget for viewers to send a quick email to myself, to make life a little easier. Again, I also added an illustration in to continue my theme and brand.

Overall I think my website and brand are very successful. I believe they represent who I am as a person and artist. The colours and themes used throughout the site help achieve this and my minimal use of visual effects or anything else crazy help maintain the professional website level. There is always room for improvement, but I believe I have achieved a great start for my future career. Now I just need to go live…..

References.

  1. https://www.youtube.com/watch?v=1X3wPEMp85I
Advertisements

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 )

Twitter picture

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

Facebook photo

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

Google+ photo

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

Connecting to %s