چگونه می توانم یک وب سایت خوب طراحی کنم؟

7 اصل کلیدی که طراحی وب را خوب می کند

چگونه می توان طراحی وب را خوب انجام داد

طراحی خود را متعادل کنید.

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

برای طراحی شما دو یا سه رنگ پایه را انتخاب کنید.

سعی کنید گرافیک را با هم هماهنگ کنید.

تایپوگرافی وبسایت خود را بهبود بخشید

عناصر را با اضافه کردن فضای سفید در اطراف آنها برجسته کنید.

تمام عناصر متصل شده اند.

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

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

چگونگی طراحی وب سایت خوب (Infographic)

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

1. طراحی خود را متعادل نگه دارید.

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

مثال

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

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

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

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

2. طراحی خود را با استفاده از شبکه ها تقسیم کنید.

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

به عنوان مثال، Rule of Thirds و نسبت طلایی دلیل این است که چرا ستون های فرعی معمولا حدود یک سوم عرض صفحه و به همین دلیل محدوده محتوا اصلی تقریبا برابر با عرض طراحی تقسیم شده به 1.62 (برابر با phi در ریاضیات). ما نمی توانیم به این دلیل که چرا این کار را می کنیم، اما به نظر می رسد که در عمل درست عمل کنیم. به همین دلیل است که موضوع در عکس های حرفه ای گرفته شده معمولا نه در وسط، بلکه در تقاطع یک شبکه 9 سیگاری خیالی (سه تا سه با دو خط افقی و دو عمودی) قرار دارد.

مثال

شبکه به طور خاص به طرح های مینیمالیستی لطمه می زند. 5 سی و یک توسط Derek Punsalan نشان می دهد که چرا:

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

3. برای طراحی خود یک یا دو رنگ پایه را انتخاب کنید.

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

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

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

مثال

وبسایت Bence Kucsan طرح سبک رنگی خود را دارد. این به طور عمده تک رنگ است (رنگ ها و سایه های یک رنگ) و آکروماتیک (سیاه و سفید) با رنگ (قرمز) به ایستادگی کردن:

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

صحبت از رنگ، WebDesigner دیوار توسط نیک لا سعادت خالص است:

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

4. سعی کنید گرافیک را به خوبی ترکیب کنید.

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

مثال

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

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

Komodo Media Rogie King بیشتر گرافیکی سنگین است که کاملا از لحاظ فنی و موضوعی کاملا اجرا می شود.

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

5. تایپوگرافی وب سایت خود را بهبود بخشید.

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

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

پشته فونت

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

پشته فونت تنها CSS اصلی است. آنها به شما اجازه می دهند که ترتیب فونت ها را رندر کنید. برای دقیق بودندر اینجا از تایپ فاکس ها صحبت می کنیم، نه فونت ها. برای یک خلاصه خوب در مورد این، لطفا به نوع تایپ شده Jon Tan مراجعه کنید! = فونت.

;{body {font-family: "Helvetica Neue"، Helvetica، Arial، sans-serif 

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

زیبایی ستون های فونت این است که شما می توانید "backbacks" را تعریف کنید، به این معنی که هر زمان که یک متن مشخص شده از دست رفته باشد، مرورگر به سادگی یک خط بعدی را در نظر می گیرد. البته این به این معنی است که طراحی دقیقا برای همه یکسان نیست و به همین ترتیب ما کنترل بیشتری را از دست می دهیم. اما برای کسانی که نمیخواهند به یک راه حل دیگری (مانند جایگزینی تصویر) بپردازند، این بهترین است که CSS خالص ارائه می دهد در حال حاضر (تا روزی که می توانیم به راحتی  font-face استفاده کنیم).

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

جان تانن از یک پشته فونت جالب دیگری برای عنوانش استفاده می کند:

;{body {font-family: baskerville، 'palatino linotype'، 'times new roman'، serif

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

اندازه گیری و هدایت

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

پیشنهادهایی را می توانید افزایش دهید (یا اگر واقعا بخواهید کاهش یابد) با تعریف ویژگی CSS ارتفاع خط. به طور کلی ارتفاع خط 1.5 به خوبی برای پاراگرافها کار می کند. این به این معنی است که وقتی اندازه متن 12 امتیاز است، ارتفاع خط 18 نقطه (12 × 1.5) می رسد، که متن را به برخی از اتاق تنفس می دهد.

آویز نقل قول و گلوله

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

تیم ون Damme با استفاده از گلوله های حلقوی برای آخرین طراحی مجدد خود از Max Voltar

ما خط قرمز اضافه کرده ایم تا تاکید کنیم که چگونه تمام متن به صورت افقی تراز شده است. به سادگی با تنظیم ویژگی CSS padding-left در فهرست لیست گلوله به 0، می توانید همان نتیجه را بدست آورید.

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

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

قوانین چاپی که درخواست نمی کنند

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

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

یک کلمه درباره تعویض تصویر

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

6. ایجاد عناصر با اضافه کردن فضای سفید اطراف آنها را برجسته کنید.

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