بایگانی دسته ی آموزش طراحی سایت

از ui تا طراح محصول : سیر تکاملی ار تقاء یافتن از طراح UI به طراح محصول در طراحی وب سایت

– روند ارتقاء یافتن طراحان UI به طراحان محصول ، یک گام منطقی در عصر تکنولوژی مدرن

سوسیس ، پنیر و اپلیکیشن ایمیل

یک ” محصول ” چیست ؟ تا کنون ، این واژه تنها در ارتباط با چیزهایی مانند کالاها و لوازم مصرفی استفاده می شد (مثل یخچال ، تلویزیون ، تلفن ، …) ، اما حالا روند تکنولوژی تغییر کرده و دیگر این واژه می تواند مربوط به چیزهایی مثل ارائه کنندگان وایرلس پلن ، خدمات مختلف بانکی ، و به طور کلی هر گونه سرویس یا اپلیکیشنی در حوزه IT باشد . در این مقاله درباره انواع محصولات بحث خواهیم کرد .
طراحی UI و UX به چه کارهایی گفته می شوند ؟ آن ها دو جهت متفاوت در طراحی سایت و اپلیکیشن هستند که دو گروه متفاوت آن ها را انجام می دهند

– طراحان UI و طراحان UX . آن ها که هستند و دقیقا چه کاری انجام می دهند ؟

طراح UX (User Experience)  و طراحی سایت

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

 

 

طراح UI (User Interface) در طراحی سایت

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

 

 

” طراحان UI باید مهارت های طراحان UX را نیز بلد باشند . ”

برای توسعه یک واسط کاربری عالی به چه چیزهایی نیاز داریم ؟

چند مورد از مسائلی که بر توسعه واسط کاربری موثر است :

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

قطعا پاسخ تمام این پرسش ها ” نه ” است .

طراحی محصول (اپلیکیشن ها و سرویس ها)

ساخت هرگونه محصول مدرن دیجیتال یک پروسه طولانی و دشوار است

– که یک بخش منسجم از طراحی محصول است . یک تیم بزرگ از متخصصین در این پروژه ها سهیم هستند و طراحان UI باید برای فهم جزییات و هدف پروژه با این متخصصین در ارتباط باشند .

” یک طراح محصول خوب مسئولیت تمام جزییات محصول و اینکه به چه میزان توسط کاربران مورد استقبال قرار می گیرد را می پذیرد . ”

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

باز طراحی سرویس های قدیمی و یا معیوب

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

خلاصه ای از مطالب گفته شده درباره سیر تکاملی ار تقاء یافتن از طراح UI به طراح محصول در طراحی وب سایت

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

منبع طراحی سایت و سئو سایت وب نوش

چند مهارت غیر فنی که برای انجام کار طراحی وب ضروری است :یک طراح وب حرفه ای شدن مستلزم تسلط بر چندین مهارت فنی از جمله HTML , CSS ، طراحی سایت ریسپانسیو (Responsive Web Design) ، سئو سایت (SearchEngineOptimization) ، … می باشد ؛ اما علاوه بر این مهارت های فنی ، برای کسب موفقیت در کار طراحی سایت ، نیاز به فراگرفتن چند مهارت غیر فنی نیز هستیم . در حالی که انبوهی از کتب و مقالات و دوره های آموزش طراحی وب که بر آموزش مهارت های فنی مورد نیاز کار طراحی سایت تمرکز دارند در دسترس علاقه مندان به این تخصص موجود است ، تنها منابع آموزشی اندکی هستند که ابعاد غیر فنی این کار را مطرح کرده و به آن دسته از مهارت های غیر فنی ضروری طراحی وب اشاره کرده اند . برای کسب اطلاعات بیشتر و آگاهی از مهارت های غیر فنی اما ضروری طراحی سایت ، تا پایان این مقاله همراه من باشید و سعی کنید برای تبدیل شدن به یک وب کار حرفه ای ، فراگرفتن و آموختن این مهارت ها را نیز به مجموعه دانش وب خود اضافه کنید .

 

 

ارائه خدمات با کیفیت و مناسب به مشتری و کارفرمای پروژه طراحی سایت

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

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

مدیریت زمان برای انجام و تحویل به موقع پروژه طراحی سایت

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

مهارت نویسندگی و به اشتراک گذاری دانش و تبادل نظر در جامعه طراحی وب سایت

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

دادن مشاوره و آموزش به تازه واردهای جامعه طراحی وب سایت

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

کلام آخر …

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

خلق کردن تایپوگرافی وب زیبا در طراحی سایت : در دهه گذشته ، تایپوگرافی وب به سرعت تکامل یافته است . اینترنت اکسپلورر با استفاده از فرمت EOT از نسخه IE4 در سال ۱۹۹۷ به بعد (بله ، درست میبینید !) از انواع فونت های وب پشتیبانی می کند ؛ اما از همان گام های نخستین ، تایپوگرافی وب به سطحی از بلوغ رسیده که طراحان وب سایت را  در طراحی سایت قادر ساخته که بر ارتقاء زیبایی و کیفیت هر چه تمام تر آن تمرکز کنند و روز به روز این تایپوگرافی ها تکامل بیشتری یابند . در این مقاله قصد بررسی موضوع تایپوگرافی وب و انواع آن را داریم .

 

 

شرکت آدوب – Adobe – با ارائه محصول خود ، یعنی TypeKit Web Font Service در سپتامبر ۲۰۰۹ تحول چشمگیری در زمینه تایپوگرافی وب ایجاد کرد . سایر شرکت ها نیز در این راستا محصولاتی چون : Google Fonts شرکت گوگل در می ۲۰۱۰ ، Fontdeck شرکت Clearleft and OmniTI در ژوئن ۲۰۱۰ ، … ارائه نموده اند . در مدت زمان کوتاهی و با در دست داشتن این ابزار ارائه شده توسط شرکت های مختلف ، حالا طراحان سایت قادر هستند در طراحی سایت خود تایپوگرافی وب غنی و فوق العاده ای خلق کنند .

در ادامه ، یک دید کلی از اهمیت تایپوگرافی وب ماکرو و میکرو (macro- and microtypography) در اختیار شما قرار خواهم داد ؛ توجه ویژه به ترتیب کلی متون بر صفحات وب در زمانهای قبل ، تمرکز بر روی نمایش هر چه بهتر جزییات مانند لیگاچرها (ligatures) و فیگرها (figures) در حال حاضر . در راهنمای آنلاین تایپوگرافی وب (که می توانید آن را به طور کامل به همراه کدهای آن در سایت macromicrotypo.com مشاهده کنید) ، ما به واکاوی جزئی تر این موضوع و همچنین نگاهی بر زندگی کاری یکی از پیشگامان طراحی تایپوگرافی از بعد تایپوگرافیک ، جان بسکرویل (John Baskerville) ، خواهیم پرداخت .

تایپوگرافی وب در سطح ماکرو – MacroTypography

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

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

سبک تایپوگرافی صفحات وب با مخاطب حرف می زند

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

اینجاست که درک و فهم تاریخچه تایپوگرافیک به ما کمک می کند . مثلا فونت serif حالت سنتی دارد ؛ sans serif کمی امروزی تر است . اگر به تازگی با این موضوع آشنا شده اید ، گنجینه ای از کتب ارزشمندی برای افزایش اطلاعات در این زمینه وجود که برای شروع ما به شما این ها را توصیه می کنیم : Thinking with Type نوشته الن لوپتون ، The Elements of Typographic Style نوشته رابرت برینگهرست و Detail in Typography نوشته جاست هاچولی . همخوانی از بعد تایپوگرافیک طرح شما را در سطح ماکرو تشکیل می دهد .

بررسی مقیاس های تایپوگرافیک در تایپوگرافی طراحی سایت

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

برای ایجاد بهترین سبک نمایش محتوا برای مخاطب ، باید محتوا را به صورت مفهومی نشان گذاری کرد (توسط HTML) . معمولا محتوا دارای یک سلسله مراتب واضح با معنی است با تعدادی عنوان – <h1> , <h2> , <h3> , … – که نشانگر محتوای آن بخش از صفحه است . با توجه به مقیاسی که انتخاب کرده ایم ، می توانیم سلسله مراتب محتوا را ترتیب دهیم .

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

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

تایپوگرافی وب در سطح میکرو – MicroTypography

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

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

لیگاچرها – ligatures

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

فیگرها – figures

در تایپوگرافی ، ما دائما با فیگرها مواجه هستیم : شماره تلفن ها ، تاریخ تولد ها ، اطلاعات مالی ، آمارها ، عملیات ریاضی و جبری ، … . یک تایپوگرافی خوب طراحی شده ، هم شامل فیگرهای ” سبک قدیمی ” و هم فیگرهای ” خط کشی ” می باشد . فیگرهای خط کشی در اصل جهت استفاده برای پیوستگی با حروف بزرگ طراحی شده اند ؛ در حالی که فیگرهای سبک قدیمی (یا ” حروف کوچک “) برای ترکیب بهتر با تنظیمات متن که به اسندرها (ascenders) – ۶ ، ۸ – و دیسندرهای (descenders) – ۳ ، ۴ ، ۵ ، ۷ ، ۹ – آنها داده شده است ، طراحی شده است .

 

منبع : سئو سایت وب نوش

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

۱-گسترش الگوهای رابط کاربری در روند طراحی سایت جدید

شاید این روزها ، بسیاری از وب سایت ها شبیه یکدیگر به نظر بیایند و این به دلیل استفاده از طراحی سایت واکنش گرا است . نمی توان این موضوع را نقطه ضعف این تکنولوژی دانست . نکته قابل توجه ، طراحی قالب های واکنش گرایی است  که بسیار شبیه هم ارائه می شوند . ولی این نکته منفی تلقی نمی شود از آنجا که شاید بتوان گفت این مساله منجر به ایجاد یک استاندارد همگانی در رابط کاربری شده است .

چند الگو که در طراحی واکنش گرا متداول است و برای همه طراحان آشناست  :

•    منو برگر : هرچند برخی انتقادها در استفاده از این الگو وجود دارد ، هیچ شکی وجود ندارد که استفاده گسترده از آن باعث تشخیص  راحت تر عملکرد برای کاربران شده است .
•    ثبت نام : این الگو برای ثبت نام در سایت بکار می ورد . ممکن است یک فرم را پر کنید  یا یک دکمه را برای اجازه استفاده از یک حساب اجتماعی برای sign up کلیلک کنید .
ویزاردهای فرم چند مرحله ای فیلدهای موردنظر را چک می کنند ، اصظکاک را کاهش می دهند و کاربران را برای ادامه فرایند ثبت نام تشویق می کنند .
•    Long scroll : در حال حاضر قرار دادن همه عناصر مهم در بالا یک روش متدوال است . علاوه بر این تقریبا همه به لطف دستگاههای تلفن همراه به long scroll عادت کرده اند . این تکنینک بخصوص برای سایت هایی که می خواهند از طریق داستان سرایی به فریب کاربران اقدام کنند مناسب است . شما هنوز هم می توانید سایت های چند صفحه ای با شکستن اسکرول در بخش های مشخص ، طراحی کنید .
•    Card layout : طرح بندی کارت  . پیشگام بوسیله pinterest .
(ما در حال حاضر شاهد یک معماری جدید وب جدا از صفحه و مقصد و متمرکز روی تجربیات کاملا شخصی هستیم . محتوا به اجزا منحصر به فرد  شکسته می شود  و نهایتا این اجزا با هم تجمیع می شوند . که این موضوع نتیجه ظهور فن آوری های تلفن همراه ، میلیاردها صفحه نمایش در اندازه و شکل های مختلف و دسترسی بی سابقه به داده ها و منابع از طریق API و SDK ها است .
این امر موجب حرکت حرکت وب از صفحات پر از محتوا و لینک شده به هم ، به سمت قطعات مجزا که با هم در داخل یک تجربه تجمیع شده اند ، شده است .

این تجمیع بر مبنای موارد زیر انجام می گیرد :

1. مصرف شخصی محتوا و علایق و ترجیحات و رفتار اشخاص
2. محل و محیط اطراف کاربر
3. علایق و ترجیحات و رفتارهای دوستانشان
4. با هدف تبلیغات اکو سیستم

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

•    Hero image

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

۲- استفاده از انیمیشن های قوی در روند طراحی سایت

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

انیمیشن می تواند در دو گروه گنجانده شود :

•    Large scale animation : این گروه به عنوان ابزار تعاملی اولیه استفاده می شود . و اثر بیشتری بر روی کاربر دارد و شامل اثراتی از جمله اسکرول parallax  (کلمه پارالکس (Parallax) به معنی اختلاف منظر یا دید هست و براساس تعریف به جابجایی آشکار بین دو نقطه یا جابجایی یک شیء بین دو نقطه غیر واقع بر یک خط راست گفته می‌شود. در طراحی وب به معنای تکنیک‌های پیمایش در صفحه برای عمق بخشی به سایت تلقی می‌شود. در ترندها و سبک های طراحی وب درواقع به سبکی که در آن با اسکرول کردن یا حرکت دادن نشانگر موس اتفاقات خاصی مثل تکان خوردن اشیاء ، تغییر زاویه دید ، حرکت اشیاء یا پس زمینه در خلاف یا موافق اسکرول با سرعت های مختلف یا افکت های این چنینی رخ میدهد، گفته می شود  )و اطلاعیه های pop-up است .

•    small scale animation : این بخش شامل spinners ، ابزار hover و loading bar ها هستند که نیازی به ورودی توسط کاربر ندارند .

هفت مورد از معروفترین تکنیک های انیمیشن :

•    loading animation : برای سرگرم کردن کاربران در مواقعی که مدت طولانی باید منتظر بمانند کاربرد دارد و عدم استفاده از آن ، انتظار را برای کاربر خسته کننده می کند .
loading animation  ها برای طراحی فلت  ، minimalism (ساده گرایی ) ، portfolios (نمونه کار ) و سایت های تک صفحه ای استفاده می شود . آنها را ساده نگه دارید و از اضافه کردن صدا به آنها اجتناب کنید . آنها در هر صورت باید با شخصی سازی سایت شما و پالت رنگ سایتتان تطابق داشته باشد .

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

•    Hover animation : اثرات Hover احساس بصری بیشتری به یک سایت در زمانی که کاربران موس را روی محتوا می برند ، ایجاد می کند .
•    گالری و اسلایدشو ها : گالری و اسلاید شو ها یکی از راههای تأثیرگذار برای نمایش چندین عکس بدون سربار اضافی برای کاربران است . این ابزارها برای سایت  های عکاسی ، نمایش محصولات  و portfolios ها عالی هستند .

•    انیمیشن های حرکتی : چشم های ما بطور طبیعی به سمت حرکت کشیده می شوند . از اینرو این ابزار برای جلب توجه کاربر بسیار مناسب است . motion همچنین می تواند با سلسه مراتب بصری و همچنین اضافه کردن جذابیت به فرم ها ، CTA  ها و منوها  کمک کند .

•    Scrolling : پیمایش صاف مبتنی بر انیمیشن است و کنترل بیشتری به کاربر برای چگونگی سرعت نمایش آنها می دهد .

•    Background animation/video  : یک پس زمینه متحرک ساده می تواند قابلیت دیده شدن را به سایت اضافه کند visibility . اما آنها باید در حد اعتدال استفاده شوند در غیر این صورت برای کاربر مزاحمت ایجاد می کند .

۳- فعل و انفعالات کوچک در روند طراحی سایت

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

•    ارتباط با یک وضعیت خاص و یا گرفتن فیدبک
•    دیدن نتیجه یک اقدام خاص
•    کمک کردن به کاربر برای کنترل موضوعی خاص

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

۴- Material Design  : یک جایگزین قوی تر برای طراحی فلت

ماه ژوئن سال ۲۰۱۴ گوگل یک استایل جدید برای طراحی سایت با نام Material Dedign را ارائه کرد که با استفاده از سایه ها، مبانی حرکت اجسام، عمق رنگ ها و… سبب می شد تا طراحی بیش از پیش در نظر کاربر واقعی به نظر برسد.
پیش از این اکثر پروژه های Material design محدود به طراحی اپلیکیشن ها بود . تا اینکه گوگل در جولای نسخه ای از آن را که بیشتر برای  وب سایت مناسب بود را ارائه کرد .
Material Design Lite برای تولید  UI و UX عالی در همه دستگاهها در نظر گرفته شده بود .
Material Design تحت هیچ فریم ورک خاصی کار نمی کند بنابراین طراح می تواند از ابزار گستره و متفاوت برای ایجاد وب سایت استفاده کند . در ضمن این روش از نظر کدنویسی هم سبک است .

۵- طراحی واکنش گرا

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

 

 

•    در زمان استفاده از  جاوا اسکریپت و css برای لود عکس ها ، از تگ display:none استفاده نکنید . چرا که در این حالت عکس همچنان روی دستگاه دانلود می شود و بار غیر ضروری را به صفحه تحمیل می کند .
•    از عکس های واکنش گرا که با استفاده از درصد تعریف شده اند استفاده کنید .
•    از بارگذاری های شرطی برای جاوا اسکریپت استفاده کنید زیرا بسیاری از کامپوننت های جاوا اسکریپت دستگاههای دسک تاپ  در دستگاههای کوچکتر استفاده نمی شوند . به اسکریپت های شخص ثالث  دقت کنید  چرا که آنها برای اشتراک گذاری اجتماعی استفاده می شوند و اغلب روی کارایی اثر منفی می گذارند .
•    استفاده از  RESS     ( Responsive and server side )
•    درخواست تست عملکرد به منظور اندازه گیری بهینگی هر سایت .

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

۶- وجود طراحی سایت مسطح تا چندسال آینده

طراحی سایت مسطح همچنان  از تکنولوژی های متداول است از طرفی  با سایر روند طراحی سایت از قبیل Material Design ، طراحی سایت واکنشگرا و…  نیز همخوانی دارد.از این رو هنوز در دنیای طراحی وب مطرح است .

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

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

توصیه های دیگر در روند طراحی سایت :

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

 

منبع : طراحی سایت و سئو سایت وب نوش