IXD102- Website essay wireframes & sketches

I drew out a few simple wireframes of what I wanted my website to look like. I included images, text, headers and titles. I want my website to be simple and sleek since its based on graphic design, and I want it to look professional and have a complimentary colour palette.

 

Taking my mood board below (I have created previously) I have sketched out some possible design ideas and layouts for this essay and I have used this as key inspiration and reference.

Wireframes

 

I have sketched out that there will be 5 pages;

  1. Introduction
  2. First artist
  3. Second artist
  4. Third artist
  5. Conclusion

After sketching simple layouts I advanced onto slightly more detailed sketches and ideas, I began with looking at a range of layout sketches with colour.

 

 

Final layout sketches:

Below is my final layout sketch for my website essay.

 

 

 

CSS Ideas and planning

This sketch below is a plan for some icons I wanted to draw up on Adobe XD which I wanted to include in my website, to give it some personality and a graphic design feel. I have decided on a blue and orange colour palette as it is complimentary, balanced and stylish. I think this page has given me a lot of ideas for my css designs.

 

Digital Sketching

Taking my sketch ideas I moved into adobe xd and I made it digital, below is the icons I designed to put into my web essay. I took Kare’s design and changed the icons form black to this nice shade of orange! I wanted my website to be colourful but not too overpowering, I like the minimalistic feel these icons give it and I think this will be a nice touch to my website. I created both orange and blue icons, I am leaning more towards the orange as I feel it is easier to see and appears more clear to the eye.

 

 

Reflection

Moving on from this I will develop my website essay and design it using css and html, using the above sketches and ideas for inspiration.  I am excited to see where this project takes me and what the final website essay looks like.

Leave a Reply

Your email address will not be published. Required fields are marked *