Portfilo Website🌟

Oh joy to bring this back up. This was a portfolio website design task I had last year. The basic idea was to make a 3 page draft of what you want your portfolio website to look like and me being me of course I covered mine in blue and yellow put stars everywhere and made it my own! I really liked the final project and still think it is a good base of what I want my website to look like but I still want to edit more to something much more sleek and clean. If that makes sense,  but for deficient there will be stars the color  blue! 🌟-Alex 7/10/16

Chapter 1: A new Beginning

logo-colour-change

As Designers it is only natural we think, wow what the hell was I thinking when I made this s**t, I have done this a good few times. And I decided after a year my logo was bothering me but I could figure out why and I realized it was the color scheme of my logo and branding. The main blue was just to dark I think it was actually the default blue in Photoshop that In used as a place holder and for to change and the banner/wing outlines color was just not my favorite. They just didn’t really work together they kinda just all were to different from each other and were begging for your eyes attention. So I gave it a little makeover giving it a lighter much happier blue for the main color of my logo and branding and keeping the same yellow and giving an light powder pastel blue as an accent color for the banner and wing outlines to me they just blend together a lot more.🌟-Alex 11/10/16

Chapter 2: Header for the better

A header! what is a header I ask you! I header is the top model, It has the x factor it is the crown of your website for god sake. And that is why I have will make the best header for the best website my website.

These are the headers I am talking about. They are foundation of website they make the website whole the are you guide in navigating your website so I really like how the first two are big and colorful and are what your eye goes to first. While the other twos header are slim small and simple nothing to complicated and just really draws attention to work on the website.🌟-Alex 14/10/16

So headers yea I have dabbled in the art of the header but we all have a past it was back about a few months ago I was young naive designer. I wanted to create an online store to expand my work basically. So I worked on a shop layout and colors so I did just that and made some headers in the process.

The white header was my first draft of a my header journey I just wanted something simple that would display my name and look cute and fits with the images of my theme stars and junk usually. The white didn’t really stand out with my colors at the time so I decided to go darker and give everything an outer glow. The second header I prefer a lot more it just looks cleaner to me and looks better with my main colors and really pops a lot more so I want to go back to the direction in terms of my header for my now website feathering my name and chibi logo character. 🌟-Alex 19/10/16

Headers are no joke I found myself struggling to decide what I wanted for my header so I did what I do best. Slack off and went on Instagram and then it hit me I follow amazing artists who inspire me so why not check out there websites the ones I had from before where ones I found really through googling so I liked what they where doing but I didn’t love what they where doing and what I found some pretty good results since these where artists I love and liked. It was only natural that I would love there websites too and they where great fuel for my creative juices I must say!

mary-doodlesnina-stajner-websitesparkle-collectivekarren-kavvetttorianneheather-sketchbaylee-jaeannika-victoriaannika-victoria-2

Some background on some of these people some are youtubers/artists some are crafrters  and some are merch sellers, basically they all creative people that inspire me!

One thing I liked was that a lot of them had very creative headers some where like signatures others where like illustrations in there own wright. It was really embodying the loom I wanted and feel I wanted to go for. The header basically being the main focal point with it being with color and only slight to little decoration around it.

I liked how a lot of the illustrators home pages feathered work they had done recently. Showing the main focus on there work and illustration style as a whole. . 🌟-Alex 21/10/16

So after viewing  some nice headers I decided to sketch out my own! At first I was thinking just my name in a nice type-face hand drawn font and my little logo head in the corner with some little wing details along with some stars.

img_1974mock-up-header

And here it is all made up I like it but I dont love it. I really liked how the artists headers where very much like a hand written or signature more than font type face so I think I want to head more into that direction but this is a good step in the right direction.

🌟-Alex 23/10/16

bannner-headerbannner-header-w-logo

Behold the header is born! Ok well this is something I am planning with I think I jumped into the header to fast when I really should focus on the structure of the website then the decorative header!  🌟-Alex 26/10/16

Chapter 3: Home is where the start is.

So next is content of the home page and the structure of the website!. At first I was thinking about there being some art pieces of my own but then realizing I am very lazy when it comes to making art so I dont have a lot of content to really add to the website.

home-page-sketch

baylee-jae

I liked this design/layout from this website here by the artist Baylee Jae. I liked the clean look and white space there is not other colors or decorative material on the page making the main focus on the art! Which I like so that where my main inspiration for the this sketch and idea come from for this page! Also I want to include my social media links on this page!

Next is the “Bio” page just writing a little something about myself and I also have to add my C.V in to the website and this is where I am planning to do so! I am not allowed just attach a image of my C.V to this page I have to write and style text in this page and make it text and make a nice layout for my text!

Bio page Sketch.png

So this what I was kinda a thinking I photo of me on the right to show I am human and not machine and junk. And then a little paragraph with a header text “about me”.

baylee-jae-bio

Miss Baylee Jae`s bio page is pretty much what I am looking to do but I want to add two more little sections or headers such as “Education” and another for work experience to kinda turn into a secret C.V!

Next Is my work Page!

I started to look around since I didn’t really know what I wanted. So when looking through I saw some people separated there work pages in sections based on subject matters of the art work. Honestly I could see this being useful but since I haven’t got a large amount of content and that making a lot of other pages I thought I would leave separating my art and design work into different section another time when I have massed a hugh amount of work.

md-work-page-2

I found when I went into the different sections I found this 3×3 cube structure I like this. It was clean and sleek and I liked how I could have little windows or previews the part of the image and then when clicked on it would show the full image in full size.

 

This is the basic concept I saw and wanted basically I want a 3×3 cube layout with each image square being the same size and having a close up of the main picture so when you Click on it the full size shows up I also liked this so I made the work page this layout as well I just plan to have some of my art on some blank products and link them to the website where the products are sold.

But it was at this point I had a thought if I had a “work” page I didn’t really need to display my work on the home page,So I decided to re work the home page abit. I just thought it might look a a little odd to feature the same work in two places on the website. Home sketch 2.png

So basically I wanted to make a welcome sign on the home Page with my social media links. I also had a thought of making the welcome to be a gif and have it go from my brand blue to my brand yellow to give it an extra pop for fun!

So basic design here with the header and some nice content displayed to bring attention to my work. But I felt it wasn’t really representing a home page. So I decided to add welcome to my website! But I felt this was a bit lacking so I decided to make a cheesy gif which usually solves my problems yep covering them with flashing images.

So for the contact page I wanted some basic and just a little fill out sheet where you leave you name and email and then you leave your message. I have seen this done and I like how it looks and how easy it is it has the opportunity where I can have my website emails be sent to a separate email address and allows for a more cleaner and sleeker look rather than say here is my email and then them going off my website to contact me they still stay on my website and might get to see my social links which I want to have under the contact form so when there done contacting me they can maybe have a look at my social media links. Its all part of my evil plan mhahah! and thats my plan for the contact page! 🌟-Alex 27/10/16

 

And now it is time to start the coding of the website! I went for the simply cleaner look for me website mainly cause I have no idea what I am doing and anything complex I will stumble a lot so its is honestly for the best that I choose a simply design.

website-first-draft-screen-shit

So basically I made a the container 1000px wide just to have a nice easy space that was easily divide into a lot of pieces if i needed. So I made a basic block measuring the same as my header 1000×250. I found this to be a nice size, next I moved onto the navigation of the website. I just made a basic menu with links for “Home,Bio,Work,Contact and Shop”. It was at this point I realized that I had not selected a type face to style the type on my website. I looked at the websites that I had before and found.

baylee-jae-bio That in that contact page here Baylee Jae used quite a hand written looking font for headers and her navigation. I also liked for the smaller larger paragraphs she used a cleaner sharper font that was easier to read at a smaller size and I could foresee the decorative header font being hard to read at a smaller size.

So with a small idea of what I wanted I went to google fonts!

glora-halliujah-font-screen-cap

I found this font Gloria Hallelujah it fit the hand drawn look that I wanted to go for the navigation bar and headers.

poppins-font-screen-cap

The second Font I found was Poppins it has a nice clean look and it just is pretty similar to the one Baylee Jae used.

website-first-draft-screen-shit

I then styled my navigation bar using the Gloria Hallelujah font.I then decided that putting the homepage so I went Photoshop and starting made a gif. 🌟-Alex 29/10/16

welcome-gif

So I whipped this up and added it to the home page along my header image with some type that I styled with Gloria Hallelujah.

homepage-screenshot

I set the positions of the gif and the type.

home-page-finished-screenshot

I then added my social media links and yay the home page is finished!..Well the homepage anyway.

Next was the Bio page

bio-page-screencap

The Bio page was pretty simple to together I just honestly added an image of myself type up a little Bio added a section for Education and work experience and just but the type in the positions I wanted and yay done!

Next was the work page!

work-screencap

There was two kinda road blocks when making this page. One of them being simply not having enough content really to put up the page I want to in the future have alot of sketches and hand drawn type illustrations finished. The other was again I have no idea what I am doing I wanted to make of those amazing gallery’s where when you click on one of the images you can scroll through them all and its so sleek and smooth. But we live in reality and of course I tried so many ways that I had researched and not one had worked! so I just kinda gave up on the 3×3 cube amazing gallery. And just added some thumbnail images of some illustrations.The images are linked so when you click on the it shows the full image its honestly the best I could do and I was pretty happy with out come of it. But it work fine and I am happy with it! 🙂

🌟-Alex 30/10/16

The contact page is next!

contact-screencap

and yea this page was very simply to make I used a contact page service template thing so I literally made and account and they gave me the html code for free! So I simply added it in and changed the type to reflect my fonts on the website. The website I used was 123ContactForm. I then added my social media links on the top and this page is done!

Lastly was the shop page…

shop-page So yea the shop page I didn’t really know what to do with it since my plans for 3×3 cub layout didn’t really work out I kinda just left it. It is unnecessary I dont really need it to get any hire of a grade on the assignment and sometimes you have to hold back I will go back to it one day. But honestly it was just gonna be a work page 2.0 but the only different was that I was going to my work featured on some products from RedBubble.com

winky-kitty-shirt

Like this basically but its something I can leave on the back burner!

And with that I am finished it was an eye opening kinda experience I learned a lot for sure and I am pretty happy with my finished project so Thanks for reading! 🌟-Alex 1/11/16