مطالب توسط امیر عطوفی

شروع طراحی سایت

طراحی سایت را از کجا شروع کنیم؟ چه چیزهایی بلد باشیم؟! چقدر زمان نیاز دارد تا یک طراح شویم؟!!

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

چیزهایی خوانده یا شنیده باشید ولی باز هم به جوابی نرسیده باشید

یا شاید خیلی سخت بنظر آمده…!

ما اینجا با زبانی کاملا ساده یکبار برای همیشه سوالاتتان را پاسخ میدهیم 😉

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

زبان ها؟! بله زبان ها؛ چرا که سایت ها نیز مانند اپلیکشن ها به کمک زبان های مخصوصی پیاده سازی میشوند.

شاید در ابتدا بنظر زیاد بیایند، ولی قول میدهیم که در مرحله ی سوم خیالتان راحت میشود

مرحله اول: شناخت زبان های ایستا

زبان های طراحی سایت را به 2 دسته ی ایستا (static) و پویا (dynamic) تقسیم میکنند

زبان های ایستا به مانند اسمشان، پویایی و حرکتی در خود ندارند و با کمک آنها عناصر ثابت یک صفحه را طراحی میکنیم!

مثل ساختار و پیکره اصلی، بخش های سایت، عنوان ها، تیتر ها، محتواها، رنگ ها، فونت ها و … .

حالا به معرفی زبان های معروف این دسته میپردازیم

زبان HTML

این زبان پایه ای ترین زبان طراحی یک سایت است

(…یعنی اگر این زبان را نشناسی درست نیست که ادعایی در این حوزه داشته باشی…!)

هر سایتی که در مرورگر ها میبینیم، پیکره و ساختار اصلی و اولیه اش با این زبان نوشته شده.

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

اِلمان ها؟ یکم بیشتر بگید!

برای اینکه بهتر متوجه شوید المان ها یا تگ ها (tag) را در قالب یک مثال بررسی میکنیم

فرض کنیم یک سایت خبری میخواهیم راه اندازی کنیم

سایتِ عزیز ما قراره از قسمت هایی تشکیل شده و در هر قسمت شامل عنوان، عکس، پاراگراف و …باشد.

زبان HTML برای اینکه کار ما را راحت کند، میگوید با من به کمک اِلمان هایی که تعریف کردم صحبت کن!

یعنی بگو مطلب اولت کجاست؟ عکسش؟ عنوان ها، پاراگراف ها و جملاتت میخواهی کجا باشند؟

نتیجه اخلاقی: برای هر چیزی که بخواهیم، اِلمانی تعریف شده! 🙂

اول از همه، سایت w3schools را معرفی کنیم، یک منبع کامل و خفن در یادگیری تگ ها

خیلی راحت و بصورت زنده میتوانید تگ های مختلف را بشناسید

عکس پایین از همان سایت گرفته شده است

(در سمت چپ، کدها و در سمت راست، نتیجه زنده ای که مخاطبانِ ما لحظه ی ورود به سایت میبینند را مشاهده میکنید).

حالا فرض کنید برای سایت خبریمان میخواهیم یک عنوان و یک پاراگراف بنویسیم، این کار را با 2 المان انجام می دهیم

مثل شکل بالا این 2 کار را با تگ های <h1> و <p> انجام میدهیم (اولی برای عنوان و دومی هم برای پاراگراف)

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

پس برای تسلط به این زبان باید تگ های مختلف آن را بشناسید، همین!

زبان CSS

تا اینجا HTML را ساختار اولیه ی سایت تعریف کردیم و گفتیم با آن میشود عنوان، پاراگراف، عکس و … را در سایتمان قرار دهیم.

حالا فرض کنیم بخواهیم به متنی که نوشتیم رنگ،فونت و استایل دهیم، اینجاست که css به کمک ما میاید 🙂

این 2 زبان مکمل هم هستند و پیشنهاد میکنیم هر 2 را بشناسید.

چراکه اگر اولی اسکلت یک پرنده باشد، دومی پرها و زیبایی آن پرنده است!

ما در این زبان برای المان های تعریف شده، یک استایل تعریف میکنیم.

همان مثال قبل را در حالتی که به پاراگراف و عنوانمان فونت، رنگ و استایل دادیم میبینیم 😉

این نکته هم بگیم که این زبان کلیییی قابلیت داره( فکر نکنید فقط برای رنگه ها…! )

اگر دوست داشتی بیشتر راجب این زبان بدانی، اینجا کلیک کن!

زبان جاوا اسکریپت

2 زبان قبلی اگر یک پرنده با پرهایش را تحویل ما میداد، با این زبان میشود به آن حرکت و پرواز داد!

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

در مثال زیر دکمه ای قرار دادیم که با کلیک بر روی آن رفتاری از خود نشان میدهد( که آن رفتار همان نمایش ساعت و تاریخ است! )

با کمک این 3 زبان میشود طرحی از آنچه در ذهن داریم را در طراحی سایتی پیاده کنیم

ولی اگر این زبان ها را مطالعه کنید ممکن است به یک نکته ی مهم پی ببرید!

آن هم اینکه طراحی یک سایت با این زبان ها شاید زمان بر باشد… .

راه حل چیست؟ یعنی طراحان حرفه ای هم اینطوری سایتشان را طراحی میکنند؟

2 اصطلاح مهم را با هم یاد بگیریم

فریم ورک ها و کتاب خانه ها

فریم ورک ها (framwork) یا چهارچوب ها، پکیجی آماده از کدها هستند که توسط شرکتی جهت کمک به طراحان وب نوشته شده اند

ما کافیست طبق قوانین خاصی، کد ها را در کنار هم قرار داده و از آن ها استفاده کنیم!

استفاده از فریم ورک ها سرعت ما را بسیار افزایش می دهند و یکی از معروف ها هم میتوان به بوت استرپ (bootstrap) اشاره کرد.

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

از کتاب خانه های معروف زبان جاوا اسکریپت، می توان به ajax اشاره کرد.

خلاصه که این فریم ورک ها و کتابخانه ها هم وجود دارند و بعد ها با حرفه ای شدنمان میتوانیم سراغ آن ها هم برویم…

مرحله دوم: شناخت یک زبان پویا

عموما طراحان سایت به 2 دسته ی کلی تقسیم می شوند

دسته اول؛ طراحان سمت کاربر (client side) که ساختار ظاهری یک سایت و آنچه کاربر میبیند را می سازند(به کمک 3 زبان قبلی!)

دسته دوم؛ طراحان سمت سرور (server side) که منطق سایت ها را پیاده سازی میکنند

آن دسته از عزیزانی هم که به هر دو مسلط هستند full stack developer میگویند 😀

از بین زبان های سمت سرور، یک زبان را بلد باشید کافیست و پیشنهاد ما هم زبان پرکاربرد و محبوب php است

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

مثلا شما با زبان html و css در سایتتان فرمی برای کاربران میسازید

دکمه ای را برای بروز رفتاری (مانند تشکر یا دادن هشدار بعد از کلیک) در آن فرم با جاوا اسکریپت قرار می دهید

حال پردازش این فرم بر عهده ی کیست؟ برعهده ی زبانی مانند php است!

حتی آمار بازدید یک سایت، تاریخ و ساعت که پویا هستند را با این زبان میتوان نوشت و… .

نکته دیگر اینکه که، هر سایتی به یک فضا و پایگاهی برای ذخیره ی اطلاعات پردازش شده نیاز دارد!

پایگاهی که اطلاعاتی مثل اطلاعات کاربران و … در آن ذخیره شود

اینجاست که حرف از SQL ها به زبان میاوریم و محبوب ترینشان زبان mysql است که تعامل جالبی با زبان php دارد

خلاصه این 2 زبان را وقتی سراغشان بروید که میخواهید یک توسعه دهنده ی وب (web developer) شوید

وگرنه که مرحله ی بعد را ببینید و غصه اش را نخورید 🙂

مرحله سوم: یادگیری یک CMS!

چرا این مرحله را برخلاف مرحله های قبل بجای “شناخت” نوشتیم “یادگیری” ؟

با پیشرفت تکنولوژی نباید انتظار داشت برای ساخت سایتی کلی زبان را بلد بود و کلی کد و دستور نوشت!

یکسری شرکت ها آمدند قالب ها و سیستم هایی طراحی کردند (با کمک همان زبان هایی که بالاتر گفتیم).

مثل سیستم های مدیریت محتوا(CMS)، که افراد به راحتی با آن سایت طراحی کنند!

حتی با داشتن دانش اندک از زبان های طراحی سایت!!

از معروف ترینِ این سیستم ها به وردپرس(wordpress) میتوان اشاره کرد.

وردپرس چیست؟

یک سیستم مدیریت محتوای سایت ساز و بسیار انعطاف پذیر که بر پایه زبان php نوشته شده!!

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

کار با آن ساده و فقط باید قسمت های مختلف آن را شناخته تا با چند کلیک به هدفتان برسید.

در وردپرس 2 چیز را بشناسید؛ قالب ها (themes) و افزونه ها (plugins)

قالب ها همان ساختار پیش فرض سایتتان است

وردپرس شامل میلیون ها قالب رایگان و غیر رایگانه که بسته به نیازتان یکی را انتخاب کرده و بر روی سایتتان نصب میکنید

انواع مختلفی هم داریم از قالب های حرفه ای خبری گرفته تا قالب های فروشگاهی و …

افزونه ها قابلیت های اضافی هستند که آن ها را روی قالبتان نصب میکنید و سایتتان را بهتر و بهتر میکنید

مثلا یک فرم تماس حرفه ای میخواهید

با یک سرچ میفهمید کدام افزونه همچین فرمی میسازد آن را انتخاب کرده و روی سایت نصب میکنید!

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

با وردپرس سایت های فوق العاده ای میتوان طراحی کرد ولی نمیشود از زبان های 2 مرحله اول هم غافل شد

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

بسته به نیاز، شاید دانستن وردپرس کفایت کند ولی سایت های مطرح دنیا، قطعا طراحانشان به دانستن آن بسنده نکردند 😉

مرحله چهارم: یادگیری های جانبی!

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

طراحی یک سایت بسته به سایتی که طراحی میکنیم میتواند حاصل زحمات یک فرد یا یک تیم باشد

آن تیم میتواند شامل محتوا کار، گرافیست، seo کار و … باشد و چه بهتر که تاحدودی حرف یکدیگر هم متوجه بشوند

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

خوب است بدانیم چه چیزی باعث ایجاد تمایز ما با بقیه میشود

هر سایتی با توجه به موضوعی (مثلا خبری) ساختاری متفاوت دارد ولی چیزی که در همه ی سایت ها میبینیم محتوای آن است

شاید برای خودمان هم پیش آمده باشد که محتوای بصری ما را بیشتر جذب کرده باشد!

بنظر ما خوب است که یک طراح سایت از دید بصری خوبی هم بهره مند باشد

روان شناسی رنگ ها را بداند و با نرم افزارهای گرافیکی مانند فتوشاپ و ایلاستریتور و … آشنایی داشته باشد

چه بصورت تکی طراحی سایت را انجام دهد و چه بصورت تیمی، قطعا کمکش میکند!


جمع بندی

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

میتوانید همه یا بخشی از مراحل بالا را انتخاب کنید

بعضی ها صرفا به مرحله 3 اکتفا میکنند

بعضی به 1، 3 و 4 …

و بعضی هم بیشتر 2!

خلاصه که هر چه بیشتر بلد باشید و بتوانید نیاز مخاطبان و کارفرمایان را برطرف کنید قطعا درامد خوبی خواهید داشت 🙂