Monday 12 December 2016

‘MMc403.2’. Self-directed Website design

Self-directed Website design 


-Show steps taken
-Show how the design elements were created 

Useful links; 


(21/11/16) Brief; 
Design a website for your personal design company, research into the steps you will need to take to create website design's, and produce:

 -(2) Mood boards that show two different directions for the website
 -A style tile that shows the UI elements I could potentially implement
- wireframes that represent the layout of the website
- A set of rendered web designs that are industry standard
- A Style guide 


Other design companies websites to look at; 

https://wearejh.com/ Nottingham 
Inspiration; 
For inspiration I've screen shotted designs or images that I feel are nice and that are worth referring to when creating my designs...




















Action plan & deadlines; 

Week Commencing 21st Nov:
 -Update Design brief
-Research Local Market 
-(2) Mood boards (due: 25/11/16)
-Style Tile (due: 28/11/16)

Week Commencing 28th Nov:
-Update Design brief 
-Wire frames (due: 05/12/16)

Week Commencing 5th December:
-rendered web designs (due: 12/12/06)
-style guides (due: 12/12/16)
                                       
Steps taken; 
(mood boards) (22/11/16) I began by establishing a colour scheme and adding Images I thought invoked certain feelings, 
as well as adding type that complemented the images... 
I used the website 'unsplash' https://unsplash.com/ to find images. 


Mood board (2) (24/11/16)
for the second mood board showing a different direction of ideas. I went with a more more industrial feel...

I started following an account on insagram that posts recent Ui trends, it has given me some good ideas.. 
I found more inspiration on Instagram, the images on the web page gives me a good feel of what images of that nature will look like on a website... 
I found a logo that I think is really cool, I will keep it in mind and use it as inspiration when creating my style tile.. 
Style Tile; (began 25/11/16)
Creating the UI elements, logo, Typography, buttons, colour palettes and images... 


-I picked the colour pallet from my first mood board, i think the colours contrast really well and have a nice feel to them. The font I used is "coolvetica", it is bold and not too formal. 
-I chose a pattern based on the colour scheme from my mood board.
-I followed a style tile template that I found online, as well as closely using the presentation provided form Chris Bailey, a local Designer. https://speakerdeck.com/wearejh/design-process-and-deliverables

Wire Frames (began 1/12/16);

also following the presentation given by Chris Bailey, I created wire frames for my website, simple showing the functionality of the website. 

                                     

Web Designs(8/12/16)
I managed to complete the final web designs for the website, 



























Following my mood boards, style tiles and with the inspiration I've taken from other design companies websites i managed to complete the final designs for my website.  
















Style guides( 8/12/16):


-Images on the web page should be colourful and vibirant
[Images should be high resolution]
-Type should be bold and easily readable 
[none formal type]
-Images should provide contrast with the colour scheme 
-Colour scheme should have a palette of mixed colours from dominant to relaxing and 'happy' colours. 
-Images must be visually pleasing.
-There should be space