Website Research
I had to do some research into websites and portfolios and what makes them good to the viewers perspective: things like the general layout of the website, how it attracts and intrigues the viewer to keep looking, how easy all the information on it is accessible to the viewer, the amount of information given, to apply for an application and to access other social medias by the same developer.
Analysing
Primary Research
Here I did some primary research and analysis into other peoples websites and portfolios and made notes on what I found was good about the layout of the entire website and all the information on it and how I would incorporate it into my own website when I make it in production. All of the sites below were provided to me by the teacher.
First Website
I chose this one which I had already analysed first. I personally liked this one at first glance because the layout of his entire website was simple and easy to get around, with its few separate pages from the main lobby page to go too and with the same sort of accessibility to his social media sites, something that I would like to add to my own website.
Ryd Cook
Also, I liked the title card at the home page, it was large and it drew my attention first and informed me exactly what the website was about. The same goes for all the titles in on the pages, they grab the viewers attention which is something I definitely want to add to my own.
Second Website
I also really liked this particular website for its layout. On the home page there is large show reel which can't be missed by the viewers when they get on, this gives the viewers an immediate insight for what's to come, something that might be difficult for me to put together when making my website but still something I want to consider. I also particularly liked this website for its use of visible and accessible video examples and clips, allowing the viewers to better travers the content that is displayed to them unlike the last website which didn't have clickable images.
the other thing I liked about this site was the use of description, the balance between the amount of text and the images and videos. On the home page there wasn't much text other than the title, but was used in greater quantity on pages that needed more description as shown above.Like the first site, l liked the simple design layout of the this website (like the first one) with just a plain simple colour scheme, nothing exotic and wild, and the simple layout of the links to the separate pages on the screen and how its easy to get back to the home page, all of which I would try to incorporate into my website.
One flaw I found in this site and that I wish it had more of were more links to separate social medias.
Secondary Research
Website Guides
Here I did similar research, but this time on random guide sites on the internet that give secondary information on how to make a website better based on my personal opinion and what I feel like I still need to research on.
I looked up a random website on how to make a website look more engaging with basic pointers that I already seemed to cover when analysing the previous sites, but this website basically covered all my research in a simpler and more detailed form, which makes isolating my intentions and plans for my future website design a lot easier and precise: things like the layout, navigation in on the web, colours and content.
There was also another link on this site which took me to another site which gave information about how to make the website "Mobile-Friendly" which allows the website to work on different devices, I found this information useful and would use it in my website draft.
website more mobile-friendly
Ideas for Website Design
The main design choices I found in doing research in the websites above and what I want to be implemented into my final website designs.
- The main theme that my website will be based around will be my recent hobby in animation and stop motion. It will be for viewers who are looking to hire an animator for a short film or for any visual media they are producing.
- Large title at the top of the home page giving a brief description about the website.
- It will also have a large video show reel under the title.
- Then there will be category links under the show reel on the home page to take the viewers to different pages on the web showing more content.
- There will also be multiple social media icons at the top of the home page, which will link the viewers to them.
- There will be three separate pages linked to the home page: one will be called "Content" which will give more detailed examples of the work I present than from the show reel. Another will be "About" which gives more information about the work I do and for other people as well. And the last one will be the "Contact" which will have my email address's and any other way to contact me, as well as maybe the social medias links again.
- The colour scheme for the whole website, and the different pages, will be muted ones like either white with pale blue, or it could all be black with white highlights and parts.
I like the design of these two websites, with their placements of the links and pages on their home pages which is how I want to make my home page like, with the title and the show reel and also how the page links are placed, either above the reel or below it in large picture boxes, as shown below. The one sight I did research into as shown above, Website1, the other one was one recommended by the teacher, Website2. I also liked the colour scheme of the last website above, as well as the colour scheme from this website I also did an analysis, as shown above. I want to have either a black theme for the home page as shown below or a white one, as shown above, I'll decide from a visual observation when I make the first draft and or the feedback I'll get from my piers.
Drawn Designs
I sketched two basic designs for the home page for possible website rough drafts.
Pre-Production Materials
Target Audience
As said before, the main target audience for this portfolio will not actually be people looking for a job in animation but rather a company of some sorts who is looking to hire an animator for their own visual media production.
I chose this idea for my website because, for one thing, I couldn't think of anything else to put on my future website as information, I don't have any other experience in anything else, so I have to base it around this, and as I don't have that much experience in animation to be able to hire or provide jobs for others, I thought it would be best to instead offer my own services.
Font Sheet
The ideal font for my website would be a pretty plain and simple one, like in the websites I did research into at the beginning of this blog page.
I'm not really that fussed about what the font will look like on the web, as long as its something plain and simple as the examples above, nothing too specific or graphic. It could also be something like this, something a little bit more original and creative, but still holding on to that slightly muted theme.
Colour Design
The colour theme will also be similar to the two website I researched above, it will be either a white and bright themed with another light colour, or a black themed with darker colours.
I liked the look of these colour combinations, again, because of the simplicity of them which again follows the theme I'm going for. The main theme of the website could consist of either the white colour palettes above, or the black ones just under it.
Website Map
As displayed above, the websites design will consist of either of these sketch designs, with three main buttons linking to three different pages, and the four social media links at the bottom of the page.
Again, these designs are inspired by the two researched websites I did above, because of their simple layout with their buttons and links and how the viewers can navigating across the website easily. I want to replicate this with larger web links and a permanent home button so that the viewers can get back to home page.After I made the rough designs shown below, and after my most recent lesson, I needed to improve on my website map planning, so I created a new wireframe for my website page, using one of my website home pages as an example but this time creating the multiple other pages that will be in the website that are linked to the home page, and labelled the different tropes and content in more detail. I used this website, provided by the teacher, to use as a bit of reference when I drew the new designs. Website Link
I realised that my first drawn website design wasn't that high quality and need to be improved, and I didn't really now what the standard quality was until after my recent lesson. The website that the teacher presented was also very useful as an example for improving.
Website Home Page - Rough Designs
For this task, I went onto the Wix website design platform which allows you to make for own online website, and began to make three rough designs of home pages on my website for my future business website. I based the designs of these rough cuts off of my plans and research from above.
I found the Wix program very useful for designing these websites, with its numerous features and add ons, I could greatly increase the quality of my designs.
Student Feedback
In this task I had to look at another colleges website design and give them feedback for it, and I gave them my website rough designs, from above, for them to do the same. For this task, I made a quick presentation that covers all the basic ideas and plans I had for my final website design.
The feedback I got from my college was really positive, he liked all of my website designs, with there style and also there features, the clickable's and links. he especially liked the design with the black theme, I'm going to take this into account when developing my final website design and make it the same kind of colour and theme.
Final Website Design
After I received the feedback from my presentation, and completed all of my pre designs work, I made a new website design and started creating the final design for my website, applying all the input I got from the feedback and the research I had done in the previous tasks.
Procedure
I made the homepage of the website the same design as one of my rough draft designs above. I chose this particular colour scheme as it was the one favoured in my feedback I got from my college above. The only difference I made from the original rough draft was that I added only four social media links, as that was my original plan.
I then went on to creating the show reel for the page. I did this by gathering some old and recent animation videos I made in the past and imported them into a program, cut the footage, and put them together in the style I thought was the best, I constantly looked back at other websites showreels to try and replicate their style, and I looked at multiple online sites and guides on the same subject.
After the reel was completed and implemented on the home page, I went onto the next page in I had planned, the Video's page, and for this page, after taking some more inspiration from another previous website, I implemented the video's I used for the show reel and categorized them on the page, I titled the page and added small descriptions under each video, describing the video clip.
After that was done, one the next page, I simply added a small portfolio about myself and about my hobby, how it came to be, what makes it good and what I want to do in the future.
On the next page, I added two both of my different website address and links to them as well, again taking inspiration from another website I did research into. I used my personal Gmail, and my collage Outlook one.
For the last part of the procedure, I quickly set up four individual social media websites, Instagram, Facebook, Twitter, and Youtube, for the four media links at the bottom of the pages in my website. I didn't focus much on the quality or care of the media sites, I just put the four video clips I put on the Videos page on some of the media sites.
At the end, there were some things in my original design plan that I left out in the final website outcome. Like the image in the background on the home, behind the title and the page links, I couldn't find the right images in my history that would relate to the whole theme of this site. The other thing was a small detail with the social media links, in the Videos page, I planned to have the Youtube link a little larger so it stands to the viewer, so they could view my other site were I publish all of my most recent work. But I realise that considering all of my work would be on all the sites, so viewing it on the site would be slightly pointless. Also, I simply didn't have enough time to reprogram all the links on the website to match my original plan.
During the procedure of making the website, I was faced with quite a few challenges that weren't that difficult to overcome, but still took me a long time to complete. The hardest task I had to complete was the show reel video clip on the home page, i struggled to find the right footage for the video and also put the whole thing together, as I had no experience with show reels, I didn't know how the video was supposed to look like. Eventually, I played around with the footage and came to a outcome that I was satisfied with, but after that, I also struggled to find the right background music that fit with the video, which took me twice as long. I eventually came across a tune that I was satisfied with, but still wasn't the best.
Other than that, all the other problems that I was faced with just took a while to complete and didn't require any alternate thinking or a different outcome. Like with the social media sites.
Overall, since I haven't really made a proper portfolio website, I was quite satisfied with the outcome of the website, with its look and content. My original idea was to have the general look of the website look generic and simple, but I feel like this design was a bit too simple and could have looked a little more professional, with the scale of some of the text and placement of the material. Also, just generally, I thought that the main theme of my entire website was not that great, presenting my hobbies as an animator, when I didn't have that much content to present, and half of the dented was unfinished. I should have next time picked a subject about my self that I had more content of, like my work with visual effects and with Adobe programs, all the recent work I've done in collage and at home.
Overall, I think for my first personal website I did ok, but next time I could do much better, taking into account all the problems I made in this one.
Comments
Post a Comment