Figma Help
- how to animate a circle expanding when hitting the menu?
- how to fill in profile pic icon
- how to get the animated text to work...?
To Do List
- make homepage
- check all navigation transitions are the same...
- make comments section
- make log in page
- add more data onto print and competition pages, feeling a little sparse
Managed to get this text animation working by using the frame links instead of text links. It also used to repeat but I realised that it would be kind of difficult for anybody to click on anything in the homepage if its always flicking to the next. So I decided to loop it only once, but if you click it, it will go again.
Moving on to mobile
Deciding on layout for mobile. The second image riffs off the desktop version more, but the first one might be easier to read. I think I'll ask other people about this one.
The first was what my users agreed on because they felt there was more room for information to be displayed, which I agree with.
Changing Haiyan's user journey to find a specific date for a workshop, instead of looking at all the prices. Decided to do this because originally I had all that information underneath the image, but I don't want to have a lot of information in that space. Just the title, date and location I think. The price is fine to go on the actual workshop page, but I don't want Haiyan's journey to have to click on every single page to see the price. Therefore she wants a specific date in Wellington.
Tim's feedback
- change > to actual icons
- need a better system for knowing when something is clickable: the outlines works fine for desktop but it's impossible to see on mobile so could try changing the colours
- make log in page more obvious where you can type
- could show progress in a more visual way next to the my favourites list
Changing the log in page to have a rectangle behind the text where you can type to make this more obvious. It will either be this purple or just white.
Figuring out how to show progress. Tim suggested a pie chart which would fit quite well with my menu button but I don't like the look of it. I think the outlined rectangle with the yellow fill works the best, and I've decided to keep the exact amount of progress above it.
Home page (finally)
Kept it pretty simple. Latest news and a small about blurb. On desktop you get the subjects on the right as well as in the menu.
System of clicks
Decided to go with yellow text when there is something clickable, apart from the main menu. It is just black there now but I think everyone knows everything there is clickable. It was more important to distinguish on the other pages.
Also put icons where the > used to be. I took all my icons from a document in the community assets part of figma, called 'Smoothie Icons'.
Coding
Where I'm at with coding. I need to work on my flex boxes so I can align two bits of text horizontally. Also my spacing in the header is questionable, as well as the placement of elements.
Credits
I can't take any credit for the icons used throughout my site, or the animated text on the homepage. Both these things were found in the community - assets section of figma. I did change both slightly to fit in more with my style but the majority of them remain the same as how I found them.
Icons
Link to community file:
https://www.figma.com/community/file/816285120354449772
Animated Text
Link to community file:
https://www.figma.com/community/file/873269238213654650
Comments
Post a Comment