کداکسپلور | CodeExplore
7.92K subscribers
1.93K photos
300 videos
103 files
1.69K links
با کد اکسپلور یاد بگیر، لذت ببر و بروز باش ⚡️😉

سایت کد‌اکسپلور:
CodeExplore.ir
👨🏻‍💻 ارتباط با ما :
@CodeExploreSup
گروه :
@CodeExplore_Gap
تبلیغات در کد اکسپلور :
@CodeExploreAds
Download Telegram
This media is not supported in your browser
VIEW IN TELEGRAM
یه سایت خفن با ایده های جدید و خفن برای برنامه‌نویسان فرانت و طراحان سایت 🔥

▪️با این سایت خیلی راحت میتونید به کلی ایده طراحی دسترسی داشته باشید و همیشه طراحی های جدید و متنوع انجام بدید.

👉🏻 dribbble.com

#ideas #design
☕️ @CodeExplore
13🔥5❤‍🔥1
🎨 انتخاب پالت رنگ برای دیزاین سایت

‼️ یکی از مشکلات که بشخصه خودم و دوستان دیگه ای که در زمینه طراحی سایت فعالیت میکنیم اینه که نمی دونیم چطوری یک پالت رنگ خوب و مدرن برای سایت هامون انتخاب کنیم 😢

✔️ ولی خب با استفاده از 6 سایت زیر می تونیم به راحتی رنگ مربوطه برای هر بخش از دیزاین سایتمون رو انتخاب کنیم ✌️ :

1️⃣ colorhunt.co

2️⃣ colormind.io

3️⃣ coolors.co

4️⃣ mycolor.space

5️⃣ cssgradient.co

6️⃣ khorma.co

پست های مربوطه به این پست را مشاهده کنید😀

🔗 https://t.me/CodeExplore/1123

🔗 https://t.me/CodeExplore/997

#css #color #design #site
☕️ @CodeExplore
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥123❤‍🔥1
ایده ها و طرح های خلاقانه برای ایده گرفتن در ساخت برنامه های مختلف🔥

توی پست های قبلی سایت dribbble رو معرفی کردیم. این سایت هم دقیقا مشابه همونه و دیزاین های فوق العاده جذابی داره که میتونید برای طراحی سایت یا ... ازشون استفاده کنید 💯

🌐 https://behance.net

#design #frontend
☕️ @CodeExplore
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥83❤‍🔥1
مجموعه‌ای از بهترین طراحی‌های سایت رو میتونید توی این سایت ببینید. یک سری از طراحی‌ها واقعا خارق‌العاده هستن☝️
🌐 https://www.awwwards.com

#frontend #design
☕️ @CodeExplore
Please open Telegram to view this post
VIEW IN TELEGRAM
8❤‍🔥3🔥2💔1
منبعی پر از الگوهای طراحی برای وب و اپلیکیشن های موبایل و ... که میتونید ازشون برای طراحی ایده بگیرید 🔝

👉 https://uplabs.com

#design #ideas
☕️ @CodeExplore
Please open Telegram to view this post
VIEW IN TELEGRAM
10🔥3❤‍🔥2
لیستی از منابع UI، فریم ورک های CSS، کتابخانه‌های UI و ابزار هایی در رابطه با طراحی رابط کاربری ⚡️

🌪 https://github.com/bradtraversy/design-resources-for-developers

#design #ui #template
☕️ @CodeExplore
Please open Telegram to view this post
VIEW IN TELEGRAM
11🔥5❤‍🔥2😁1
تو این سایت دیزاین سایت های مختلف قرارداده میشن و میتونین برای طراحی های خودتون ازشون ایده بگیرید 🔝

🔗 https://webdesign-inspiration.com

#website #design
☕️ @CodeExplore
Please open Telegram to view this post
VIEW IN TELEGRAM
14❤‍🔥5🔥5
🆓 توی این سایت آیکن های متفاوت رایگان و پراستفاده هستش که میتونید برای طرح های مختلف سایت یا اپلیکیشن هایی که میزنید استفاده کنید.

🔗 https://www.streamlinehq.com/icons/core-sets

#icons #free #design
☕️ @CodeExplore
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥6❤‍🔥31
منابع خلاقانه و کاربردی Design برای طراحا و برنامه نویسا که میتونید توی طراحی هاتون ازشون استفاده کنید.

🌪 https://github.com/gztchan/awesome-design

#design #awesome
☕️ @CodeExplore
Please open Telegram to view this post
VIEW IN TELEGRAM
12🔥2❤‍🔥1
فیگما(Figma) دقیقا چیه؟ 💡

🔴‏Figma یه ابزار آنلاین برای طراحی رابط کاربری (UI) و تجربه کاربری (UX) هست که خیلی از طراح‌ها و توسعه‌دهنده‌ها ازش استفاده می‌کنن. چون تحت وبه، لازم نیست چیزی نصب کنی و همه‌چیز توی مرورگر اجرا می‌شه. این ابزار برای طراحی‌های برداری و نمونه‌سازی عالیه، یعنی می‌تونی طرح‌های پیچیده و تعاملی بسازی و تست کنی.

🟠یه ویژگی خیلی خفن Figma اینه که چند نفر می‌تونن همزمان روی یه پروژه کار کنن. فرض کن مثل Google Docs، هرکی تغییر بده، بقیه هم همون لحظه می‌بینن. اینطوری کار تیمی خیلی راحت‌تر و سریع‌تر پیش می‌ره. حتی می‌تونید روش کامنت بذارید و نظر بدید تا کاراتون دقیق‌تر بشه.

‏Figma، برای ساخت سیستم‌های طراحی هم خیلی کاربردیه. یعنی می‌تونی اجزا و سبک‌های مختلف رو یه‌بار تعریف کنی و بعد توی کل پروژه ازشون استفاده کنی. اینطوری طراحی‌ها همیشه هماهنگ و منظم می‌مونن. علاوه بر این، Figma یه عالمه پلاگین داره که کلی امکانات اضافه بهت می‌ده؛ از انیمیشن گرفته تا مدیریت رنگ‌ها و حتی کارهای اتوماتیک.

🔗لینک فیگما

#figma #frontend #design
☕️ @CodeExplore
Please open Telegram to view this post
VIEW IN TELEGRAM
10🔥4❤‍🔥2
👑تا حالا یه لیست کامل از دیزاین پترن های معروف رو نشونتون دادم؟ معرفی انواع دیزاین پترن هارو اینجا باهم میبینیم:

1⃣ سینگلتون (Singleton)
فقط یک نمونه از یک کلاس ساخته می‌شه و همه جا قابل دسترسه. مثل کنترل از راه دور تلویزیون که فقط یک دونه ازش هست.

2⃣ فکتوری (Factory)
برای ساختن اشیا بدون مشخص کردن نوع دقیقشون استفاده می‌شه. مثل وقتی که یه رستوران خودش نوع پیتزا رو انتخاب می‌کنه.

3⃣ آبزرور (Observer)
یک شیء تغییرات رو به بقیه اطلاع می‌ده. مثل وقتی که یه نفر توی گروه تلگرامی پیامی می‌فرسته و بقیه مطلع می‌شن.

4⃣ دی‌کوراتور (Decorator)
اضافه کردن ویژگی‌های جدید به یک شیء بدون تغییر کد اصلی. مثل تزئین کردن یه کیک بدون تغییر دادن خود کیک.

5⃣ استراتژی (Strategy)
انتخاب روش در زمان اجرا. مثل انتخاب مسیر مختلف برای رسیدن به یه مقصد.

6⃣ آداپتور (Adapter)
تبدیل یک اینترفیس به اینترفیسی که نیاز داری. مثل استفاده از یه تبدیل برق برای دستگاهی که دوشاخه متفاوت داره.

7⃣ فَساد (Facade)
ایجاد یک رابط ساده برای یه سیستم پیچیده. مثل استفاده از یه ریموت برای کنترل تلویزیون.

8⃣ پروکسی (Proxy)
نماینده‌ای برای دسترسی به یه شیء دیگه. مثل استفاده از یه کلید یدکی برای باز کردن قفل.

9⃣ اینترپریتر (Interpreter)
تفسیر جملات و دستورات. مثل ترجمه کردن یه زبان به زبان دیگه.

0⃣1⃣ کامپوزیت (Composite)
ساختاردهی اشیاء به صورت درختی. مثل پوشه‌ها و فایل‌ها در کامپیوتر.

1⃣1⃣ بیلدر (Builder)
ساختن اشیاء پیچیده مرحله به مرحله. مثل ساختن یه لگو با قطعات مختلف.

2⃣1⃣ تمپلیت (Template)
تعریف الگوریتم با بعضی مراحل ثابت و بعضی مراحل قابل تغییر. مثل داشتن یه قالب ثابت برای نامه‌ها اما تغییر دادن متنش.

3⃣1⃣ ممنتو (Memento)
ذخیره و بازیابی وضعیت. مثل دکمه "Undo" در نرم‌افزارها.

4⃣1⃣ چین آف ریسپانسیبیلیتی (Chain of Responsibility)
انتقال درخواست از یک شیء به شیء دیگه تا یکی پردازش کنه. مثل پاس دادن تماس تلفنی به نفر بعدی تا مشکلت حل بشه.

این الگوها به برنامه‌نویس‌ها کمک می‌کنن تا مسائل رایج رو به شکل بهتری حل کنن و کدشون تمیزتر و قابل نگهداری‌تر باشه.

#design_pattern
☕️ @CodeExplore
Please open Telegram to view this post
VIEW IN TELEGRAM
13🔥3❤‍🔥2
چند منبع الهام برای UI و UX 🔥

1️⃣ Behance
🔹یک ویترین بزرگ برای دیدن پروژه‌های طراحی از طراحای حرفه‌ای سراسر دنیاست. از طراحی اپ گرفته تا برندینگ و انیمیشن، همه چی توش هست. برای ایده گرفتن و آشنا شدن با ترندهای جدید عالیه!

2️⃣ Dribbble
🔸مثل یک شبکه اجتماعی برای طراحاست؛ پر از طراحی رابط کاربری، لوگو، آیکون و UI اپ‌ها. اگه دنبال الهام خلاقانه هستی، حتماً یه چرخی توش بزن.

3️⃣ Awwwards
🔹سایتیه که طراحی‌های برتر وب‌سایت‌ها رو انتخاب و امتیازدهی می‌کنه. به خلاقیت، تجربه کاربری و جذابیت بصری سایت‌ها نمره می‌دن. خیلی خوبه برای دیدن طراحی‌های خفن و متفاوت.

4️⃣ Mobbin
🔸آرشیوی از طراحی‌های اپلیکیشن‌های واقعی با دسته‌بندی منظم. مثلا می‌تونی UI لاگین، سایدبار یا پرداخت اپ‌های معروف رو ببینی. عالیه برای دیدن الگوهای کاربردی و به‌روز.

5️⃣ UI Movement
🔹هر هفته مجموعه‌ای از طراحی‌های خاص و جذاب رابط کاربری منتشر می‌کنه. اگه می‌خوای سریع با ترندهای طراحی آشنا بشی و الهام بگیری، این یکی خیلی خفنه.

#ui #ux #design
☕️ Telegram | Website | Discord
🔥8😍2
عکس مفید برای کسایی که ui ux کار میکنن ✅️

🔸️چی هست؟ داره میگه یوزر وقتی گوشی دستشه توی این محدوده ها راحت میتونه انگشتاش رو حرکت بده(توی محدوده های سبز) توی محدوده های زرد یکم سخت تر میشه و توی محدوده های قرمز واقعا نشدنیه.

🔹️سمت راستی برای دست راسته و سمت چپی برای دست چپ، و وسطی هم برای وقتیه که یوزر داره با هردوتا دستش کار میکنه.

#ui #ux #design #figma #mobile #frontend
☕️ Telegram | Website | Discord
17❤‍🔥8🔥1😍1
پروژه قبول کردی و نمیدونی چه رنگی براش انتخاب کنی که مناسب باشه؟
این سایت دقیقا برای خودته😃

توی این سایت شما میتونید بصورت لایو، رنگ ها و فونت های سایت رو تغییر بدید رو تغییر بدید و بین دارک و لایت هم سوییچ کنید که متوجه بشین رنگ و فونت ها مناسب کارتون هستن و خروجی تمیزی در میاد یا باید تغییرش بدید تا به خروجی مناسبی برسید🔥💯

🔗 https://www.realtimecolors.com

همچنین این ابزار پلاگین فیگما هم داره که برای کسایی که با فیگما کار میکنن کارو ساده میکنه

حمایت و ری اکشن فراموش نشه❤️‍🔥👑

#pallet #stable #design
☕️ Telegram | Website | Discord
🔥81😍1
سه تا ابزار محبوب که کار طراحای سایت رو راحتر میکنن💯

1- برای بهینه تر کردن فایل های CSS پروژه میتونی ازش استفاده کنی. فایلاتو آپلود میکنی و جاهایی کدهات که میتونه بهینه تر باشه رو بهت میگه.

🔗 https://projectwallace.com

2- دریافت دکمه های انیمیشن دار ، برای دارک مود سایت
🔗 https://toggles.dev

3- برای ساخت bento grid میتونی از سایت های پایین استفاده کنی که یکی برای CSS و یکی برای Tailwind هست

🔗 https://tailwindgen.com
🔗 https://cssgridgenerator.io

اگر دوست داری برای زمینه های دیگه هم ازین ابزارای محبوب بزاریم، ری اکشن بزن و برای دوستات هم بفرست🧡🔥

#web #design #tools
☕️ Telegram | Website | Discord
🔥82❤‍🔥1
این سایت کلی ابزار خفن طراحی داره که میتونید برای دیزاین سایتتون بصورت رایگان ازش استفاده کنید😃
مثلا میتونید ایزومتریک های جذاب، آبجکت های 3D باحال، پالت رنگی های کاربر پسند و انواع انیمیشن ها مثل abstract, holographic و... رو بسازید.

🔗 https://www.fffuel.co/

#design #tool
☕️ Telegram | Website | Discord
12❤‍🔥1
🎨💡 برنامه‌نویسی ولی با طراحی رابط کاربری مشکل داری؟

😵‍💫 اگه جزو اون دسته‌ای هستی که وقتی به طراحی UI می‌رسی یا خسته می‌شی یا هرچی می‌زنی زشت درمیاد، این ابزار برات نجات‌بخشه!

🔧 ‏AppAlchemy یه ابزار هوش مصنوعیه که فقط با یه توضیح ساده (مثلاً: یه اپ فروشگاهی با سبد خرید و صفحه محصولات) برات طراحی UI تمیز، مدرن و قابل‌استفاده تولید می‌کنه!

مناسب برای برنامه‌نویس‌هایی که می‌خوان سریع‌تر پروتوتایپ بزنن یا طراحی اولیه پروژه‌ها رو بسازن بدون اینکه وقت زیادی بذارن.

🚀 کد هر قسمتی از UI طراحی شده رو بخوای هم در اختیارت قرار میده.

https://appalchemy.ai/

#design #ai
☕️ Telegram | Website | Discord
🔥13😍62❤‍🔥1
🎨 دنبال ایده برای طراحی سایت می‌گردی؟
اینجا ۴ تا از بهترین منابع رو برات آوردیم.

🔹 Awwwards
منتخب طراحی‌های برتر و خلاقانه از سراسر دنیا 🌍

🔹 Land-book
گالری متنوعی از لندینگ‌پیج‌ها با موضوعات مختلف

🔹 One Page Love
صفحه‌های تک‌صفحه‌ای حرفه‌ای و مینیمال ❤️

🔹 Godly
کلکسیونی از وب‌سایت‌های خلاقانه و حرفه‌ای برای الهام گرفتن 🚀

#website #design #idea
☕️Telegram | Website | Discord
🔥8❤‍🔥1