final figma internship
This commit is contained in:
ryanwong
@@ -0,0 +1,13 @@
|
||||
# day 1
|
||||
|
||||
Watch these figma tutorials. Submit the summary notes learnt from each video:
|
||||
|
||||
https://www.youtube.com/watch?v=gnscqweM_NU&list=PLXDU_eVOJTx6zk5MDarIs0asNoZqlRG23
|
||||
|
||||
https://www.youtube.com/watch?v=k74IrUNaJVk&list=PLXDU_eVOJTx5LSjOmeBYMuvaa4UayfMe4
|
||||
|
||||
https://www.youtube.com/watch?v=dXQ7IHkTiMM
|
||||
|
||||
https://www.youtube.com/watch?v=nITbdDFpPvY&list=PLXDU_eVOJTx7Tiz0af6LTKouP04cHJZIJ&index=1
|
||||
|
||||
https://www.youtube.com/watch?v=BOt3MNB71gI
|
||||
@@ -0,0 +1,129 @@
|
||||
# day 10
|
||||
|
||||
Using this figma ui kit:
|
||||
|
||||
https://www.figma.com/community/file/1173213215908355724/tailwind-ui-components-for-figma-tailgrids
|
||||
|
||||
https://www.figma.com/community/file/1259404410262766973/tailwind-css-ui-kit-for-figma
|
||||
|
||||
Watch these:
|
||||
https://www.youtube.com/watch?v=q3oI4G3zJa8
|
||||
|
||||
https://www.youtube.com/watch?v=06Zjr8pTv4c
|
||||
|
||||
https://www.youtube.com/watch?v=kew6UGCaPQs
|
||||
|
||||
https://www.youtube.com/watch?v=WTUM2Y11oJo
|
||||
|
||||
https://www.youtube.com/watch?v=obZX8oIjia4
|
||||
|
||||
https://www.youtube.com/watch?v=yYwEnLYT55c
|
||||
|
||||
https://www.youtube.com/watch?v=UWwNIMHFdW4
|
||||
|
||||
https://www.youtube.com/watch?v=KMS3VwGh3HY
|
||||
|
||||
https://www.youtube.com/watch?v=ewRYw4pnKQU
|
||||
|
||||
https://www.youtube.com/watch?v=Co75kmQtbaA
|
||||
|
||||
Help adjust the kit to fit client theme they decided:
|
||||
|
||||
## Colors you like
|
||||
|
||||
https://paletton.com/#uid=12P0u0k4wEneNtbb0xD6xrX7po-
|
||||
|
||||
I'm liking the green colors as it'll work well with the plant color I'm thinking of
|
||||
|
||||
Fonts you like (if you have preference)
|
||||
|
||||
https://www.fontpair.co/fonts/ibmplexsans
|
||||
|
||||
https://www.fontpair.co/fonts/sourcesanspro
|
||||
|
||||
I like clean and crisp text. Makes it easier to read.
|
||||
|
||||
Couple of sites you like the look of (and ideas why you like it)
|
||||
|
||||
https://dribbble.com/shots/14925321-Internext-Landing-Page-Exploration
|
||||
|
||||
I really like this layout. Clean, fun and cartoon-ish
|
||||
|
||||
https://dribbble.com/shots/16007029-Finance-Dashboard-Design
|
||||
https://dribbble.com/clayglobal/projects/2170578-Cushion
|
||||
|
||||
I like this layout for the user/admin dashboard. Clean.
|
||||
|
||||
## Logo What logos you like?
|
||||
|
||||
https://www.vectorstock.com/royalty-free-vector/flower-pot-and-plant-logo-growth-logo-vector-27224554
|
||||
|
||||
Clean, wouldn't mind to remove the circle around the icon.
|
||||
|
||||
https://dribbble.com/shots/14260992-Plant-mark
|
||||
|
||||
Clean and simple
|
||||
|
||||
https://designbundles.net/sasagraphic/773988-plant-pot-logo
|
||||
|
||||
Cartoonish, looks fun and simple
|
||||
|
||||
## Do you like images in logo?
|
||||
|
||||
Yes, but prefer it to be a simple plant
|
||||
|
||||
## Do you like only text in logo?
|
||||
|
||||
I think it'll be necessary to have a variety of logos for the website, so it will likely be needed at some point.
|
||||
|
||||
## Do you like symbol in logo?
|
||||
|
||||
Yes, I've had ideas of the S in seedplicity being a vine or something. Very open to any ideas.
|
||||
|
||||
## Feeling you want people to feel when they see your site (professional, fun, artistic)
|
||||
|
||||
Professional
|
||||
|
||||
Powerful
|
||||
|
||||
Simple
|
||||
|
||||
Clean
|
||||
|
||||
## Images Links to images you like
|
||||
|
||||
https://99designs.com/profiles/frankfurt/designs/14289
|
||||
|
||||
https://www.kindpng.com/imgv/bJioho_art-plant-logo-leaf-png-transparent-png/
|
||||
|
||||
https://www.wallsheaven.com/wall-murals/bonsai-logo,-simple-plant-logo,-vector-flat-icon.-B659571709
|
||||
|
||||
https://www.pngaaa.com/detail/280652
|
||||
|
||||
https://stock.adobe.com/images/plant-logo/103983960
|
||||
|
||||
## What image, look, or feel do you want your brand’s website to portray? Use 3-5 adjectives to describe your brand
|
||||
|
||||
Happy
|
||||
|
||||
Artistic
|
||||
|
||||
Clean
|
||||
|
||||
Strong (as in powerful servers and bandwidth)
|
||||
|
||||
I'd also like to portray security and redundancy of storage since we're using Ceph for storage unlike some of the other providers that if a hard drive goes out, your data is gone.
|
||||
|
||||
When analyzing your competitors’ sites, what do you like and not like about their websites?
|
||||
|
||||
## Provide examples of direct/indirect competitors
|
||||
|
||||
https://www.rapidseedbox.com/ Too white and weird blank spaces in the page, then at the end of the page everything gets cluttered. Just feels messy to me.
|
||||
|
||||
https://seedbox.io/ Really liking the layout and how the items 'float' into the page. Simple and clean design.
|
||||
|
||||
https://seedit4.me/ This competitor is really fun and cool. Can we do the same except with plants? lol
|
||||
|
||||
https://ultra.cc/ is the main competitor. They are the go-to in terms of seedbox providers and their design is pretty clean.
|
||||
|
||||
https://whatbox.ca/plans site looks too plain with no character.
|
||||
@@ -0,0 +1,15 @@
|
||||
# day 2
|
||||
|
||||
## Task
|
||||
|
||||
Go into any pm board https://pm2.manaknightdigital.com/
|
||||
|
||||
Copy the screen with the cards. Use reusable components. Copy font exact styling and color using dev tools to find out.
|
||||
|
||||
https://www.youtube.com/watch?v=KnmxD8LvHmA
|
||||
|
||||
https://www.youtube.com/watch?v=-1HS3bIq5Mw
|
||||
|
||||
https://www.youtube.com/watch?v=oHTaB7aT7XU
|
||||
|
||||
https://www.youtube.com/watch?v=k8y9SRPB78Q
|
||||
@@ -0,0 +1,3 @@
|
||||
# day 3
|
||||
|
||||
Make mobile version of day 2 at size 320px width
|
||||
Binary file not shown.
@@ -0,0 +1,20 @@
|
||||
# day 4
|
||||
|
||||
Look at current figma file, create the style guide for this with the following characteristics:
|
||||
|
||||
- Title fonts: Clash Display Variable;
|
||||
- body fonts: Inter
|
||||
- Button Colors: #0B0B0B
|
||||
- tailwind grid with proper sizing
|
||||
- h1 - h6
|
||||
- all button with different states (normal, activated, disabled, deactivated, on hover)
|
||||
- https://www.youtube.com/watch?v=G1xmkQeExJo
|
||||
- tables
|
||||
- forms
|
||||
- modals
|
||||
- toast
|
||||
- navigation bar
|
||||
- links
|
||||
- progress bars
|
||||
- icons
|
||||
- Look at IETI for additional components https://www.figma.com/file/hwByl3XIYpmLBSenqVdKgR/IETI-main?type=design&mode=design&t=1YQ8cjVJonoua7s7-0
|
||||
@@ -0,0 +1,12 @@
|
||||
# day 5
|
||||
|
||||
Take current work from day 4. implement the wireframe with your style guide reusable components.
|
||||
|
||||
After you implement the navigation tabs, how do you think we should layout the packages differently? Do you agree with tabs on top or something else?
|
||||
|
||||
Implement the following tool pages:
|
||||
|
||||
- contact form tool + card (input fields, name, email, message, map 50% width of form)
|
||||
- mobile responsive of this form
|
||||
- admin login
|
||||
- admin dashboard of the following metrics (# of active users, revenue this month, cancellation rate, then table below this of last 20 new paid users signed up names, and graph of most used tools (bar graph), graph of which plan tools used the most (pie chart))
|
||||
Binary file not shown.
@@ -0,0 +1,17 @@
|
||||
# day 6
|
||||
|
||||
Learn the basics of graphic design principles. Submit the summary notes learnt from each video.
|
||||
|
||||
https://www.youtube.com/watch?v=01ZoynsM7Vw&list=PLATYfhN6gQz9OO7qe9FILY4NrfvWCbdGl
|
||||
|
||||
https://www.youtube.com/watch?v=9EPTM91TBDU
|
||||
|
||||
https://www.youtube.com/watch?v=MlsV3hu84as
|
||||
|
||||
https://www.youtube.com/watch?v=a5KYlHNKQB8
|
||||
|
||||
https://www.youtube.com/watch?v=FpwZTl3dCZE&list=PL-c9Rq56P4KkVJdnL3YVesRGP-MLkzgme
|
||||
|
||||
https://www.youtube.com/watch?v=UmHMVU6dceA
|
||||
|
||||
https://www.youtube.com/playlist?list=PLgGbWId6zgaXiWYDAcJbXzBNlAnYg7pgL
|
||||
@@ -0,0 +1,17 @@
|
||||
# day 7
|
||||
|
||||
Based on the solid notes learnt, demonstrate each principle in example in figma for my tech passport component. Choose any scenario you see fit to forfill the principles.
|
||||
|
||||
https://www.youtube.com/watch?v=01ZoynsM7Vw&list=PLATYfhN6gQz9OO7qe9FILY4NrfvWCbdGl
|
||||
|
||||
https://www.youtube.com/watch?v=9EPTM91TBDU
|
||||
|
||||
https://www.youtube.com/watch?v=MlsV3hu84as
|
||||
|
||||
https://www.youtube.com/watch?v=a5KYlHNKQB8
|
||||
|
||||
https://www.youtube.com/watch?v=FpwZTl3dCZE&list=PL-c9Rq56P4KkVJdnL3YVesRGP-MLkzgme
|
||||
|
||||
https://www.youtube.com/watch?v=UmHMVU6dceA
|
||||
|
||||
https://www.youtube.com/playlist?list=PLgGbWId6zgaXiWYDAcJbXzBNlAnYg7pgL
|
||||
@@ -0,0 +1,3 @@
|
||||
# day 8
|
||||
|
||||
Given what you learnt so far, Implement the markup sections on the wireframe.
|
||||
Binary file not shown.
@@ -0,0 +1,3 @@
|
||||
# day 9
|
||||
|
||||
Using this figma https://www.figma.com/file/PEgPAkTFJT6oOmu9qN8qeD/Baas?type=design&node-id=0-1&mode=design&t=7y6G2pE2UWQLFucB-0 , implement a wireframe of your choice as the ui kit
|
||||
Reference in New Issue
Block a user