طراحی وب یک رشته درگیر است که میتواند طول عمر را به کارشناسی ارشد برساند. به نظر می رسد که آن ها به اندازه کافی سخت نبودند، این نیز یک زمینه است که هر ثانیه در حال پیشرفت است، به طوری که تکنولوژی پیشرفت می کند، تصور کنید که ناامیدی داوینچی، اگر مردم پس از پنج سال شکایت مونا لیزا را «نگاه قدیمی» می دانند.

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

ما می دانیم چقدر سخت است که برای طراحان غیرقابل اعتماد به این چارچوب طراحی وب تمام شود، بنابراین ما این راهنمای مفید را برای پیگیری شما از طریق اصول اولیه ایجاد کردیم. در اینجا ده نکات طراحی وب که شما باید بدانید (علاوه بر برخی از دوزهای مفید و اهداف)، به سه دسته تقسیم می شوند: ترکیب، زیبایی شناسی و عملکرد. این که آیا شما یک طراح یا DIY-ing را استخدام می کنید، طراحی وب سایت نهایی خود را برای این ده اصول بررسی کنید.

 

۱٫ خلوص را از بین ببرید.

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

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

برای طراحی وب برای موثر بودن، لازم است که ساده باشد؛ باید مسیر یا مسیری روشن برای کاربر جهت پیگیری باشد. راه های مختلفی برای دستیابی به این هدف وجود دارد (بعضی از آنها در زیر توضیح داده شده است)، اما گام اول همیشه ایجاد فضای برای عناصر پر اهمیت با حذف موارد کم اهمیت است.

انجام دهید:

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

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

۲٫ از فضای سفارشی استفاده کنید.

چگونه می خواهید تمام فضای ایجاد شده خود را پس از پاک کردن اختلافات پر کنید؟ ما می خواهیم آن را با چیزی پر کنیم؟

فضای منفی (a.k.a. فضای سفید) اصطلاح فنی در هنرهای تجسمی برای مناطق در یک تصویر است که توجه را جذب نمی کنند. به طور معمول، اینها خالی یا خالی هستند، مانند یک آسمان غیر تاریک یا یک دیوار تک رنگ. اگر چه خسته کننده است، زمانی که از لحاظ هنری استفاده می شود، فضای منفی می تواند موضوع اصلی را بهبود بخشد و بهبود بخشد، خوانایی را بهبود بخشد و تصویر را آسان تر کند.

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

از زمینه های مشغول استفاده کنید بر اساس تعریف، پس زمینه ها تا حد زیادی غیر قابل مشاهده می شوند. اگر پس زمینه شما فضای منفی کافی نداشته باشد، از عناصر اصلی شما سرقت خواهد شد.

۳٫ چشم خود کاربر را با سلسله مراتب بصری راهنمایی کنید.

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

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

 

نمودار سلسله مراتب بصری
نمودار توضیح اصول سلسله مراتب بصری. از طریق Orbit Media Studios.
این نمودار را از Orbit Media Studios برای یادگیری نحوه جذب و یا دفع توجه توجه کنید. این بسیار ساده کردن یک موضوع پیچیده است، اما برای درک اصول اولیه، کار خوبی است.

 

طراحی اسکنپذیری اکثر کاربران هر کلمه ای از یک صفحه را نمی خوانند. آنها حتی همه چیز را بر روی صفحه نمی بینند. طراحی برای این رفتار با توجه به اولویت های مهم خود را به چشم پوشی.
گزینه های متعدد آزمایش کنید از آنجا که سلسله مراتب دیداری می تواند پیچیده شود، گاهی اوقات آزمون و خطا بهترین کار می کند. چند نسخه مختلف (“mockups”) ایجاد کنید و آنها را به مجموعه جدیدی از چشم برای نظرات مختلف نشان دهید.

 

۴٫ رنگ های خود را از نظر استراتژیک انتخاب کنید.

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

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

فقط به نحوه طراحی طراح سطح بالا Desinly از پرتقال در طراحی وب برای استادکلاس نفت ماسه در بالا نگاه کنید. اولا نارنجی یک انتخاب هوشمندانه است زیرا اغلب با تجهیزات عملیاتی که شرکت مشغول به کار است همراه است. در بالای آن، رنگ نارنجی را به زیبایی با یک پس زمینه سیاه رنگ جفت می کنید تا آن را بیشتر از دیگران جدا کنید. آنها همچنین همان رنگ را به عنوان یک برجسته برای کلمات کلیدی و دکمه ها به کار می برند و حتی آنها را در عکاسی پسزمینه هم ادغام می کنند.

ایجاد سلسله مراتب رنگی از هر رنگی برای عناصر اصلی (اولیه)، برجسته (ثانویه) و سایر عناصر کمتر مهم (پس زمینه) استفاده کنید.
استیک با تم های سازگار هنگامی که یک پالت رنگ ایجاد کرده اید، آن را بچسبید. رنگ اولیه، ثانویه و پس زمینه خود را در سراسر سایت خود حفظ کنید.

انجام ندهید:

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

۵٫ در عكاسی نباشید.

اگر چه اختیاری است، اگر انتخاب کنید از عکاسی واقعی در طراحی وب خود استفاده کنید، مطمئن شوید که این کار درست است. عکاسی مؤثر و معنی دار می تواند اهداف کسب و کار شما را افزایش دهد، اما عکس های با کیفیت پایین شما را عقب نگه می دارند.

با استفاده از عکاسی در طراحی وب، بسیاری از دستورالعمل های عکاسی خوب را به طور کلی دنبال می کند. عکس خیره کننده ای که در یک گالری هنری آویزان شده است می تواند به همان اندازه خیره کننده به وب سایت باشد، اما خلق، سبک و موضوعات باید هماهنگ شوند. فقط به عکس تندالیزه در طراحی وب سایت JPSDesign طراح برتر در بالا نگاه کنید. این زغال اخته در هر کجای خوشمزه ظاهر می شود، اما به خصوص در وب سایت مواد غذایی تاثیر می گذارد.

انجام دهید:

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

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

۶٫ بهینه سازی تایپوگرافی برای ساخت نام تجاری خود.

در حالی که کلمات شما و یا copywriter شما انتخاب بسیار تاثیر گذار است، شما همچنین می توانید اثربخشی خود را با دادن به آنها نگاه درست را افزایش دهد.

تایپوگرافی شامل تمام تصاویری از متن، به ویژه فونتها، و همچنین عناصر دیگر مانند اندازه، رنگ متن، سبک (کج، جسور و غیره) و فاصله بین حروف، کلمات و خطوط. همه این تاثیرات سلسله مراتب بصری و نحوه برداشت شما را درک می کنند.

مانند رنگ ها و عکاسی، تایپوگرافی در مجموعه ای متنوعی از سبک هاست، بنابراین انتخاب کنید که بیشترین نام تجاری را به شما معرفی می کند. برای اضافه کردن پیچیدگی کمی به وب سایت طراحی Habesha خود، طراح سطح بالا Ubique استودیو با استفاده از یک تایپوگرافی قابل توجه در عین حال طبقاتی برای عناوین استفاده می کند. اما توجه کنید که چگونه تایپوگرافی به ظریف، مدرن بدون سرفیس برای عناوین محصول زیر تصاویر برای تغییر تعادل تغییر می کند.

استفاده از فونت های وب برای تمام انواع فونتها، به یاد داشته باشید که با «فونت ایمن وب» تأیید شده است که می تواند در اکثر دستگاه ها و رایانه های مانیتور نمایش داده شود. شما می توانید یاد بگیرید چگونه آنها را در اینجا شناسایی کنید.
انواع مختلفی را مطالعه کنید. آیا می دانید چه Serif چیست؟ تایپوگرافی بسیار پویا است، بنابراین در پنج نوع فونت استخوان بندی می شود تا خود را به برخی زمینه ها تقسیم کند.

از تایپوگرافی مشابه برای همه چیز استفاده کنید. همانطور که در مثال Habesha او، تایپوگرافی بهتر کار می کند زمانی که آن متعادل است. استفاده از مجموعه های مختلف برای هدر ها، subheaders و متن بدن – و ماندن با این مجموعه در سراسر سایت ماندگار است.

۷٫ ناوبری ساده.

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

هر کس روش خود را برای پیدا کردن راه خود را در اطراف یک وب سایت است. یک طراحی وب خوب، ناوبری خود را به کاربران هدف خود هدایت می کند، به طوری که احساس بصری – کاربران کمتری در مورد آن فکر می کنند، بهتر است.

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

تعادل برای مقدار گزینه ها را پیدا کنید. شما می خواهید به کاربران بسیاری از گزینه ها، اما شما نمی خواهید آنها را غارت کنید. دسته بندی های صفحه خود را به گونه ای تنظیم کنید که اهداف متضاد را برآورده سازد.
ساخت ناوبری اطراف اطلاعات کاربر واقعی. هنگام خرید آنلاین کفش، برخی از کاربران تحت “لباس” و بعضی دیگر تحت “لوازم جانبی” جستجو می شوند. گروه های مختلف کاربر دارای تنظیمات مختلف هستند؛ ساختن معماری ناوبری خود را در اطراف چگونگی فکر کاربران خود، با توجه به اطلاعات واقعی. اگر در تاریکی هستید، می توانید برخی از تست های کاربر را انجام دهید.

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

۸٫ اولویت بندی تلفن همراه

افراد قدیمی تر (اما نه قدیمی!) تمایل دارند که از طراحی وب در صفحه نمایش دسکتاپ فکر کنند، اما حقیقت این است که امروزه بسیاری از مرورگرهای خود را بر روی دستگاه های تلفن همراه انجام می دهند. به همین دلیل است که باید مطمئن شوید که سایت تلفن همراه شما در حالت پیک قرار دارد. نه فقط به خاطر کاربر شما، بلکه برای گوگل نیز عامل الگوریتم Google در پاسخگویی تلفن همراه به رتبه بندی جستجوی خود است.

“پاسخگویی تلفن همراه” نشان می دهد که سایت شما به نظر می رسد بر روی دستگاه های صفحه نمایش کوچک است. اگر وب سایت شما بر روی دستگاه های تلفن همراه قطع شود یا تصاویر در مکان های اشتباه ظاهر شوند، بازدیدکنندگان شما از تجربه وب سایت خود لذت بخش نخواهند داشت. علاوه بر صفحه نمایش های کوچکتر، دستگاه های تلفن همراه نیز دارای مجموعه ای از دستورالعمل های طراحی جدید، از جمله کنترل هایی مانند “swipes” هستند، بنابراین فرض کنید که نسخه دسکتاپ شما یکپارچه ترجمه شود.

نسخه موبایل شما باید از لحاظ بصری، از همان ابتدا باشد. اما این بدان معنا نیست که شما می توانید نسخه دسکتاپ خود را نادیده بگیرید. وبسایت شما باید بدون توجه به اینکه چه دستگاهی از افراد استفاده می کند به آن نگاه کند، خوب به نظر برسد. نگاهی به طراحی وب در بالا نگاه کنید تا ببینید که چگونه Ink’d طراح سطح بالا تغییرات طراحی را ایجاد کرد و – با برخی از کمینه سازی های کوچک – باعث می شود که در هر دو صفحه بزرگ و کوچک به نظر برسد.

انجام دهید:

اولین نسخه موبایل را طراحی کنید. هنگام طراحی نسخه موبایل، با توجه به فضای صفحه محدود شده، تنها با وسایل لازم کار می کنید. ابتدا ابتدا با استفاده از نسخه موبایل به راحتی برطرف شود و سپس عناصر را به نسخه دسکتاپ اضافه کنید و نه طراحی نسخه دسکتاپ و سپس حذف عناصر.
اولویت بندی دستگاه ها بر اساس داده های کاربر دستگاه های موبایل “اصطلاح چتر” هستند، اما انواع مختلف تلفن و قرص دارای اندازه های مختلف صفحه نمایش و ملاحظات فنی هستند. به اطلاعات کاربری مراجعه کنید تا ببینید که چه دستگاهی بیشتر بازدیدکنندگان شما را استفاده می کنند و سپس آنها را در طراحی اولویت بندی کنید.

 

امروزه، آنها بارگیری و آسیب رساندن به SEO هستند، بهترین گزینه این است که طراحی یک سایت واحد که در تمام دستگاه های مربوطه کار می کند.

۹٫ خواندن متن آسان است.

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

وقتی می گوییم یک وبسایت باید به راحتی بخواند، ما در مورد سه معنی مختلف صحبت می کنیم:

به خوبی نوشته شده. متن کپی نوشته شده است با توجه به اهداف کسب و کار شما و در صدایی است که به مخاطبان شما جذاب است.
زیبایی شناخته شده است. متن کپی به خوبی نمایش داده می شود، ترجیحا با مقدار زیادی از فضای و در بلوک های قابل هضم است که خواننده را غرق نمی کند.
قابل خواندن است. فونت و اندازه هر دو باعث خواندن، بدون فشار و دو طرفه می شوند.
در حالی که خوانایی اغلب از تایپوگرافی است، شما همچنین باید ترکیب و ساختار، و همچنین نحوه ارتباط متن با عناصر دیگر، بدون اشاره به کیفیت واقعی نوشتن را در نظر بگیرند.

داشتن یک طراحی وب شگفت انگیز مهم نیست اگر کسی بتواند متن شما را بخواند. طراح سطح بالا akorn.creative این را به قلب می برد – ببینید که چگونه در طراحی وب بالا آنها عکس پس زمینه را به سیاه تبدیل می کنند تا کنتراست بیشتری را با متن ایجاد کنند و آن را قابل خواندن.

توجه به جفت رنگ چگونگی رنگ متن با پس زمینه تعامل با پس زمینه به شدت بر خوانایی تاثیر می گذارد، به ویژه افرادی که دارای معلولیت خواندن یا دیدن هستند. سعی کنید با جفت های متضاد (زنگ های نور و تاریک) روبرو شوید، و اگر همه چیز نتواند، همیشه می توانید بر روی سیاه و سفید کلاسیک قرار بگیرید.
طرح های تست در خوانندگان مختلف. برای شما قابل خواندن است، برای همه قابل خواندن نیست. طرح های خود را با خوانندگان مختلف آزمایش کنید تا تمام پایگاه های خود را پوشش دهید.

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

۱۰٫ آنچه را که شما به طراح خود می خواهید بگویید.

بیایید بگوییم یک ایده بزرگ برای یک ویژگی وب سایت شما وجود دارد. بهتر است که بتوانید آن را به یک طراح توضیح دهید، بیشتر احتمال دارد نسخه نهایی مانند آنچه شما تصور می کنید.

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

 

نکات برتر طراحی سایت