worlds shortest Figma course Juxtopposed 2023-12-04 | Hey guys! Hope you enjoy this ultra quick intro to Figma, a free collaborative design and prototyping tool.// Thumbnail design's code implementation:codepen.io/Juxtopposed/pen/mdvaezM// Some cool free Figma Plugins:Realtime Colors figma.com/community/plugin/1234060894101724457Noise & Texture figma.com/community/plugin/1138854718618193875Material Design Icons figma.com/community/plugin/740272380439725040Fig3D figma.com/community/plugin/9460200808716449503D Icons figma.com/community/plugin/1107546399747513238Shaper figma.com/community/plugin/907656685995069176// ✨ Let's connect:Twitter: twitter.com/juxtopposedCodePen: codepen.io/JuxtopposedDribbble: dribbble.com/juxtopposedGithub: github.com/juxtopposed// ✨ Cat credits:instagram.com/thepixelcattinstagram.com/monkeycatluna———// Timestamps00:00 Intro00:18 Environment00:43 Basic Tools02:04 Layout03:39 Properties & Effects05:29 Components & Styles05:54 Prototypes———// Music (Support the artists):pixabay.com/music/fantasy-dreamy-childrens-best-adventure-ever-122726pixabay.com/music/beats-laid-back-grooves-149989———#figma #figmatutorial #uiuxdesign #webdesign
I Redesigned Discord UI just to make it Cozier Juxtopposed 2024-10-01 | 💫 Try Brilliant for free for a full 30 days: brilliant.org/JuxtopposedI tried to redesign Discord to add cozier and comfier options to it and help users not get overwhelmed.Hope you enjoy!// 🔗 Links:Discord redesign file: figma.com/community/file/1425890005832901014/discord-redesigntouch grass: touchgrasss.com// Let’s connect:X / Twitter: https://x.com/juxtopposed------Music (support the artists):pixabay.com/users/onoychenkomusic-24430395pixabay.com/music/happy-childrens-tunes-joyful-spy-melody-for-lighthearted-fun-15s-232565
MKBHDs Wallpaper App Could be Way Better - My Review & Redesign Juxtopposed 2024-09-25 | I tried to share my thoughts on MKBHD'S recently released wallpaper app, Panels. I tested the app both on Android and iOS, and tried to provide some simple solutions.Hope you enjoy!Helpful links:https://panels.artLet’s connect:https://x.com/juxtopposedMusic (support the artist):pixabay.com/users/dcuttermusic-2687860
The Identity Crisis of Nothing’s UI - My Review & Redesign Juxtopposed 2024-08-26 | I reviewed and redesigned the UI of Nothing Phone 2, including NothingOS, glyph Interface, and the design elements.Hope you enjoy!Let’s connect:https://x.com/juxtopposedResources:ncbi.nlm.nih.gov/pmc/articles/PMC9792669https://app.spline.design/community/file/eef5a0c4-609c-40b8-8fa6-93224cd86db7Music (support the artist):pixabay.com/users/geoffreyburch-5739114
everything about color (literally) Juxtopposed 2024-08-17 | 💫 Try Brilliant for free for a full 30 days: brilliant.org/JuxtopposedLearn everything color in less than 25 minutes: what is color, color theory, color spaces, color gamuts, color photography, color manipulation, color psychology, display technologies and so much more. Hope you enjoy!// Helpful links:colorgamuts.comrealtimecolors.comwide-gamut.combottosson.github.io/posts/oklabhueplot.ardov.mehsluv.orgoklch.comwebkit.org/blog-files/color-gamutwide-gamut.com/test/image-hdrmyndex.com/APCA// Sources:commons.wikimedia.org/wiki/File:Visible_gamut_within_CIEXYZ_color_space_D65_whitepoint_mesh.webm commons.wikimedia.org/wiki/File:CIELUV_LCh_and_HSLuv_comparison.png By Myndex - Own work, CC BY-SA 4.0, commons.wikimedia.org/w/index.php?curid=116654642commons.wikimedia.org/wiki/File:LEI0440_Leica_IIIf_chrom_-_Sn._580566_1951-52-M39_Blitzsynchron_front_view-6531_hf-.jpgreddit.com/r/crtgaming/comments/umurqz/what_is_the_optimal_43_resolution_to_run_a_crt_asreddit.com/r/Monitors/comments/qh3606/side_by_side_lg_27uk670b_uhd_4k_vs_asus_proartreddit.com/r/OLED_Gaming/comments/17mng68/cyberpunk_with_full_path_tracing_on_oled_is_justreddit.com/r/4kTV/comments/pedrt2/samsung_neo_qled_qn91a_ps5_4k120hzhdr_color_issueavsforum.com/threads/samsung-s95d-qd-oled-tv-review-a-bright-future-beyond-the-glare.3297954pixabay.com/users/pexels-2286921 https://teenage.engineeringpixabay.com/users/manfredrichter-4055600 bottosson.github.io/posts/colorpickercommons.wikimedia.org/wiki/File:Jungle_River_(11031857394).jpgcommons.wikimedia.org/wiki/File:TealightLuminanceImage.jpgpixabay.com/users/knuftedufte-11648927commons.wikimedia.org/wiki/File:Eyesensitivity.svg // Music (support the artist):pixabay.com/users/matixvision-31840012
how websites learned to fit everywhere Juxtopposed 2024-07-03 | Let's travel back in time and learn about the history of responsive design, all the way from 1990s to 2020s.// Helpful links:The Wayback Machine: web.archive.orgWebXR Github: github.com/immersive-webAbout Immersive Web: https://immersiveweb.devGuide to screen sizes for responsive design: browserstack.com/guide/ideal-screen-sizes-for-responsive-designFlexbox Froggy (a game to practice flexbox): flexboxfroggy.comOptimizing for large-scale displays: css-tricks.com/optimizing-large-scale-displaysList of screen sizes: screensiz.esResponsive Web design article: alistapart.com/article/responsive-web-designGlobal browser and platform stats: w3counter.com/globalstats.phpNeocities: neocities.org// ✨ Let's connect:Twitter: twitter.com/juxtopposedCodePen: codepen.io/Juxtopposed------------------#nostalgia #webdesign #responsivewebsite
worlds shortest Framer course Juxtopposed 2024-06-24 | Here's an ultra quick intro to Framer, a nocode platform that allows you to make beautiful and modern websites intuitively with all sorts animations and effects.✨ Use code "FRAMER25INFLUENCER" to get 25% off first 3 months of Mini and Basic site subscription on Framer:framer.com/?via=juxtopposed// Helpful links:Framer site made in the vid: https://shortest-course.framer.website/sites featured: sebastian-martinez.com and https://www.wegrow.design/// ✨ Let's connect:Twitter: twitter.com/juxtopposedCodePen: codepen.io/Juxtopposed-----// Timestamps:00:00 Intro00:15 Environment00:40 Breakpoints01:08 Assets & Styles01:44 Layout02:37 Add Elements03:19 Position04:20 Properties05:14 Components06:00 Final Points------#framer #framercourse #framertutorial #framerpartner #buildwithframer
I Redesigned the ENTIRE Spotify UI from Scratch Juxtopposed 2024-05-27 | Let's redesign Spotify, talk about its UI issues and try to improve them one by one. Hope you have fun!Try Mobbin in your next design project: mobbin.com/?via=juxtopposed// Check out the Spotify Redesign on Figma:figma.com/community/file/1376999463181735262/spotify-redesign// ✨ Let's connect:Twitter: twitter.com/juxtopposedCodePen: codepen.io/Juxtopposed---------#Spotify #redesign #uidesign
I made the Same Website in 3 No-Code platforms Juxtopposed 2024-04-25 | Try Wix Studio for free: wixstudio1.hopp.to/juxtopposedGet a free Cat Wallpaper: https://catpixel.art// ✨ Let's connect:Twitter: twitter.com/juxtopposedCodePen: codepen.io/JuxtopposedThanks for watching!---------#nocode #wixstudio #lowcode #websitedevelopment, #freelancelife #Ecommercewebsite #webdesigntips #websitedesign #websitebuild #websitetricks #lowcode #freelancedesigner #webflow #framer @WixStudio
I Redesigned Wikipedia JUST to MAKE IT MONEY Juxtopposed 2024-04-20 | Watch me redesign Wikipedia solely to make it MONEY! 😈// Check out the redesign on Figma:figma.com/community/file/1363632672800168628/wikipediaTry Mobbin to get design inspiration in your next project (affiliate): mobbin.com/?via=juxtopposed// ✨ Let's connect:Twitter: twitter.com/juxtopposedCodePen: codepen.io/Juxtopposed---------#redesign #wikipedia
I Redesigned the ENTIRE IMDb UI from Scratch Juxtopposed 2024-03-17 | Let's go through this IMDb redesign together. Hope you enjoy, and thanks for watching!Try Mobbin in your next design project: mobbin.com/?via=juxtopposed// Check out the IMDb redesign on Figma:figma.com/community/file/1351311179805670990/imdb-redesign// ✨ Let's connect:Twitter: twitter.com/juxtopposedCodePen: codepen.io/Juxtopposed------#imdb #redesign #movies
I tried Blurring things in Quirky ways Juxtopposed 2024-03-09 | Let's talk about 10 different levels of blurring (Gaussian blur) in design and code.// Find all the codes in this CodePen collection:codepen.io/collection/vBPmZQ// ✨ Let's connect:Twitter: twitter.com/juxtopposedCodePen: codepen.io/JuxtopposedDribbble: dribbble.com/juxtopposedGithub: github.com/juxtopposed// Helpful resources:gist.github.com/dmnsgn/76878ba6903cf15789b712464875cfdchttps://www.cs.toronto.edu/~guerzhoy/320/lec/filters.pdfThanks for watching! ———#uidesign #blur #gaussianTimestamps:00:00 Blur History01:57 Level 102:18 Level 2: Backdrop Blur02:45 Level 3: Gradient Blur03:19 Level 4: Shadows03:56 Level 5: Clip-path05:24 Level 6: SVGs06:39 Level 7: Shaders07:31 Level 8: Shader Effects07:56 Level 9: Animation08:29 Level 10: ?
When Animators Become Web Designers Juxtopposed 2024-02-15 | #sponsored The first 500 people to use my link will get a 1 month free trial of Skillshare: https://skl.sh/juxtopposed02241// try out the website:juxtopposed.com/animation// check out the code:codepen.io/Juxtopposed/pen/MWxZNKJ---- #animation #gsap #webdesign #anime--- Music (support the artists):pixabay.com/music/happy-childrens-tunes-inki-minki-tinki-152746pixabay.com/music/beats-chillhop-lo-fi-hip-hop-beat-background-music-133472
Stop “Learning” Design. Juxtopposed 2024-02-05 | Sign up to Milanote for free with no time-limit: milanote.com/juxtopposedIn this video, I talk about how you should stop learning design, and what you can do instead.Hope you enjoy!// Try the Futuristic Social Media:codepen.io/Juxtopposed/pen/qBvKRYE-------#design #uidesign #development Music (Support the artists):pixabay.com/music/beats-autumn-leaves-157898pixabay.com/music/beats-donx27t-you-dare-183401pixabay.com/music/beats-goldn-116392pixabay.com/videos/building-architecture-modern-106340
100 Years of Fictional UI - Were They ALL Wrong? Juxtopposed 2024-01-20 | Let's dive deeper into the history of Fictional UI (mostly on science fiction). Where did our modern interfaces come from? Were all the predictions wrong?Hope you enjoy!// helpful links:Scifi UI framework: https://arwes.dev/Guide to HUDs and GUIs: hudsandguis.comTerritory Studio: territorystudio.comLCARS: thelcars.comFirst Star Trek TOS footage: vimeo.com/12023417-------#fictionalui #sciencefiction #uidesign #lcarsMusic (Support the artists):pixabay.com/music/main-title-cinematic-trailer-music-06-cinematic-cello-arpeggio-trailer-114623
I Redesigned the ENTIRE Instagram UI… But is that enough? Juxtopposed 2024-01-12 | Let's redesign Instagram and fix its UI/UX problems, with a few notes of criticism.✨ Try it on Figmafigma.com/community/file/1327570273357184516/instagram-redesign---------// Timestamps:00:00 Intro01:02 Inconsistencies01:55 Layout04:21 Homepage07:35 Posts08:36 Messages03:16 Store10:35 Explore11:34 Profile & Activity13:05 Final Note#instagram #uidesign #redesign -------Cat Credit:instagram.com/monkeycatlunainstagram.com/the_khaleesicatinstagram.com/timmythechonkinstagram.com/joseph_of_waterinstagram.com/unico_uniuniinstagram.com/namhee_psdinstagram.com/guangdang005instagram.com/lilochipieinstagram.com/catdebateMusic (Support the artists):pixabay.com/music/traditional-jazz-sunny-morning-jazz-178472pixabay.com/music/introoutro-who-are-you-8088pixabay.com/music/happy-childrens-tunes-happy-acoustic-guitar-background-music-122614
I Redesigned the ENTIRE Steam UI from Scratch Juxtopposed 2023-11-04 | I've finally redesigned the entire Steam UI. This video focuses on the design choices rooted in much bigger causes, like marketing, development, etc. So get ready for lots of criticism, as well. Hope you enjoy!✨ Try it on Figmafigma.com/community/file/1302616100790619521/steam-redesign✨ Test your colors and fonts on a real website realtimecolors.com---------// Timestamps:00:00 Steam...00:58 Structure01:30 Colors01:55 Fonts02:09 UI Elements02:29 Navigation03:16 Store11:28 Library13:33 Downloads14:16 Profile16:58 Community20:02 Final Trailer#steam #uidesign #redesign -------Music (Support the artists):pixabay.com/music/beats-glasses95am-152020pixabay.com/music/small-emotions-rain-and-tears-sad-piano-music-with-rain-and-thunderstorm-7804pixabay.com/music/ambient-mesa-10550pixabay.com/music/video-games-8-bit-arcade-138828
I made Realtime Colors 100x Better (v3) Juxtopposed 2023-09-24 | This video goes over the latest updates from Realtime Colors v3 plus some dev notes (you won't believe the pricing).// ✨ Try Realtime Colors:realtimecolors.com// ✨ Let's connect:Twitter: twitter.com/juxtopposedCodePen: codepen.io/JuxtopposedDribbble: dribbble.com/juxtopposedGithub: github.com/juxtopposed———What is Realtime Colors?It's a color and font visualization, testing, and project-ready exporting tool that will speed up the styling game in your projects. Browse hundreds of free typography, test your colors, export for your favorite tools, frameworks, and libraries, like Tailwind CSS, DaisyUI, NextUI, shadcn, Bootstrap, Flutter, and more.Designing a UI? Export the palettes to Figma in one click. Developing a website? Export the codes in a blink.———Music (support the artists):pixabay.com/users/music_unlimited-27600023pixabay.com/users/lesfm-22579021#realtimecolors #colors #devdiary
Everything will be simpler and you WILL be happy. Juxtopposed 2023-09-03 | This is a simple video about simple design, in web, in products we use every day, or in tech.// ✨ Designs featured:instagram.com/p/CvIRxZ9SQQq/?igshid=MTc4MmM1YmI2Ng==instagram.com/p/CgRqoXlDty4/?img_index=1&igshid=M2M3YTNlMTQ4MA==instagram.com/p/Cr-ZY-LLNIf/?igshid=MTc4MmM1YmI2Ng==instagram.com/p/CtyzVVtsOig/?igshid=MTc4MmM1YmI2Ng==http://adamclarkecolour.comorma-architettura.comstudio-mimi.compifebo.comscope-typeface.comhttps://www.pitchfestival.com.au/community-grantcezar.io// ✨ Let's connect:Twitter: twitter.com/juxtopposedCodePen: codepen.io/JuxtopposedDribbble: dribbble.com/juxtopposedGithub: github.com/juxtopposed———Music (support the artist):pixabay.com/users/playsound-24686998———#webdesign #productdesign #simpledesign
Rise of the Dark Mode Juxtopposed 2023-08-27 | In this video, we'll talk about colors one more time, but with a focus on dark mode designs.// ✨ Try your dark mode colors on a real website:realtimecolors.com// ✨ Dark mode design inspirations:darkmodedesign.com// ✨ Let's connect:Twitter: twitter.com/juxtopposedCodePen: codepen.io/JuxtopposedDribbble: dribbble.com/juxtopposedGithub: github.com/juxtopposed———Music (support the artist):pixabay.com/users/pumpupthemind-19969411———#darkmode #webdesign #uidesign
Your Images DESERVE These Effects Juxtopposed 2023-08-22 | This week, I tried replicating 3 cool image effects with shaders. Let's see how it's done.// ✨ Demos on CodePen:Distortion + Grids: codepen.io/Juxtopposed/pen/MWZWpVQGlitch: codepen.io/Juxtopposed/pen/GRPRPyRWavy: codepen.io/Juxtopposed/pen/VwVoEBr// ✨ Helpful links:stacksorted.comzajno.comcuberto.comteamgeek.io// ✨ Let's connect:Twitter: twitter.com/juxtopposedCodePen: codepen.io/JuxtopposedDribbble: dribbble.com/juxtopposedGithub: github.com/juxtopposed———// Timestamps:00:00 Intro00:37 Three.js00:41 Shaders00:52 Effect 102:23 Effect 203:40 Effect 304:18 Choose your Fighter--------Music:pixabay.com/users/moodmode-33139253———#shaders #threejs #design #codepen #webdesign #imageeffects #imageediting
I found the PERFECT duo for 3D web animations Juxtopposed 2023-08-16 | Let's make a quick website with scroll animations using Spline and GSAP. In my opinion, these two go very well together. So why not try out some ideas?// ✨ Demo on CodePen:codepen.io/Juxtopposed/full/xxQMyqQ// ✨ Helpful links:stacksorted.comhttps://spline.designgreensock.comgithub.com/splinetool/react-spline// ✨ Let's connect:Twitter: twitter.com/juxtopposedCodePen: codepen.io/JuxtopposedDribbble: dribbble.com/juxtopposedGithub: github.com/juxtopposed———// Timestamps:00:00 Intro00:54 Step 1: Design a Website01:29 Step 2: 3D Modeling02:07 Step 3: Preparing the Code02:49 Step 4: GSAP Basics03:46 Step 5: Spline + GSAP04:52 Step 6: the little things--------Music:pixabay.com/music/beats-against-the-matrix-153594———#spline #gsap #animation #3danimation #3dmodeling #webdesign #web3d #codepen
worlds shortest UI/UX design course Juxtopposed 2023-07-23 | This video is what I wish I had when I first learned about UI/UX design. It covers that 20% of UI design that you'll be dealing with 80% of the time. Hopefully it'll help you start your journey or at least know what you're stepping into. Happy creating!// ✨ Check out the site we just designed together:stacksorted.com// ✨ world's shortest Figma course: youtu.be/1pW_sk-2y40// ✨ Helpful links:realtimecolors.comicons8.comhttps://spline.designfreehandapp.combalsamiq.com// ✨ Let's connect:Twitter: twitter.com/juxtopposedCodePen: codepen.io/JuxtopposedDribbble: dribbble.com/juxtopposedGithub: github.com/juxtopposed———// Timestamps:00:00 Intro00:20 Design starts with...00:34 Step 1: User Flow00:55 Step 2: Wireframes02:21 Step 3: Design System04:37 Step 4: Actual Designing06:02 Bonus Step--------Music and sound effects:youtube.com/watch?v=q1JB2uIpwL0pixabay.com/users/shidenbeatsmusic-25676252pixabay.com/music/synthwave-neon-gaming-128925———#uidesign #uxdesign #designcourse #webdesign #shortestUIdesigncourse
I updated Realtime Colors (v2) Juxtopposed 2023-07-16 | NEW - Watch the V3 updates: youtu.be/zy7Kf8WiSyE------This video goes over the updates released for Realtime Colors, a UI colorpicker tool. Try the updates out for yourself, and I hope you like them!P.S. this video is not sponsored by Notion or anything. I just like the app. It's one of the main parts of my workflow. :) Thought I show you how you can manage your tasks in it. Maybe you'll find it useful too. You probably already use it anyway. Still, thanks for watching!// Try Realtime Colors:realtimecolors.com// ✨ Let's connect:Twitter: twitter.com/juxtopposedCodePen: codepen.io/JuxtopposedDribbble: dribbble.com/juxtopposedGithub: github.com/juxtopposed———// Timestamps:00:00 Intro00:20 Your suggestions00:34 Version 100:43 Locking Colors00:54 Font uploader00:59 Contrast Checker02:11 Undo and redo02:30 Docs02:43 Color input03:23 Export options03:37 Custom Colorpicker04:05 Google Fonts04:15 More export options04:39 Bonus features05:13 What's next———#realtimecolors #colors #devdiary
Figma did WHAT!???? - Config 2023 Announcements Juxtopposed 2023-06-22 | Figma has announced lots of cool new features on Config 2023, like the dev mode, improved auto layout and UX, advanced prototyping, variables, and there are even some rumors about AI.Let's check the new features with some examples.// ✨ Let's connect:Twitter: twitter.com/juxtopposedCodePen: codepen.io/JuxtopposedDribbble: dribbble.com/juxtopposedGithub: github.com/juxtopposedThanks for watching!#config23 #figma #devmode #figmatutorial
Whats REALLY up with the latest AI tool releases Juxtopposed 2023-06-19 | Lots of recent AI tool releases, like Spline AI and Framer AI. What's really up here, all hype aside?// ✨ Let's connect:Twitter: twitter.com/juxtopposedCodePen: codepen.io/JuxtopposedDribbble: dribbble.com/juxtopposedGithub: github.com/juxtopposedThanks for watching!#AI #SplineAI #FramerAI #Spline #Framer
Its time to talk about these UI trends Juxtopposed 2023-06-18 | Hey guys! Let's explore some of the simplest yet most popular UI trends right now, like creative buttons, loading screens, progress bars, color blending, 3D models, GSAP animations, locomotive scrolling, huge texts, and so on.// ✨ Helpful links: 10 Simple Yet Cool Popular UI Effects: codepen.io/Juxtopposed/pen/NWExxjaSource Code for Page Scroll Progress Bars: codepen.io/Juxtopposed/pen/bGQprOrSource Code for Spline 3D Landing page with Glass effect: codepen.io/Juxtopposed/pen/PoxNJdeCustom Catsor: codepen.io/Juxtopposed/pen/dyQMQPVEscaping Button: codepen.io/Juxtopposed/pen/abQNwRq// ✨ Let's connect:Twitter: twitter.com/juxtopposedCodePen: codepen.io/JuxtopposedDribbble: dribbble.com/juxtopposedGithub: github.com/juxtopposedThanks for watching!--------// Timestamps: 00:00 Intro00:12 Benefits00:36 Drawbacks00:57 Loading screens01:55 Huge texts02:15 Custom cursors02:37 Bento grids03:56 Color blending04:48 Buttons and CTAs05:40 Progress bars06:00 3D models07:24 Locomotive scrolling08:04 Using GSAP08:54 Outro----------// Websites and designs featured:decriminalizepoverty.orgbuilder.campsuha.comdotlinecode.com/enhttps://oakslane.ch/enhttps://pasqua.it/ubac-store.comvirtualmuseum.fukuoka-kenbi.jpcodepen.io/lucasdellabella/pen/RwMyzRddribbble.com/shots/3505683-Simple-Colors-Iconsdribbble.com/shots/21296565-R-is-for-Risobentogrids.comcodepen.io/elkanodata/details/MWOZozZcodepen.io/ig_design/pen/zXVGemcodepen.io/cassie-codes/pen/LYxBZEGcodepen.io/Vishal4225/pen/gOBzgYZm3.material.io/get-startedhttps://littlebig.band/doublepoint.commotion.zajno.comhttps://redneck.media/#uitrends #gsap #awwwards
I made the best way to choose colors for UI design - Realtime Colors v1 Juxtopposed 2023-05-03 | NEW - Watch the V3 updates: youtu.be/zy7Kf8WiSyE------Let's see how we can choose colors for UI design using Realtime Colors, the first UI color picker that allows for visualizing your UI color choices on a real website.// ✨ Helpful links:Realtime Colors: realtimecolors.comFigma Plugin: figma.com/community/plugin/1234060894101724457Simplest JS Theme Switcher Code: codepen.io/Juxtopposed/pen/OJBxEXVHSL Color Difference Game: codepen.io/Juxtopposed/full/gOBWdaY// ✨ Let's connect:Twitter: twitter.com/juxtopposedCodePen: codepen.io/JuxtopposedDribbble: dribbble.com/juxtopposedGithub: github.com/juxtopposedThanks for watching!--------// Timestamps: 00:00 Intro00:19 Color design is HARD00:39 Introducing Realtime Colors00:58 About Colors01:12 Simplest UI Color Design Tutorial01:25 Step 1: Test with Realtime Colors01:59 Color Schemes02:59 Step 2: Export the Colors03:17 Step 3: Design with the Colors03:38 Step 4: Code with the Colors04:11 60-30-10 Rule04:36 Color Psychology04:57 The Takeaway--------What is Realtime Colors?Basically, it's a tool that allows you to pick your own colors for every element so you can have a better understanding of your color palettes and color design on different devices. - Skip spending several hours on implementing the colors in a design software,- Send the links of the colors to your friends,- Download the palettes in image and code,- Export the palettes on Figma through the plugin,- and many more features, like font picking, etc. :)In this video I'm also going through the implementation of the colors in both design (in Figma) and code, and explaining colors in UI design, including color schemes, the 60-30-10 rule, etc.---------#colors #colordesign #colorpalette #RealtimeColors #uidesign #choosingcolors #webdesign-------► Track Info:► Video Link : youtube.com/watch?v=nIrzhZNPaX8&t=0sMusic provided by TikTak No Copyright Music.
I tried designing and coding grainy textures for a week Juxtopposed 2023-04-24 | In this video, I'm exploring grainy textures in both design and code.// Check the daily designs on CodePen:Day 1: codepen.io/Juxtopposed/pen/ZEqOWxvDay 2: codepen.io/Juxtopposed/pen/vYVXgrGDay 3: codepen.io/Juxtopposed/pen/BaqLEQYDay 4: codepen.io/Juxtopposed/pen/zYmoRKoDay 5: codepen.io/Juxtopposed/pen/PoyWzEq// Check my designs on Dribbble: dribbble.com/juxtopposed/collections/6489830-Daily-Design-Code// Tools mentioned in the video:Noise generator: fffuel.co/nnnoiseSVG to Base64: fffuel.co/eeencode// Custom Grainy Shape Path Code Ready for Copy/Paste:codepen.io/Juxtopposed/pen/WNapjOL// Dribbble designs featured in the video:dribbble.com/shots/15379037-Free-Grainy-Gradientsdribbble.com/shots/13801552-Simple-Timesdribbble.com/shots/17243902-Chroma-Grainy-Gradient-TexturesTimestamps:00:00 Intro00:26 What are Grainy Textures00:54 Designing Grainy Textures02:23 Coding Grainy Textures03:02 Creating Noise SVGs04:21 Importing the Noise SVG into Code04:55 Getting Creative with Grainy Textures-----// Let's connect:Twitter: twitter.com/juxtopposedCodePen: codepen.io/JuxtopposedDribbble: dribbble.com/juxtopposedGithub: github.com/juxtopposedThanks for watching!#grainytexture #codepen #figma #tutorial #designandcode #weeklyadventures #textures
