Discovery | How to Build a Nutrition Website Ep. 1 | UX Design
In this first episode of the Nutrition UI series, we’ll be exploring a design by Giga Tamarashvili to plan our project’s assets, layout, and accessibility.
Series playlist:
Nutrition UI by Giga Tamarashvili on Dribbble:
https://dribbble.com/shots/4896266-Nutrition-UI
Download starter files from the GitHub repository for this project:
https://github.com/build-ux/nutrition-ui
View the Figma file for this project:
https://www.figma.com/file/PJ1eDnAob5PCQxxBnOBIuacM/Nutrition-UI-by-Giga-Tamarashvili?node-id=0%3A1
Personal website:
https://luhr.co
Music: “Kame House” by Oculus_Official on Youtube:
https://www.youtube.com/channel/UCsEYDdiQBReJNoSkji0zRmw
hey there! Just watching my second tutorial of yours. I’ve decided to start learning Figma after years of using Sketch. Just wanted to say your videos rock! Great pace, clearly explained and super helpful. I’m looking forward to getting through them all.
Thanks for putting them together. I raise my virtual glass of scotch to you!
What can I say…
Fast
Easy to understand
Helpful
Thank You!
I love your style of managing all of your workflow especially when it comes to the structure and design the content… literally every thing 😂
please make a series on html and complete css I would love to follow you…..
Hi ! I listened to all of the 12 videos on CRM Inbox and I’m now listening to this awesome nutrition video. What can I say ? This is by far the best content on UX design and UI interface coding I ever watch. It actually force me to learn a lot of Figma, level up my css skills, be better at accessibility and document semantic. Been aware of spacing, document flow and color contrast. I’m astonished at your skills and methodology. Keep on your good work, it’s inspiring and it take us, intermediate developers, to the next level !
Un beau bonjour et un énorme merci !
Dan
Hey! Found your channel. Great content you got here.
Watching this video and you were doing some contrast tests on colors. Would really be great if you could explain the what n how behind this concept. Thanks a lot!
I have just coded this website for all devices but yet I have not add user interaction part so I will upload it after adding user interaction and if someone want to see the first part I will upload it on codepen and thanks "Build UX" for inspiring me.
At the ~3min mark you make some points about accessibility regarding color contrast comparison. Newb question here: how does one quickly calculate/know that a color is "4.5 to 1"? In my googling I found this (below) nice summary article, that links to a rather involved RGB-based calculation, but is there a quick/easy way to make those color contrast frames you have for custom styles within Figma?
Ref I found: https://medium.muz.li/the-science-of-color-contrast-an-expert-designers-guide-33e84c41d156
wow!!
Man, I’m a dev with the stereotypical design inefficiencies and finding your channel is simply wonderful. I really appreciate how you’re discussing the thought process to all the little stuff that is categorized as "UX" but without all the "avocado toastiness" of most design resources (jokes, don’t at me)
Im hooked on your page..great and helpful content!