IXD304 – Sketches & Mock-Ups

After building up my research, the next step in my project is to create a series of sketches based on my ideas. The sketches should be based around the design of my website, as well as sketches to do with branding and illustrations.

I can then use these sketches to build upon my ideas, and choose the strongest ones to begin the development of my mock-ups on Figma.

   

From my sketches, I started to gain a pretty good idea of what I wanted my website to look like – clean, but with a lot of information contained into small boxes. I want the site to flow and make users feel that they are being told a story, with all the facts and background information as well.

Using these sketches, I can then begin building up my ideas into Figma, and finally beginning my process of creating mock-ups of my website.

Figma

After spending a few hours working on Figma, getting into the headspace of my designs and the sketches I had made previously, I was able to produce a rough design of what I wanted my website to look like.

Notice the use of no colour – I wanted the use of colour throughout my website to pop, and so I had the idea of only using colour when the user hovers over certain things, such as links and important words on the page.

I changed the idea of using a moon behind the title, to a photo of the rocket itself, as I felt this was more relevant to the actual mission, and I really liked the unique shape of the mask layer I created for it. I also decided to keep the lines that were supposed to be behind the moon, as I just felt it would help to carry the page a lot better, especially once the user scrolled down, as this would carry on into the next part of the screen.

I added the design of a button below the body text – this will be used for scrolling down quickly in the page, and I think I want the button to be animated as well to emphasise its existence. It will allow the user to scroll down to the next section, which will be all about the story of the Apollo mission.

Leave a Reply

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