ICCYL, the company that I rebranded earlier in the year approached me and asked if I would be willing to design a website for them. Web design is an area I have had little experience in so at first I was dubious but I had some ideas and I wanted to ensure that my brand was applied correctly and effectively. As they say, If you want something doing right, do it yourself.
As web design is an area that I am inexperienced in I made
sure to do a lot of research. I
used Awwwards.com alongside
various other blogs to see
effective and current web design.
I mainly focused on one page
scrolling sites as this was a
format that I wanted to utilise.
I also looked at the use of colour
in web design as I wanted to
incorporate ICCYL’s brand
colour scheme heavily.
I drew up some scamps, above are a couple that I liked the best. I wanted most of the information to be on a one page scrolling site but with clear separation between sections of the site. I wanted to use colour to separate the sections as I feel the colour scheme for the brand is really nice. The conferences are aimed at children and young teenagers so having a colourful site will appeal to this age group. For the same reason I wanted the site to be dynamic and responsive. I had ideas for responsive functionality but I have very little knowledge of css so I decided to enlist the help of a friend.
There are a few ideas that I discarded such as using the logo shape for the menu buttons and also as tabs for the top of each section of the site. I didn't want to overuse this shape. I did however want to incorporate the curved edges of the logos into the site somehow. I decided to use this curve at the top of each section. This makes the site unique and gives it a less corporate feel.
I sent over a digital mock up of the site to the web programmer, outlining what I wanted and where. As you can see there is a few different pages on this mock up but with Patrik we spoke about ways of bringing the page numbers down; I wanted to keep the site as simple as possible.
We decided that rather than having a separate page for each conference, the information that would have been on these pages could expand underneath the logo as shown above. I decided to keep all the type central throughout the site, mimicking the logos. There are no particularly large bodies of text so legibility isn't really an issue and the centred justification works better with the arcs at the top of each section.
We did have some problems with these arcs when coding the site. Depending on the resolution of the screen and the size of the browser window the size of the arc could change drastically (as is shown in the above screen grabs.) With some hard work from Patrik we overcame this problem so the arc was uniform across all screen resolutions.
We decided to use OpenSans as the typeface for the body copy. This is similar to Gotham but is more legible with bodies of text, it is designed to work well on screen. Also the typeface is a webfont so we would not have to code the font in. We did experiment with a couple of serif typefaces but they didn't fit the aesthetic of the site and the sans serif is more appealing to young people, one of our key target areas.
The menu bar was fully functioning and would take you to whichever page you needed. However as soon as you scroll past the about us section it was no longer visible. This was an issue, although you could always scroll back up the site, ease of use is a key factor in this web design working. I decided to keep the menu bar as a fixed element at the top of the page.
The clients were really pleased with the resolved
website design. We are waiting for a few images
from the conferences this year to complete it and
then we can attach it to their URL.
Click here to view the site in action.
0 comments:
Post a Comment