Wire Framing Hierarchy

I began the wire framing process by directly translating the planning wall of hierarchy onto a wireframe. I did this with considerations paid to composition and in all honesty I do like this wireframe however I want to take more time developing it and experimenting with alternative compositions.

I found this useful as a stepping stone to see my landing page beginning to take form and what way the content would sit in relation to one and other. I am happy with the categorisation and divs that I have chosen and the order they are presented in does feel like it makes sense.

I have a better understanding on the places. in which need illustration after this.

655ACC88-9C7E-4819-9955-C1C17F810EC8.jpeg

Refining Sketches and Further Planning

Nav Bar Design

I decided to begin by revisiting the nav bar at the top to see what way I can push the design of this. Although this is arguably a minor part of the landing page, it is still important to get this right and it is another opportunity to add an aspect of branding also.

9EFC8BBB-5A19-4032-9D2B-AB5320D0FF7C.jpeg

I was most pleased with design 2 of the nav bar. I think using the curved edge line, in keeping with the brand identity of balance, it will reinforce this. If it becomes visually over crowded then I will remove it but I feel that it is worth trying in the design of the landing page.

Hero Image Illustration

I wanted to plan the hero image next as this is a large part of the landing page design. I decided to split my page into 9 to begin sketching thumbnail sketches of what this would look like. I knew I wanted to include the tag line ‘balance it your way’ and incorporate some of the components of the app. This was really helpful in refining my ideas and experimenting with different compositions.

26BBE519-4126-41B5-B98C-01BCBE6004D9.jpeg

I refined sketch 9 on a larger scale to see what way this would look more resolved. When I scaled it up in this way I still felt it was rather crowded. I also did not like having the tag line split into 3 different lines as it made it a bit unclear. I rather wanted it split as ‘balance it / your way’ as each two words groups together more effectively, rather than ‘balance / it your / way’.

F4D41363-5ADA-4E14-A1A0-AE93163579B7.jpeg

I refined it again, bringing more attention to the illustrations of the sliders. I pulled the text within these, and brought the confetti to the whole of the background. I feel as though this is a lot less visually crowded. I included the balance icon however I am unsure if I will keep it in the final design.