The design process started with me creating a site map, the site map showed me how the site would work and fro this I was able to start creating wireframes that would be the basis of the design for the site. As this part of the the design process was new to me it was very useful to create the sitemap as it would have been impossible to design each page as I found it very confusing to figure out what pages were needed for the different sections of the site.
Each page was designed with a a grid to make sure that i had every page exactly the same proportions, this was important because i need to make sure that the page would work on all screens. Making considerations for screen was an interesting part of the design process as there are certain things that could not be done for example, point sizes for type needed to be kept about 10pt as otherwise it would become too small to read.
To complete this brief to a high standard I wanted to create an animation of the site rather than just displaying mockups of static pages. As this would give the developer a better understanding of how I would like the site to work. in order to create the animation each page needed to be created, I used the wire frames as a guide to work from when creating the real pages in illustrator this gave me the freedom to do what I wanted when creating the site, rather than using the Adobe Xd program to being my site to life I used After Effects that helped me to animate the parts that needed to be shown to the users/developer.
After designing most of the pages in illustrator I was the able to easy link them info After Effects, here I then had to key frame certain parts of the site to show case how the site show be used. Within UI design i felt it was very important to make sure it is done how you want it to be otherwise it could be change by the developer if they are unclear. Putting it into the animation was the first time I was able to look back at my design and really see whether I had created a website that worked for the sole purpose of money management. This was also the first time I could look at the design to make sure that I had chosen the appropriate typeface and size of also, after asking around peers it was clear that the typeface was legible and works well with the over all style of the website. A key part of this site is not only functionality but it is the style as I need to make sure that I am appealing to my target audience. A good example of this is the It's Nice That website, they have created a site for designers/creatives and it appeals to them as creatives they notice the things that normal people would not see, but with my site the same rule can be applied this is why I have used certain colours and information to keep the audiences attention.
Considerations -
A feature that I have added to the navigation bar was to make it as whats known as "sticky" which means that the nav bar will always remain at the top of the page. This means that the user will always be able to get to any page at any without having to scroll back to the top of the page. This makes the site much more user friendly, and it also adds some style to the site which it may not have if the "sticky" nav bar was not there.
To make people want to use the site, considered the use of colour a lot but not only within the branding but with the assets on the site for example the pie charts, these needed to be eye catching and engaging as looking through money statistics can be very boring so by adding colourful colour I was able to grab the users attention.
When creating the comparison page I thought about adding the text at the bottom of the images, but this seemed to be adding too much text to the page and I did not like how cluttered the page became. The best way around this was adding a roll over action to the images that meant that you could have the text and image in the same place and it would not change or take up more space.
Not make the tracking page more interactive for the users I have also added another roll over button that will be used. The idea is that the information is hidden from the user until they click on the part that they want to view and by hiding the other information it creates less clutter on the page and it is only giving the user the relevant information.
No comments:
Post a Comment