https://virgool.io/feed/@ahmadyosofvand گرافیست و طراح رابط کاربری Designer4.ir fa 2026-06-07 17:29:52 https://files.virgool.io/upload/users/19103/avatar/QqlQuT.png?height=120&width=120 https://virgool.io/@ahmadyosofvand https://virgool.io/@ahmadyosofvand/%D8%B3%D8%A8%DA%A9-%D9%87%D8%A7%DB%8C-%D8%B7%D8%B1%D8%A7%D8%AD%DB%8C-%D8%B3%D8%A7%DB%8C%D8%AA-dyml7cyb5rsu سبک های طراحی سایتسبک طراحی هر سایت بسته به نوع کاربرد و خدماتی که ارائه می دهد مشخص می شود و طراح باید این موضوع را در نظر بگیرد که بر اساس نوع سایت و زمینه فعالیتش قالب آن را طراحی کند و طرح های خود را اجرا کند تا ضریب موفقیت وب سایت را بالا ببرد و در نتیجه آن هزینه و زمانی که مشتری برای پروژه گذاشته است نتیجه قابل قبولی به او و تیمش بدهد در غیر این صورت هم طراح با یک نمونه کار ضعیف مواجه میشود و هم هزینه و وقت مشتری هدر می رود. هزینه ای که اگر در ابتدای کار با دقت انجام شود و فرد مناسبی انتخاب شود در پایان کار پشیمانی را برای مشتری به جا نمی گذارد. ‌در این مقاله شما را با ۵ سبک مختلف طراحی سایت آشنا می کنیم و امیدواریم بتوانیم به شما کمک کنیم تا برای پروژه خود سبک مناسب را پیدا کنید .در بین سبک های معرفی شده دو سبک شناخته شده و رایج که عبارتند از طراحی تخت (Flat Design) و متریال دیزاین (Material Design) بیشتر از بقیه مورد استفاده قرار می گیرند و می توانند بهترین نتیجه ها را به شما بدهند. دیزاینر چهار می تواند در اجرای تمام این سبکها کنار شما باشد و با سابقه ای که در این زمینه دارد به شما اطمینان می دهد که پروژه شما را با بهترین کیفیت اجرا کند. اتفاقی که در این سال ها و تجربه همکاری با شرکت های بزرگ و کوچک و افراد مختلف نشان داده ایم و توانسته ایم رضایت مشتریان خود را کسب کنیم و همکاری های بلند مدتی را با آن ها داشته باشیم.۱- طراحی وب سایت تخت (Flat Design)طراحی تخت (طراحی فلت) جدیدترین و محبوب ترین سبک طراحی است که در این چند سال مورد استفاده طراحان قرار گرفته و با استقبال کارفرماها مواجه شد ،سبکی که استاندارد تر از سایر سبک های طراحی سایت است و موتورهای جستجو نیز از این سبک استقبال می کنند در نتیجه معمولا پیشنهاد طراحان استفاده از این مدل طراحی سایت است. این سبک به خاطر مناسب بودن برای طرح های ریسپانسیو مورد توجه موتورهای جستجو هم قرار گرفت و سایتهایی که طرح فلت داشتند در رتبه های بالای موتوهای جستجو قرار گرفتند. المانهای کمتری در طراحی تخت استفاده میشود و طرح پایانی سبک تر از سایر سبک هاست. این سبک هم مانند سایر سبک ها در ابتدا ساده و محدود به رنگ های خاصی بود ولی به مرور زمان و استفاده از گرادیانتهای مختلف طرح های زیباتر و کامل تری را شاهد هستیم .در این نوع طراحی تمام استایل هایی که  باعث سه بعدی و واقعی به نظر آمدن می شود حذف می شوند؛ مانند سایه های شدید ، شیب و بافت های نمایش دهنده جنس مانند چوب و چرم و … . البته در طرح های جدید و ترند های جدید با اجرای درست سایه ها می توان از آنها برای زیبا سازی وب سایت استفاده کرد و طرح ها را جذاب تر کرد ، اتفاقی که باعث زیباتر شدن طرح ها شده و به عمق دادن به طرح ها کمک می کند ، طرح ها را از سادگی اولیه ای که قبلا این سبک داشت خارج کرده و میتواند در کنار رنگ بندی مناسب طرحی زیبا اجرا شود. رنگ ها در ابتدای ورود این سبک محدود به پالت های خاصی می شدند که جذاب نبودند ولی امروزه دست طراحان در انتخاب رنگ باز تر است و همین امر باعث جذاب تر شدن طرح ها شده.۲- طراحی وب سایت تک صفحه ایدر این سایتها تمام اجزا در یک صفحه قرار داده می شوند و کاربر با اسکرول کردن بین بخش های مختلف جابجا میشود. این سبک مناسب سایتهایی است که محتوی کمی دارند و نیازی به ایجاد صفحات مختلف نیست . با توجه به استفاده زیاد از گوشی و تبلت ،سایتهای تک صفحه ای میتوانند گزینه مناسبی برای این دستگاه ها باشد و کاربران به راحتی بین بخشهای مختلف جابجا شوند .۳-طراحی وب سایت انیمیشنیسایتهای انیمیشنی جذابیت بصری زیادی دارند و کاربر مدت زیادی در سایت میماند ولی برخلاف طرح های تخت کاربردی نیستند و فقط در موارد خاص مورد استفاده قرار میگیرند ، این طرح ها اگر با فلش اجرا شده باشند در تمام مرورگرها پشتیبانی نمی شوند و کاربر را با مشکل مواجه می کنند ولی این طرح ها امروز با کدنویسی هم اجرا می شوند و مشکل طرح های فلش را ندارند. https://virgool.io/p/dyml7cyb5rsu/%F0%9F%93%B7%D9%85%D8%B9%D8%B1%D9%81%DB%8C%D8%B3%D8%A8%DA%A9%D9%87%D8%A7%DB%8C%D8%B7%D8%B1%D8%A7%D8%AD%DB%8C%D8%B3%D8%A7%DB%8C%D8%AA ۴- طراحی وب سایت متریال دیزاین (Material Design)این سبک در تمامی مجموعه محصولات مرتبط با گوگل از GOOGLE DOCSگرفته تا GOOGLE SEARCH و GOOGLE MAPS  استفاده میکند . متریال دیزاین را میتوان نسخه به روز شده طراحی تخت دانست که با انیمیشن ها و گرافیک پیچیده تر نمای زیباتری دارد و مهمترین ویژگی های طراحی متریال در مقایسه با طراحی تخت عبارتند از؛ استفاده از سایه ها، محور Z و عمق در صفحه، انیمیشن های پیچیده ولی سبک و بکارگیری ترکیب رنگ های مشخص. گوگل طراحی متریال را در ژوئن ۲۵, ۲۰۱۴ در کنفرانس ۲۰۱۴ I/O گوگل معرفی کرد.۵- طراحی وب سایت پارالاکس (Parallax Scrolling Websites)طرح های پارالاکس را میتوان از زیبا ترین طرح های موجود در اینترنت دانست که بسیار مورد توجه بازدید کنندگان قرار میگیرند . با اسکرول کردن صفحه به سمت پایین افکت ها و طرح هایی را مشاهده میکنیم که ما را غافلگیر میکند .در این شیوه برای ایجاد حس عمق دهی ، هنگام اسکرول صفحه تصویر زمینه با سرعت کمتری نسبت به سایر بخش‌های صفحه حرکت می‌کند .بزرگترین نقطه ضعف این طرح ها پایین بودن رتبه سئو آنهاست که باعث شده فقط در موارد خاص مورد استفاده قرار بگیرند ، مواردی مانند معرفی یک محصول ، معرفی شرکت و … http://designer4.ir/%d9%85%d8%b9%d8%b1%d9%81%db%8c-%d8%b3%d8%a8%da%a9-%d9%87%d8%a7%db%8c-%d8%b7%d8%b1%d8%a7%d8%ad%db%8c-%d8%b3%d8%a7%db%8c%d8%aa/ ارتباط با ما09339851065https://designer4.ir/در پایان امیدواریم که توانسته باشیم با معرفی این سبک ها و آشنایی شما عزیزان با آنها به شما کمک کرده باشیم تا بر اساس نیاز خود و نوع فعالیت وبسایتتان سبک مناسب را انتخاب کرده و بتوانید فعالیت خود را در دنیای مجازی آغاز کنید و طرح مد نظرتان را اجرا کنید. در صورتی که نیاز به مشاوره برای شروع کار در این زمینه داشتید می توانید با ما در ارتباط باشید. احمد یوسفوند احمد یوسفوند Tue, 23 Mar 2021 21:10:05 +0430 https://virgool.io/@ahmadyosofvand/%D8%B7%D8%B1%D8%A7%D8%AD%DB%8C-%D8%B1%D8%A7%D8%A8%D8%B7-%DA%A9%D8%A7%D8%B1%D8%A8%D8%B1%DB%8C-%DA%86%DB%8C%D8%B3%D8%AA-pzf42ga1zcto ارتباط با ما09339851065https://designer4.irطراحی رابط کاربری طراح با رعایت اصول طراحی واسط کاربری (UX) سعی می کند ارتباط کاربر با ماشین را ساده و دلنشین کند. و استفاده از ابزار را ممکن میکند.یکی از مواردی که طراحی رابط کاربری به صورت چشمگیر مورد استفاده قرار میگیرد در طراحی سایت و اپلیکیشن است.  که هر ساله با ترند های جدید سعی در ساده کردن ارتباط کاربر با سایت و اپلیکیش را دارد. طراح میبایست تعیین کند که المان ها در چه جایی قرار گیرد. باکس ها ، فرم ها ، بنرها ، و … چطور و کجا قرار گیرند و همچنین از چه ترکیب رنگی ، تصاویر و فونتی استفاده شود.ابزارهای این کار هم روز به روز بیشتر و به روز تر میشوند تا بتوانند نیازهای طراح را برطرف کنند و کار را برای آنان ساده تر کنند. ایکس دی، فیگما، اسکچ، فتوشاپ و … هر چند وقت یکبار با اخبار امکانات جدید و بخش های جدید خود طراحان را غافلگیر کرده و سعی می کنند اشکالات خود را هم برطرف کنند. ابزار طراحی در نتیجه کار طراح دخالتی ندارد و طراح می تواند با توجه به شرایط خود و استعدادش ابزار مورد نظرش را انتخاب کند و فعالیت کند. در گروه های طراحان معمولا این بحث داغ هست و هر طراح سعی میکند نظر خود را به بقیه تحمیل کند ولی به طور کلی هر کدام از نرم افزارهای فوق امتیاز ها و اشکالات خود را دارند و این طراح است که باید انتخاب کند.طراحی ریسپانسیو (واکنش گرا)با توجه به اینکه کاربران به مرور زمان بیشتر به سمت موبایل و تبلت می روند و استفاده از این وسایل روز به روز در حال زیاد شدن است . طراح باید این مورد را در طرح خود در نظر بگیرد و با ساده کردن طرح ها و رعایت گرید بندی های استاندارد در کنار زیبایی این امکان را به تیم کدنویسی بدهد تا در اجرای طرح برای نسخه های موبایل و تبلت مشکلی نداشته باشند و طرح انعطاف پذیر باشد. در نتیجه باید از اجرای طرح های گرافیکی و پیچیده پرهیز شود و تا حد ممکن طرح ساده باشد. ترند هایی که هر ساله اعلام می شود و طراحان برتر معرفی می کنند هم در این راه قرار می گیرد و تلاش می کند با اصول ریسپانسیو هماهنگ تر باشد.آموزشخوشبختانه در این سالها طراحان حرفه ای و اساتید این حوزه سعی در اشتراک دانش خود داشته و با برگذاری دوره های تخصصی و حرفه ای رایگان و پولی راه را برای طراحان جدید باز می کنند. اگه شما هم علاقه مند به این رشته هستید می توانید از همین امروز شروع کنید. آموزش های رایگان فراوانی به زبان فارسی و انگلیسی در یوتیوب ، آپارات ، مدیوم و سایت های دیگر هستند که می توانید از آنها استفاده کنید.مشاهده نمونه کارها http://designer4.ir/website/ ارتباط با ما09339851065https://designer4.ir احمد یوسفوند احمد یوسفوند Thu, 18 Feb 2021 23:36:36 +0330 https://virgool.io/@ahmadyosofvand/%D9%85%D8%B9%D8%B1%D9%81%DB%8C-%D8%A7%D8%A8%D8%B2%D8%A7%D8%B1-marquee-tool-%D8%AF%D8%B1-%D9%81%D8%AA%D9%88%D8%B4%D8%A7%D9%BE-%D9%82%D8%B3%D9%85%D8%AA-%D8%A7%D9%88%D9%84-zdqol5icdbw2 Marquee Toolآموزش ابزار های فتوشاپبرای استفاده از این ابزار ، همونطور که در تصویر بالا مشاهده میکنید میتوانیم از طریق نوار ابزار ها (tool box) و انتخاب دومین ابزار و همچنین کلید “M” کیبورد ، آن را فعال کنیم . با استفاده از این ابزار میتوانیم انتخاب هایی مستطیل ، مربع ، دایره و بیضی شکل و همچنین خط های افقی و عمودی را داشته باشیم .با انتخاب کردن این ابزار ، چهار گزینه در اختیار ما گذاشته میشود که بر اساس نیاز یکی را فعال میکنیم .Rectangular Marquee ToolElliptical Marquee ToolSingle Row Marquee ToolSingle Column Marquee ToolRectangular Marquee Toolاولین گزینه (Rectangular Marquee Tool) این امکان را به ما میدهد که انتخاب هایی مربع و مستطیل شکل را داشته باشیم ، که در ادامه بصورت تصویری آن را نمایش خواهیم داد.برای مثال در تصویر زیر ما قصد داریم یک برش مربعی شکل از تصویر را انجام بدیم .بعد از انتخاب کردن قسمت مورد نظر ، امکان کپی کردن ، برش دادن ، حذف کردن و … رو به ما میده . در حالت کلی زمانی که این ابزار را فعال میکنیم یعنی هر عملی که انجام میدهیم در همین محدوده انتخاب شده باید صورت بگیرد .به طور مثال زمانی که این انتخاب انجام میشود ، ما میتوانیم با استفاده از منوی image با انتخاب گزینه adjustments و سپس گزینه black & white قسمت انتخاب شده را سیاه و سفید کنیم ، مثل تصویر زیر .برای انتخاب یک مربع کامل ، زمانی که از این ابزار استفاده میکنیم ، کلید شیفت (shift) کیبورد را باید نگه داریم .درصورتی که قصد داریم انتخابی که انجام میدهیم شامل چند قسمت از تصویر باشد ، زمانی که ابزار مارکویی را انتخاب کردیم ، از آیکن Add to a Selection که در تصویر زیر با فلش قرمز رنگ مشخص کرده ایم ، آن را فعال میکنیم.Elliptical Marquee Toolاین ابزار هم دقیقا مانند Rectangular Marquee Tool کار میکند و امکانات بالا را در اختیار ما قرار میدهد با این تفاوت که انتخاب هایی دایره و بیضی شکل میتوانیم داشته باشیم .آموزش فتوشاپمانند ابزار قبلی برای انتخاب یک دایره کامل ، زمانی که از این ابزار استفاده میکنیم ، کلید شیفت (shift) کیبورد را باید نگه داریم .برای انتقال قسمت انتخاب شده توسط دو ابزار بالا ، بعد از انتخاب ، با گرفتن کلید ctrl و درگ کردن میتوانیم این کار را انجام دهیم ، همچنین با استفاده از کلید ها ترکیبی ctrl + c و ctrl + x میتوانیم آن قسمت را کپی یا برش بزنیم و با کلید ترکیبی ctrl + v آن را پیست کنیم . علاوه بر امکاناتی که گفته شد میتوانیم در حالتی که با ابزار های معرفی شده قسمتی از تصویر را که انتخاب کرده ایم با استفاده از کلید delete آن را حذف نماییم .برای غیر فعال کردن این ابزار بعد از انتخاب انجام شده از منوی فتوشاپ ، گزینه select و سپس زیر منوی deselect را انتخاب میکنیم .این ابزار فتوشاپ امکانات زیادی را در اختیار ما قرار میدهد و کاربردهای فراوانی در طراحی سایت ، ادیت عکس و ... دارد که در جلسه های بعدی سایر این امکانات را هم برای شما عزیزان شرح خواهیم داد .ارتباط با ما09339851065https://designer4.ir احمد یوسفوند احمد یوسفوند Fri, 31 Jan 2020 12:06:30 +0330