7/25/ 2022: MONDAY
7:30- 9:30: Figma Style Guide Learning videos and material
9:30-11:00: team meeting
1:00-1:30: meeting with Jerry
1:30-2:00: personal research
Before the meeting I watched some long videos about style guides for Figma so that I am ready for my website design project today. I was glad because I did learn a few new tricks and I don't want a repeat situation in which my work does not fit well with a team like with the Tingley campaign. I want to do it appropriately this time.
In today's meeting there were some comments made about cooperation between our team and our clients and how sometimes there are communication issues between us and third parties. It was interesting for me to see how impacted we are and how we can be halted just because of a company's inefficiency to respond and come to decisions. It was the reality of the business side that I didn't really consider too much, I think I had some fantastical idea that you can have a client, work and finish a project, be done and move on. But in reality they become a lifetime client that you constantly have to work with and communicate with which becomes complicated with each new project.
I had a discussion with both Jerry and Rose about the upcoming project and expectations, they provided a google drive folder with some assets and the script from the content team. These would help me begin the wireframing process. But rather than starting today since I had such little time after the meeting, I did more research and planning for the design by looking into some recommended sites, pinterest and Vellohealth’s competitors in order to see whats working and how to make ours stand out. I took some notes and kept those in the google file.
Notes from Figma Videos…
Build it in Figma: Create a Design System-Foundation...
- Design systems are not UI kits
- How to create a type scale:
- use a golden ratio to determine type scale difference
- start at 16 (base font) as a body copy. Times it by 1.62 how ever many times.
- design kits evolves with process
- determine how many texts you may need
opt/ drag to create another and then cmd d to duplicate
-you can either change kerning with % or # value
- the bigger type should be moved in while smaler type should b
- making text styles: text (four squares) (plus sign) name style
- 1.2-1.45 for line height preference (% is better bc it changes with type)
- color designer/ palette are good plug ins (Go get later)
- shift A (auto layout)
- making color style: fill (four squares) (plus) name color
Build it in Figma: Create a Design System-Components...
- color swatch: canme, hex code, primary..., different tints)
- color, code, three lines: will show you qualities of type that you can list out
- shift A (with both selected) to auto layout container. Or right click, add auto layout .
- Layout grid- columns
- Cntrl G to turn on and off grids
- When describing the relationship between leading between diff type sizes/ styles: may use Gutenberg or other systems like Golden Ratios
- if you autolayout but don't want the shape size to shrink: autolayout, vertical, stretch
- use diamond button up top to make a component
- Component Structure
- always use the default base as the foundation of the next component so everything remains constant and the naming convention should be Textified/... in order for you to find other components easily. In instances it will should u over options similar based on naming
- allow to stretch:use the button at top with the parallel lines in the bracket to allow the component to stretch horizontally.
7/26/ 2022: TUESDAY
9:00-10:00: Jerry and Rose meeting
10:00-1:30: figma wireframes
1:30-2:00: check up and critique
So today after a meeting with Jerry and Rose, I jumped into wireframing. I was expected to make two ideas, one would be based around the content team's script layout and the other would be completely my own. I was worried I was taking too long but after completing the first wireframe, I moved really quickly during the second, I used my notes and competitor sites as inspirations for certain components. I really thought that it looked good and was proud that the team seemed to really like my own original design over the guided one. They made a lot of comments about what to fix for team purposes and explained to me the connection between how I design here and how the design team will have to interpret it. Especially after my Tingley Email campaign I was very conscious of how I was working and making sure to stay within my style guides.
HIGHLIGHTS: Happy they enjoyed my wireframes over the company listed one
PROBLEMS: Had to take a lot of notes
ISSUES: Wireframes took longer than expected due to creative block
Here are my wire frames I made:
Comments
Post a Comment