In order to fulfil the outcomes of the second studio brief, Design For Web, of the Design Production module we have been asked to design and produce a multi-page website.
Web design is an aspect of the design industry which I never worked in before, however to aide the production we were able to attend three workshops with Simon which introduced us to the DreamWeaver programme, coding and basic web design conventions.
Although from these works shops I was able to create a working four page website, effectively meeting the criteria of the brief the design is is quite basic and not what I envisioned in my design sheets. Therefore I decided to propose the design for my website, by mocking it up on Illustrator a programme I have used several times in the past and therefore I was able to be as experimental with the design as I wanted.
As we already had a template from the web sessions, I would then use this as a basis to code an functional website which could possibly be taken live in the future.
Proposal
From the critiques I attended for this brief, I received the most positive feedback on my design in which each page has a tab which slides out when that page is selected. I believe this design is visually a strong design which I personally have never seen before therefore I decided to propose this design for my website.
I began by creating a document with the dimensions 1024px x 768px which is something we were taught in the web design sessions and a size which works on 94 % of devices.
I then used the guides in Illustrator, in order to mark where each of the tabs would be on the screen, with each measuring 72px.
I also placed a guide horizontally, again at 72px.
When designing I find it particularly useful to the guides as a means of creating a balanced design, however in this case it would also ensure each of the four tabs I would create using the pen tool would be the same size.
I quite pleased with how the tabs turned out, although the take up a large proportion of the screen, there will still be enough space for the content of my pages.
One of the main pieces of feedback I received which I was quite conscious about when producing the design for my homepage was that the type on the tabs may make the page seem 'text heavy' and busy. Therefore I experimented with a range of point sizes and type styles before deciding on a final one.
I believe in this design the point size of the typeface is too large and could possibly take away from the content itself.
After testing out the type in a range of point sizes, I believe this point size is the most appropriate for my design as it is not so large that it would distract the audience from the content of the site but it is not small that it would be illegible on screen.
I quite like the idea of capitalising the titles on the tabs in order to differentiate from the body copy on the website, however again there is the possibility that this will distract from the content.
One of pieces of feedback I received in the critiques we were asked to attend was that perhaps instead of including the 'HOW TO...' on each of the titles of the tabs I could use it more of an overall title, thereby shortening 'How To... Create A Successful Campaign' would become 'Creating a successful Campaign'. I believe this idea has been particularly effective in my design, as it appears to be less 'text-heavy'.
Ideally, when each of these tabs were selected it would physically move to right to reveal a page of content, for example if the 'Creating A Failed Campaign' tab was selected both the 'Creating a Successful Campaign' and 'Creating A Failed Campaign' tab would move to the right.
I therefore began mocking up the individual pages of the website by moving the tabs from the left hand side to right hand side of the screen when appropriate. I would then be able to add the content of the individual pages later.
'Creating A Successful Campaign' Page
'Creating A Failed Campaign' Page
'Appealing To Different Target Audiences' Page
'Using Tone Of Voice In Campaigns' Page
I order to create a design which is simple and could easily be interacted with by the viewer, I believe it is imperative that each of the tabs is clearly differentiated from one another, therefore I looked into colour as a concept to achieve this.
I began by looking in the swatch library at the 512 web safe colours, which is something I learnt in the web sessions I attended with Simon.
From these 512 safe colours I began selecting making colour palettes in order to determine which four colours worked well together, I started by just selecting four swatches of a similar hue however, I also found effective to create four swatches by creating tints.
As my website will primarily be aimed at small companies / business I didn't want to choose a colour palette which was too garish and could perhaps look unprofessional. However It would not be practical to use light hues which would not be visible on screen.
I eventually chose a dark navy blue, which as well as being quite professional is gender neutral, and created three tints of this hue by decreasing the opacity by 10% each time.
In the first design in which I had decreased the opacity by 10% each time, there was not much difference between the four hues, therefore I decided to decrease the opacity by 20%.
Although the final hue is quite light it is still legible on screen and would therefore be appropriate for my website.
Once I had chose the colour palette for my website I was then able to start adding the content of each of the pages.
There I began by sketching out some thumbnails of possible designs for the individual pages of the site using the 'rule of three' grid which I discovered through research of existing sites had been employed in various design for web. Ideally to give a sense of continuity and uniformity throughout the site I wanted to adapt one design for all of the pages.
'Creating a Successful Campaign' Design #1
In order to create a website which the viewer would find easy to interact with I wanted the website to be as simple as possible which I believe is reflected in my designs.
One of the concepts I had for the content of my website was to create a list of the sort of 'ingredients' you would need for a successful / failed campaign similar to what you would find in a recipe gook. Which I believe would give the website and the content a more light-heart feel to it.
'Creating A Successful Campaign' Design #2
I don't believe this design would be effective on screen as it appears to be very text heavy which could discourage the reader from reading the content/
'Creating A Successful Campaign' Design #3
Although I like the use of a 'separator' to create a simplistic, clear layout I do not believe this layout is effective as there is no cohesion in the design.
Overall I believe design #1 is the most effective design for my website as the layout is structured and clear and does not overwhelm the viewer with information.
'Creating A Failed Campaign'
Once I had decided upon a layout design for the 'Creating a Successful Campaign' page I was then able to apply this to the 'Creating a failed Campaign' page in order to create some consistency throught out the site.
'Appealing To Different Target Audiences'
'Using different Tone Of Voice'
No comments:
Post a Comment