اطلاعات جامع از طراحی سایت

وب دیزاینر برای تارنما می بایست از چه فونتی استفاده کند؟ در انتخاب تصاویر و چیدن آن‌ها بایستی طراحی سایت در مشهد چه اصولی را رعایت کند؟ معیار انتخاب فونت و تصاویر مناسب برای تارنما چیست؟ به هیچ عنوان چرا مهم می باشد متن‌های وبسایت با چه فونتی نوشته و عکس‌های آن چطور گزینش شده باشند؟

در این محتوا خلاصه‌ی دو فصل پایانی کتاب اصول وب دیزاین زیبا را می‌خوانیم. این کتاب بسیار کاربردی را به چهار قسمت تقسیم کرده بودیم. خلاصه‌ی فصل‌های نخستین تا سوم آن را در محتواهای پیش از این شرکت‌ی ۴محتوایی باهم مرور کردیم.

تلاوت این شرکت برای کسانی بسیار اثرگذار و کاربردی است که

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

آنچه در این نوشته خواهیم داشت
نکات کاربردی در زمینه ی تایپوگرافی برای وب دیزاینرها
تایپوگرافی، خوانایی و زیبایی
فونت و محدودیت‌های فنی گزینش فونت مناسب
نکات کاربردی راجع به تصویرگزینی و تصویرچینی برای وب دیزاینرها
۱. آیا تصویر با برند و محصولاتش مرتبط می باشد؟
۲. آیا تصویر جالب می باشد؟
۳. آیا عکس جذاب می‌باشد؟
گردآوری‌بندی و نتیجه‌گیری
نکات کاربردی درباره‌ی تایپوگرافی برای وب دیزاینرها
بگذارید نخستین مروری کنیم بر مباحثی که در قسمت‌های گذشته اورده شده می‌باشد. در قسمت نخستین (اولین محتوای تیم) خلاصه‌ای از فصل اول کتاب را مرور کردیم. در فصل اول به تعریف‌و‌تمجید فرآیند وب صفحه ارایی و طراحی ساختار کلی صفحات یک تارنما پرداخته شد. بخش دوم به انتخاب رنگ برای سایت اختصاص داشت. و در نصیب سوم، خلاصه‌ی فصل سوم کتاب که در ارتباط بافت قالب وب سایت یا Texture می باشد، ذکر شد.

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

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

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

فونت و محدودیت‌های فنی انتخاب فونت مناسب
فونت دسته‌ای از حروف می باشد که به سبک خاصی روی کاغذ‌ی شیت یا اسکرین ظاهر میشوند. هر فونت نام خاص خودش را داراست. فونت‌ها معمولا یکسری گونه‌ی مختلف دارند: regular font face, italic, bold, and bold italic . گروه‌ی گونه‌های متفاوت یک فونت در خانواده‌ی فونت یا font family جای می گیرند. هر خانواده‌ی فونت یک typeface هست. به عنوان مثال Times New Roman یک typeface است که گونه‌های مختلف آن فونت را در خود جای داده می باشد.

وب دیزاینر نمی‌تواند هر فونتی را که دلش میخواهد برای تارنما انتخاب کند. فونت یا خانواده‌ی فونتی که گزینش می‌شود باید سازگار با مروگرها و وب سایت باشد. چون مرورگرها نمی‌توانند هر فونتی را بخوانند. و هر فونتی هم برای قرار گرفتن در وب سایت طراحی نشده است. بعضی از فونت‌ها desktop font هستند، یعنی در طراحی نرم‌افزارهای دسکتاپ کاربردی‌اند نه طراحی سایت. پس، فونت باید Web-safe باشد. ملاحظه‌ی دیگری نیز وجود داراست: فونت بایستی سریع بار گذاری (بارگذاری) و نمایش داده گردد. وب دیزاینر اول می بایست فولدر فونت را به تارنما اضافه کند. بعضی فونت‌ها آن‌قدر جزئیات دارند و آن‌قدر فایل آن‌ها سنگین است که سریع لود نمی‌شوند.

نکات کاربردی درباره‌ی تصویرگزینی و تصویرچینی برای وب دیزاینرها
می‌رسیم به فصل پنجم (تصویرگزینی و تصویرچینی) و پاسخ‌دادن بدین سؤال که وب دیزاینر چطور و مبتنی بر چه معیارهایی می بایست برای وبسایت عکس و تصویر انتخاب کند.

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

به همین دلیل، اساسی می باشد که وب دیزاینر عکس یا تصویری را برای وبسایت گزینش کند که پاسخ دو سؤال از سه سؤال ذیل راجع به آن عکس مثبت باشد:

آیا تصویر با برند و محصولاتش مرتبط هست؟
آیا تصویر جالب می‌باشد؟
آیا تصویر جذاب می باشد؟

در‌پی، در ارتباط تک‌تک آن سؤالات توضیح بیشتری می‌دهیم تا موضوع کاملا روشن و تفاوت جذاب‌بودن و جذاب‌بودن هم معین شود.

۱. آیا تصویر با برند و محصولاتش مرتبط می‌باشد؟
یادتان باشد که یک عکس می‌تواند داستان برند را بگوید. چنین عکسی در خیال و خاطر استفاده کننده میماند. همچنین، به او یاری می‌کند تا بفهمد محتوای کاغذ در زمینه‌ی چه چیزی می باشد. پس، عکسی را گزینش نمائید که کاربر با نگاه کردن به آن پاسخ این سوال های را در آن ببیند: این وبسایت چیست و در آن چه چیزی عرضه می‌شود؟ بنابراین، هر چه عکس یا تصویر به برند، محصول ها، خدمات یا محتوای یک بخش یا شیت مرتبط‌تر باشد، عالی است.

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

راهنمای گزینش عکس برای وب سایت

۲. آیا تصویر جالب می باشد؟
تصویر بایستی مطلقا دیدنی باشد، نه قطعا قشنگ. درگیر کردن مخاطب مهم‌تر از زیبایی هست. شاید مایحتاج باشد عکس یا تصویری بسیار گوناگون خوی کنید تا از رقبا متمایز شوید. پیشنهاد می‌کنم حتما خصوصی به وبسایت (پورتفولیو) hi-im-julian بزنید و ببیند که او چه‌قدر خلاقانه برای معرفی‌کردن و نشان‌دادن هر مورد از مهارت‌هایی که داراست، تصویری بسیار متفاوت و دیدنی ساخته می‌باشد.

انتخاب تصویر دیدنی در وب طراحی صفحه

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

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

درضمن یادتان باشد که

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

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

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

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

وب دیزاینر برای تارنما می بایست از چه فونتی استفاده کند؟ در انتخاب تصاویر و چیدن آن‌ها بایستی طراحی سایت در مشهد چه اصولی را رعایت کند؟ معیار انتخاب فونت و تصاویر مناسب برای تارنما چیست؟ به هیچ عنوان چرا مهم می باشد متن‌های وبسایت با چه فونتی نوشته و عکس‌های آن چطور گزینش شده باشند؟

در این محتوا خلاصه‌ی دو فصل پایانی کتاب اصول وب دیزاین زیبا را می‌خوانیم. این کتاب بسیار کاربردی را به چهار قسمت تقسیم کرده بودیم. خلاصه‌ی فصل‌های نخستین تا سوم آن را در محتواهای پیش از این شرکت‌ی ۴محتوایی باهم مرور کردیم.

تلاوت این شرکت برای کسانی بسیار اثرگذار و کاربردی است که

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

آنچه در این نوشته خواهیم داشت
نکات کاربردی در زمینه ی تایپوگرافی برای وب دیزاینرها
تایپوگرافی، خوانایی و زیبایی
فونت و محدودیت‌های فنی گزینش فونت مناسب
نکات کاربردی راجع به تصویرگزینی و تصویرچینی برای وب دیزاینرها
۱. آیا تصویر با برند و محصولاتش مرتبط می باشد؟
۲. آیا تصویر جالب می باشد؟
۳. آیا عکس جذاب می‌باشد؟
گردآوری‌بندی و نتیجه‌گیری
نکات کاربردی درباره‌ی تایپوگرافی برای وب دیزاینرها
بگذارید نخستین مروری کنیم بر مباحثی که در قسمت‌های گذشته اورده شده می‌باشد. در قسمت نخستین (اولین محتوای تیم) خلاصه‌ای از فصل اول کتاب را مرور کردیم. در فصل اول به تعریف‌و‌تمجید فرآیند وب صفحه ارایی و طراحی ساختار کلی صفحات یک تارنما پرداخته شد. بخش دوم به انتخاب رنگ برای سایت اختصاص داشت. و در نصیب سوم، خلاصه‌ی فصل سوم کتاب که در ارتباط بافت قالب وب سایت یا Texture می باشد، ذکر شد.

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

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

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

فونت و محدودیت‌های فنی انتخاب فونت مناسب
فونت دسته‌ای از حروف می باشد که به سبک خاصی روی کاغذ‌ی شیت یا اسکرین ظاهر میشوند. هر فونت نام خاص خودش را داراست. فونت‌ها معمولا یکسری گونه‌ی مختلف دارند: regular font face, italic, bold, and bold italic . گروه‌ی گونه‌های متفاوت یک فونت در خانواده‌ی فونت یا font family جای می گیرند. هر خانواده‌ی فونت یک typeface هست. به عنوان مثال Times New Roman یک typeface است که گونه‌های مختلف آن فونت را در خود جای داده می باشد.

وب دیزاینر نمی‌تواند هر فونتی را که دلش میخواهد برای تارنما انتخاب کند. فونت یا خانواده‌ی فونتی که گزینش می‌شود باید سازگار با مروگرها و وب سایت باشد. چون مرورگرها نمی‌توانند هر فونتی را بخوانند. و هر فونتی هم برای قرار گرفتن در وب سایت طراحی نشده است. بعضی از فونت‌ها desktop font هستند، یعنی در طراحی نرم‌افزارهای دسکتاپ کاربردی‌اند نه طراحی سایت. پس، فونت باید Web-safe باشد. ملاحظه‌ی دیگری نیز وجود داراست: فونت بایستی سریع بار گذاری (بارگذاری) و نمایش داده گردد. وب دیزاینر اول می بایست فولدر فونت را به تارنما اضافه کند. بعضی فونت‌ها آن‌قدر جزئیات دارند و آن‌قدر فایل آن‌ها سنگین است که سریع لود نمی‌شوند.

نکات کاربردی درباره‌ی تصویرگزینی و تصویرچینی برای وب دیزاینرها
می‌رسیم به فصل پنجم (تصویرگزینی و تصویرچینی) و پاسخ‌دادن بدین سؤال که وب دیزاینر چطور و مبتنی بر چه معیارهایی می بایست برای وبسایت عکس و تصویر انتخاب کند.

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

به همین دلیل، اساسی می باشد که وب دیزاینر عکس یا تصویری را برای وبسایت گزینش کند که پاسخ دو سؤال از سه سؤال ذیل راجع به آن عکس مثبت باشد:

آیا تصویر با برند و محصولاتش مرتبط هست؟
آیا تصویر جالب می‌باشد؟
آیا تصویر جذاب می باشد؟

در‌پی، در ارتباط تک‌تک آن سؤالات توضیح بیشتری می‌دهیم تا موضوع کاملا روشن و تفاوت جذاب‌بودن و جذاب‌بودن هم معین شود.

۱. آیا تصویر با برند و محصولاتش مرتبط می‌باشد؟
یادتان باشد که یک عکس می‌تواند داستان برند را بگوید. چنین عکسی در خیال و خاطر استفاده کننده میماند. همچنین، به او یاری می‌کند تا بفهمد محتوای کاغذ در زمینه‌ی چه چیزی می باشد. پس، عکسی را گزینش نمائید که کاربر با نگاه کردن به آن پاسخ این سوال های را در آن ببیند: این وبسایت چیست و در آن چه چیزی عرضه می‌شود؟ بنابراین، هر چه عکس یا تصویر به برند، محصول ها، خدمات یا محتوای یک بخش یا شیت مرتبط‌تر باشد، عالی است.

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

راهنمای گزینش عکس برای وب سایت

۲. آیا تصویر جالب می باشد؟
تصویر بایستی مطلقا دیدنی باشد، نه قطعا قشنگ. درگیر کردن مخاطب مهم‌تر از زیبایی هست. شاید مایحتاج باشد عکس یا تصویری بسیار گوناگون خوی کنید تا از رقبا متمایز شوید. پیشنهاد می‌کنم حتما خصوصی به وبسایت (پورتفولیو) hi-im-julian بزنید و ببیند که او چه‌قدر خلاقانه برای معرفی‌کردن و نشان‌دادن هر مورد از مهارت‌هایی که داراست، تصویری بسیار متفاوت و دیدنی ساخته می‌باشد.

انتخاب تصویر دیدنی در وب طراحی صفحه

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

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

درضمن یادتان باشد که

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

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

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

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