Portfolio Showcase Assignment: Creating A Webpage 2

Task 2

For this task we are now ready to begin making our personal websites. Previously before this assignment I’ve been making a website on Weebly in order to look more professional with my work, get more commissions and the fact various people on DeviantArt has requested it. Since I can’t use it for this assignment my decision has been I would like to make one on Serif WebPlus6 like the one I already have on Weebly. Obviously I’m going to change the designs like house styles and such, otherwise the content will remain the same but purely for college portfolios rather than other hobbies I have. Another thing I would love to incorporate is my DA page, Deviant Art is pretty much my digital showcase and has been for years, and collaborating with Youtube for any animations I may have done. If I get the time on Deviant Art I would like to create a personal journal, box designs which will include the following information of:

·         Art Trades, Collabs and Requests

·         Commissions and Prices

·         Cosplay Watch

·         Friends, Inspirations and RL Buddies

·         F.A.Q and Artist Statement

·         Terms and Conditions

Planning Considerations and Site Management

As mentioned above the website I have to make I want to basically resemble the same or at least similar order as the one I already have. Now the assignment states the website will be for a digital portfolio of our work. What I what to appear in mine at the least is a short biography about me so that people know what I’m about, have achieved and what I can do. Some pre-college art and animation work, college work and personal work which will be linked to other websites such as DeviantArt, Youtube and Blogger.

Now the reason why I’m adding pre-college work is because I want to show my audience how far I’ve progressed with my art since college, during college for different assignments and FMP work to personal pieces that are for my own projects or for other people. This means that I’m constantly trying to improve what I can do in order to achieve what I want to do which will obviously be linked within the bio.

Below are screenshots of the website I’ve nearly finished on Weebly which will show how my website is going to be structured.

Art Gallery

Now this is where I will be ending my new website to as the Art Gallery will be having a main page which will lead off onto sibling pages that aren’t visible within the navigation menu. Below is an initial concept of how this will pan out.

Now I’m going to show you how each piece looks like:

So now that you can see how the layout of my website will be, it’s main focus is on my art and how it’s progressed since secondary school to now as well as the different types I’ve done.

Pre-College Work- This is mainly works I did for GCSE Graphics and Secondary School which CAD seems like the beginning step to Autodesk Collection.

GCSE Art- This leads off into three separate projects we had to do in order to gain our marks.

~Project 1- Music

~Project 2- Animals and Backdrops

~Project 3- Animals

College Work- Every piece of art from sketches to models will be placed here.

Studio Work- This is my own personal pieces and again splits off into three different sections.

~ Section 1- Elemental Wolves. This is my biggest project I hope to one day turn into a story and animated series.

~Section 2- Secrets of the Guardians. So far my plans for this story are to be turned into a manga.

~Section 3- Saki of Miu. Finally my last project that will hopefully make it as a story only

Photography- This is basically pieces I’ve either taken myself or photo-manipulated to give of a mythical feel.

Specifications

Already I’ve mentioned a few that needs to be included in this website and this has been:

Ø  Needs to be a digital portfolio

Ø  Must represent a certain area in our work- art and animation

Ø  Must have links to other websites (Blogger, Deviant Art ect)

Ø  Must have a certain house style throughout

Ø  Be unique

Ø  Represent us as individuals

With my plans and I suppose what I’ve already created on Weebly, I’ve already met these points only I now need to incorporate them within the website I’m making from scratch.  My plans from now are to focus solely on one page at a time until the pieces of my art need uploading onto the website. So far I have begun work on the home and bio page creating an icon of an owl that will be the mascot for my studio and hopefully later little decorations similar to the cherry blossom flowers I have on the Weebly site.

                                                                                                                                                                            

Design Schedule

Although this will be on my on my Gantt Chart as well I’m hoping from now (20.05.14) until 25.05.14 that the basic structure of the house style and pages will be in place. After that for the next week I would like all my art uploaded and then that leaves me an extra week to conjure any other pieces of art that needs to be added to the website. Hopefully during the nest 2-3 weeks I will be continuously testing my website to make sure it’s in full working order.

Testing Log

More Testing

So above we’ve been able to see each page as it is and if there’s any problems laced within. So far nothing seems to be amiss apart from one page missing two photos. The hyperlinks on the pictures above work well and immediately direct people to the webpage I want them to visit, whilst the buttons allow people to navigate well across the website if they’re searching for a specific thing. Now during the preview we’ve seen the flash presentations working correctly with all the pictures being showcased along with similar music playing across each sub-page of artwork.

However if people wanted a simpler way to add social media icons and multimedia pieces into their website, Serif has designed easy alternatives we can use. Reasons as to why I didn’t use any of these is simply because I like the idea of designing my own icons to represent that webpage I’m on and make it fit with the similar house style as follow through the rest of the site.

So far I’ve included image, music and text which means all that’s left for me to do is show proof of search engine optimisation and add in video. My plans are actually to create another sub-page under both college and studio work named: Animations. Here I’ll be placing YouTube videos of my animated work onto this page because I’ve done things for college and my own personal practices of flowing movement. So here we go:

Search Engine Optimisation

This is where we can create ways for our website to appear in search engine results; so far I’ve incorporated hyperlinks into my site which is one way to optimise my website. Another is to go into the site properties on Serif X6 and type in keywords as I’ve done so below:

All that’s left now is to publish my website on the web, simply go to the top of the menu selection on Serif and click on the icon that shows a computer screen partially hidden by the Earth. In its menu selection click on ‘Publish to Web’ and then it’s done.

Testing By Others

Here I’ll be asking my fellow peers to test my website, see if they can spot anything wrong and what may be improved, before I begin to evaluate my website.

Evaluation

When we began creating these websites I didn’t really want to spend too much time on this because of two reasons. One being my role within my FMP group is to be not only the artist but the animator as well, creating the opening cutscene has been strenuous but in the end I can see all the hours I’ve spent on it has paid off. The second reason was I had already created a website on Weebly but because I haven’t done any of the coding myself, it’s meant I couldn’t use that site but my plan was to base the one I’ve now made on Serif X6 on the one I’ve done on Weebly.

Has it worked?

Surely I couldn’t completely copy what had already been done so I’ve followed a similar colour scheme of white, pinks and brown yet added in a little a blue which is my favourite colour and mixes well with the colours above. Sticking to those lines I’ve created extra pieces such as the Owl Side-Banner, which is the owl sitting on a branch. The little icons that show which external site you’ll be visiting, the header in a set word art and finally the KawaiixFukuro mascot owl- all created in Photoshop, so why owls? KawaiixFukuro stands for Cute x Owl in Japanese hence why these animals are important and they’re also my second favourite in the Birds of Prey list (Sparrowhawks being the first and Eagles being third)

With the pages I decided to keep to the art side of my original website as cosplaying, model horses don’t fall under a digital portfolio for college in a sense.  Yet all the art pages I had included on the original is now the same on this one and works quite well giving people a show of what my art level was before I started college to how it is now and the different forms I work with.

Testing and Fixing

To be honest testing seemed quite easy because my plan was I’ll make my website first and then begin testing for bugs. After pointing out the initial faults like the photographs not being there, I was quite happy that when I introduced my website to my peers, who had agreed to test it, that they had managed to find faults that could easily been fixed and already have as shown above.

All in all I feel I’ve accomplished what the criteria has asked of me, I’ve been able to produce a digital portfolio that’s referenced to all my work for both college and myself. On the webpage I have followed a house style throughout, added in images, music, text and video as well as showing evidence for search engine optimisation. Going by the comments others have made all are in agreement my website has been well created, easy to navigate and demonstrates the purpose of why I’ve created it.

If I were to do this piece again, my next steps would probably include more hobbies of what I do such as the cosplaying, video-editing, model horse making, or improve what I already have by changing the design completely instead of making something similar to what I have done on Weebly.