As i was on with designing all the branding products for my personal branding, i wanted to design a website for when i was going to the studios that i had contacted about placements. I thought it would be good to be able to direct them to my website and having something there about myself.
When i came designing the website, it was very close to the studio visit and interview that i had with one of the studios i had contacted, so i didn't have time to code a full website with all my work on. Instead i decided to build and code a holding site, this would display me as a studio / practice and redirect the users to my behance, cargo and tumblr to see my current work.
To start the design of the holding page i created a scamp, this is a to scale version of the website and shows me how it will look when live on the web. I have used elements form creative cv and invoice and quote sheets to create the main title of the holding page, which as a holding page i think it the sort of thing i needed for it.
As you can see i have carried through the 'hi' speech bubble which again welcomes the user and makes it more personal and more approachable to contact me.
The holding page displays that the website is coming soon, but the user can view my work on the various networking sites. These are displayed as icons and the user simply clicks on them to be redirected to the websites.
Website scamp to give an overall view of the website and i used to work up the relevant elements of the design so they could be produced for the web.
The icons for the following networking sites, which display my work were created in illustrated and i made simple icons to display these.
Behance
Cargo Collective
Tumblr
By creating the icons myself i was able to keep them consistent with the main accent colour of website and with my branding. This again ties everything together and makes it a full body of branded products.
Coming soon section, this was the initial wording of the body copy, but i later changed it to the one below because this identified it was going to be the website that was coming soon and just made it clearer to the user about it.
The main title area and design is taken from creative cv and displays my name and the area of design that i specialise in. The 'hi' bubble is again worked into the design to make it more personal and approachable.
This is the final design of the holding page and how it is displayed online. When creating the website, i have centered all the elements of the design, this makes it better for viewing over different sized screens, as which ever screen size is used the design will always be scaled and centered within the screen.
For the time being i am going to leave this as the website design as it directs to websites which have all my current work on so clients and studios can still access these, i am going to work on a full website over the summer when i have more time to take my time over it and make it the best i can.
I have the proposal of the design ready and know what i want to create for the website, so when i come around to designing it, it should be easier as the idea is already there.
Website Proposal
For the design of my website i want to keep the style of the holding page above running throughout the website, as i like this aesthetic and it is in keeping with the branding material too.
The homepage of the website. When the user first goes onto the website they will be greeted with this screen. This is the same which i have used on the holding page. It introduces me as a designer and what disciplines of design i do.
The website is designed around scrolling down or clicking the arrows to navigate through it, i thought this would be more interesting and a little different to use as a portfolio website. The user can also click on each link at the top of the page to access each section of the website without having to scroll through it all.
The next screen which the user will see is the about page. This displays information about me as a designer. It informs them about the design work that i do and my work ethic. It is only brief, but gives the key information about myself. At the bottom of the screen there is a link to download my CV, this will provide the user with further information about me and something they can keep or send to other people.
The project screen displays all my work. This will contain around 6 different projects, which i feel best show me as a designer and my abilities. At first the user will be able to scroll sideways through the different projects to get a first look and description about it. I have included the disciplines that are involved within the project. At the bottom of the description there is a link to view the project.
Once clicked on that link, the images of the project will be displayed full screen on the website. The user can then scroll through these images by using the arrow buttons. To get off the images and view the project screen again they can either click the close button in the top right corner or click on the project link again.
By having each project displayed like this on the website, it takes full advantage of the screen space and will display the images in the best quality and as large as they can to show them off and make it as best visible as it can be for the user to view. I think this looks aesthetically better being full screen too.
The last page of the website is the contact page. Here the user can view my contact details. On the email address they can click on it and it will direct them to their email program to send an email straight to me. My contact number when clicked on can be downloaded as a contact card to be loaded onto any smart phone.
There are also the links to my other sites to view my work this includes: behance, cargo and tumblr.
At the bottom of the screen there is also the links to download my CV or request a promotional pack.
I feel that this page is vital to the website as it holds all the information for the user to contact me, i have designed it simple so that the information can be easily seen and accessed, to make it clear what my details are.
I think as an overall design, this website will be in keeping with my branding and communicates me as a designer well. I think the design of it and the way in which it works, is different from an ordinary site and makes it more interesting and interactive to look through - the idea is that it represents the way in which i like to design and produce products - I tend to do interactive products and use different formats and sizes etc. This website shows that but through a digital format.
I like the idea of the full screen images for the projects, which i think will show off the work to its best potential and having it so big on the screen takes advantage of the screen size and makes it the image communicate to the user as they can all the smaller details and get a good view of the work.
Over the summer i am going to try build and code this website and hopefully have it up and running towards the end of the summer ready for third year which i can then keep adding to and always have an updated portfolio which anyone can view. This should put me in a good position for getting myself out into the industry and being able to hand out my business cards to clients and studios knowing that the website is there and shows my work at the best possible way to them.
Im looking forward to start building this and get back into the flow of web coding.
No comments:
Post a Comment