تجزیه و تحلیل یک برنامه ساده، از طراحی UI تا استقرار، که نشان می دهد چرا برنامه نویسی یک ابزار جادویی برای طراحان است.

Figma، Adobe XD، Photoshop، Wacom Tablet، Sketchbook… همه ابزارها برای رابط ها و طراحان وب، بله؟ ۲ دقیقه وقت بگذارید و سعی کنید به خاطر بیاورید که چرا می خواهید طراح شوید و چرا از طراحی چیزها لذت می برید.

به احتمال زیاد به این دلیل است که دوست دارید خلق کنید. شما یک فرد خلاق هستید شاید شما از کودکی با تجربیات هنری شروع کردید، سپس این انرژی خلاقانه را به حل مسئله تبدیل کردید و در عین حال به بیان بصری آن ادامه دادید: شما یک طراح، یک حل کننده خلاق مشکل شدید.

امروز، من سعی خواهم کرد به شما نشان دهم که چگونه برنامه نویسی یک ابزار دست کم گرفته شده برای بیان ذهنیت حل مسئله خلاقانه شما با ایجاد یک ایده واقعی است. ژنراتور SVG از ابتدا پس بیایید وارد آن شویم!

مرحله 1: ایده ای دریافت نکنید. یک مساله حل کن

ما در اینجا به ملاحظات تجاری عمیق وارد نشدیم، اما دیدن مشکلاتی که با آن مواجه هستید و تصمیم به حل آن‌ها خودتان راهی عالی برای شروع است.

در طول کار مشتری، من به برخی از امواج SVG برای تصویرسازی نیاز داشتم. بنابراین من به دنبال یک مولد موج گشتم: تعداد زیادی مولد موج رنگارنگ با ورودی های پارامتریک وجود داشت اما هیچ مولد موج سینوسی ساده و کاملی وجود نداشت. تصمیم گرفتم آن را روی ابزار ریاضی خود بکشم جئوجبرا و سپس آن را به SVG صادر کنید.

باشه ولی نه سریع و ما دوست داریم کارهایمان را سریع انجام دهیم. اما صبر کنید… چرا یک مولد امواج سینوسی کامل ایجاد نمی کنیم؟ بدون معادلات و نرم افزار ریاضی خسته کننده برای باز کردن، فقط یک منحنی و یک دکمه صادرات. متوجه شدید، حالا بیایید آن را طراحی کنیم.

نکات سریع: اگر به دنبال مشکل هستید، به دنبال الگوهای رفتاری در زمینه کاری خود باشید. آنها همیشه یک مشکل عمیق، دردناک و شناخته شده را نشان می دهند.

مرحله 2: راه حل را تا حد امکان ساده طراحی کنید

دو قانون اصلی: قانون اول، به این فکر کنید که چه کسی از آن استفاده خواهد کرد. قانون دوم، پیش بینی کنید که آنها از نحوه عملکرد آن چه انتظاراتی دارند. پس کی؟ توسعه دهندگان فرانت اند آنها منتظر چه هستند؟ منحنی که با بازخورد مستقیم و دکمه صادرات قابل ویرایش است.

طراحی وایرفریم

طراحی با فای بالا

یک نکته سریع: می توانید آن را بگیرید طرح فیگما از برنامه برای نکات فنی بیشتر در مورد طراحی.

مرحله 3: آن را به صورت واقعی بسازید

به عنوان یک طراح، توقف در مرحله دو کاملاً خوب است. اما تصور کنید اگر بتوانید چیزی را که طراحی می کنید بسازید! شما از قبل می دانید که می توانید هر چیزی را که می خواهید ایجاد کنید.

می‌توانید کدنویسی را راهی برای ترجمه رابط کاربری خود ببینید که مطمئناً به یک برنامه .com ختم می‌شود که برای همه قابل استفاده است. به همین دلیل است که «بهترین زبان‌ها» اهمیتی ندارند. کدنویسی فقط ابزاری برای بیان خلاقیت شما و ساختن چیزهایی برای دیگران است. و به عنوان یک طراح، یک فرد خلاق، این ممکن است جالب به نظر برسد.

رابط کاربری به برنامه کاربردی

هر رابط برنامه وب را می توان از طراحی UI به کد با HTML/CSS/JS ترجمه کرد. چگونه می توانیم نقش هر یک از آن 3 “زبان” را ببینیم:

HTML: من یک دکمه می خواهم.

CSS: من می خواهم دکمه ام گرد به نظر برسد.

JS: من می خواهم وقتی روی دکمه خود کلیک می کنم اتفاقی بیفتد.

برای ساختن اپلیکیشن ما، از Svelte استفاده خواهم کرد. Svelte یک کامپایلر جاوا اسکریپت است که به ما این امکان را می دهد تا از هر سه “زبان” در یک مکان استفاده کنیم. بنابراین، بیایید ببینیم که چگونه کد می‌تواند رابط کاربری ما را به چیزهای کاربردی ترجمه کند.

کد دکمه HTML

“سلام مرورگر وب، من می خواهم دکمه ای به نام “exportButton” و همه چیز در یک تابع به نام “downloadSVGpath” زمانی که شخصی روی دکمه کلیک می کند انجام شود 🙂 با تشکر”

کد دکمه سبک CSS

«سلام مرورگر وب، من می‌خواهم این قوانین سبک را در دکمه اصلی HTML من اعمال کنید: من یک گوشه گرد زیبا در 16 پیکسل، یک نشانگر ماوس وقتی آن را نگه می‌داریم، هیچ حاشیه‌ای نمی‌خواهم، اما رنگ سرد می‌خواهم. گرادیان به عنوان رنگ پس زمینه سپس، می‌خواهم فونت داخل دکمه، رنگ آن را روی #fcfcfc تنظیم کند و از نوع Inter استفاده کند (لطفاً پررنگ). مانند طرح فیگما، من نیز می‌خواهم موارد را در مرکز دکمه قرار دهم و بالشتک اضافه کنم. اوه، و یک سایه ظریف اضافه کنید 🙂 با تشکر.

رسم تابع منحنی SVG

سلام، مرورگر وب، هر بار که نوار لغزنده ما حرکت می‌کند، می‌خواهم این تابع را اجرا کنم: می‌خواهم یک منحنی را در داخل فریمی که من در کد HTML خود تعریف کرده‌ام بکشید. من همچنین می‌خواهم که خط منحنی من در هر کلاه گرد به نظر برسد و رنگ و عرضی داشته باشد که داخل متغیرها تعریف کرده‌ام. پارامترهای تابع سینوسی را از مقادیر ذخیره شده اسلایدرها می گیرید. در نهایت، در حالی که متغیر x شما به عرض کل در محور x کادر ما نرسیده است، شما موقعیت نقطه محور y معادله سینوسی را حل می‌کنید و منحنی را رسم می‌کنید 🙂 با تشکر.

نکات سریع: می توانید آن را بگیرید کد منبع فایل های برنامه را بررسی کنید.

خلاصه

• کدنویسی فقط ابزاری است که به ما امکان می دهد استعاره های بصری خود را به چیزی ترجمه کنیم که همه بتوانند از آن استفاده کنند. چقدر باحاله؟!
• کدنویسی به ما کمک می کند تا اهداف طراحی خود را تصور کنیم و ما را مجبور می کند فراتر از محدوده بصری را ببینیم: دکمه من چگونه باید کار کند؟ هنگام شناور بودن چگونه به نظر می رسد؟ چگونه می توان مدال پاپ آپ من را برای دستگاه های تلفن همراه طراحی کرد؟
• کدنویسی به ما این امکان را می دهد که ایده عجیبی را که «فقط برای سرگرمی» طراحی کرده ایم، ایجاد کنیم، به جای اینکه مطالعه موردی طراحی را در نمونه کارها تحت برچسب «پروژه شخصی» قرار دهیم.
• کدنویسی به ما نشان می دهد که برای دستیابی به آنچه طراحی کرده ایم چقدر کار لازم است. بنابراین ما می توانیم نیازها، چالش ها و مدیریت منابع مشتریان طراحی خود را بهتر درک کنیم.
• کدنویسی انعطاف پذیر است. می‌توانید پیکسل وب‌سایت Netflix را با HTML/CSS خالص، Vue Framework یا هر فریم‌ورک وب دیگری به‌طور کامل تکرار کنید.