طراحی اولیه وب‌سایت شما

 

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

وبسایت‌های خودتان را خلاقانه ایجاد کنید.

تئوری رنگ‌ها را در طراحی وب‌سایت یاد بگیرد.

جهات عمودی را در طراحی لحاظ کنید.

مطمئن شوید که کاربران شما را دنبال می‌کنند، پس یک داستان بگویید.

نظریه ژستالت را بشناسید و آن را در طرح های خودتان لحاظ کنید.

طراحی z را در درک کنید و آن را در وب‌سایت خودتان به کار ببرید.

قاب‌بندی و چگونگی استفاده از آن در طراحی را یاد بگیرید.

 

کدنویسی اولین وب‌سایت شما

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

 

 

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

 

 

ابزارهای حرفه‌ای برای طراحی وب‌سایت

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

 

Photoshop

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

توشاپ برای طراحان وب

طراحی صفحه soon coming با فتوشاپ

 

Emmet

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

چگونه با ایمت در چند دقیقه بوت‌استرپ بسازید؟

 

Reflow

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

مقدمه‌ای بر طراحی قالب واکنش‌گرا با Edge Reflow

 

ابزارهای تولید قاب

تعداد زیادی نرم‌افزار برای قاب‌بندی وب‌سایت وجود دارد. شما با یک جستجوی ساده در اینترنت می‌تواند تعداد زیادی از آن‌ها را بیابید. برای این منظور کافیست تا عبارت " tools wireframing " را گوگل کنید.

 

طراحی وب‌سایت واکنش‌گرا

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

 

 

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

طراحی وب با رویکرد واکنش‌گرایی

اصول طراحی شبکه‌ای برای ایجاد قالب‌های واکنش‌گرا

یک مثال عملی از طراحی ساده و واکنش‌گرا

 

استفاده از سیستم‌های مدیریت محتوا

امروزه تقریبا بیشتر طراحان وب قبول کرده‌اند که باید برای طراحی یک وب‌سایت کارامد از سیستم‌های مدیریت محتوا استفاده کنند. با جستجوی عبارت " cms for web designers" می‌توانید لیستی از نرم‌افزارهای مدیریت محتوا را پیدا کنید. شاید بتوان گفت از این میان، سه نرم افزار وردپرس، جوملا و دروپال ، از محبوبیت بیشتری برخوردارند که آموزش وردپرس بین علاقه مندان به شدت محبوب است.

 

و در ادامه...

اگر مطالب بالا را دنبال کرده باشید احتمالا تا الان به درک مناسبی از طراحی وب‌سایت رسیده باشید، اما هنوز نیاز به یک سری مطالب تکمیلی دارید تا بتوانید طراحی کامل‌تری را انجام دهید. من در اینجا فقط لغات کلیدی این مطالب را عنوان می‌کنم، مسلما هر کدام از این اسامی می‌تواند موضوع مقالات جداگانه‌ای باشند. لغاتی مثل: Bootstrap، Foundation، Pure، Jeet، SEO،Typography، UX و...

شاید با دیدن تعداد زیاد این لغات کمی نگران شده باشید اما این قول را به شما می‌دهم که اگر مطالب این سایت را دنبال کنید، تا چند وقت دیگر همه این اسامی را مثل اسامی فرزندان خودتان دوست خواهید داشت. چرا که نه!