طراحی سایت
طراحی سایت دو کار متفاوت است که یک اسم دارند: ساختن چیزی که کار کند، و ساختن چیزی که خوب به نظر برسد. این مسیر با کار کردن شروع می کند، چون ظاهری که روی یک ساختار غلط نشسته باشد را بعدا نمی شود نجات داد.
- ۱۲ درس
- رایگان، بدون ثبت نام
از هیچ تا یک سایت واقعی، پله به پله
-
۱
فهمیدن اینکه سایت چطور کار می کند
دامنه، سرور، مرورگر و رفت و برگشتی که بینشان اتفاق می افتد.
-
۲
ساختن صفحه با HTML
اسکلت معنایی صفحه و اینکه هر تگ چه چیزی را به مرورگر و صفحه خوان می گوید.
-
۳
ظاهر و رفتار: CSS و جاوااسکریپت
چیدمان، واکنشگرایی، و آن مقدار جاوااسکریپت که واقعا لازم است.
-
۴
تصمیم های طراحی: رابط، تجربه، دسترس پذیری
جایی که سلیقه تمام می شود و قاعده شروع می شود.
-
۵
یک سایت واقعی و منتشر شده
وردپرس یا سایت ساز، و چک لیستی که قبل از انتشار باید رد شود.
هیچ پله ای یک هفته ثابت طول نمی کشد. سرعت بالا رفتن به این بستگی دارد که چند بار چیزی می سازید و خرابش می کنید، نه به تعداد ویدیوهایی که می بینید.
مسیر، قدم به قدم
درس ها به ترتیبی چیده شده اند که هر کدام روی قبلی می ایستد. از هر جایی هم می شود وارد شد.
- ۱سایت چگونه کار می کندوقتی آدرس سایتی را می نویسید، مرورگر اول اسم دامنه را به یک نشانی عددی ترجمه می کند، بعد به کامپیوتری که پشت آن نشانی نشسته وصل می شود و یک متن HTML می گیرد و از روی آن متن صفحه را می سازد. سایت یعنی همین رفت و برگشت کوتاه، و هر مشکلی که می بینید در یکی از حلقه های همین زنجیره افتاده است.مقدماتی
- ۲آموزش HTML از صفرHTML زبان ساختار صفحه است، نه زبان برنامه نویسی: با آن می گویید این تیتر است، این پاراگراف، این فهرست و این لینک. برای شروع فقط یک فایل متنی با پسوند html و یک مرورگر لازم دارید و اولین صفحه تان در همان ده دقیقه اول ساخته می شود.مقدماتی
- ۳آموزش CSS از صفرCSS می گوید چیزی که HTML ساخته چه شکلی دیده شود: رنگ، فاصله، اندازه و جای هر عنصر روی صفحه. هر قانونش سه تکه دارد، یک انتخابگر که می گوید کدام عنصر، یک ویژگی که می گوید چه چیزی، و یک مقدار.مقدماتی
- ۴آموزش جاوااسکریپت مقدماتیجاوااسکریپت به صفحه رفتار می دهد: واکنش به کاری که کاربر می کند، عوض کردن محتوا بدون بارگذاری دوباره، و گرفتن داده از سرور. اسکلت صفحه کار HTML است و ظاهرش کار CSS؛ جاوااسکریپت فقط جایی لازم می شود که صفحه باید کاری انجام بدهد.مقدماتی
- ۵طراحی واکنشگرا چیستطراحی واکنشگرا یعنی یک صفحه با یک آدرس و یک محتوا که چیدمانش را با عرض نمایشگر عوض می کند، نه چند نسخه جدا برای موبایل و دسکتاپ. عرض هایی که چیدمان در آنها عوض می شود از فهرست دستگاه ها نمی آیند؛ از جایی می آیند که چیدمان خود شما می شکند.مقدماتی
- ۶اصول طراحی رابط کاربریرابط کاربری خوب آن است که کاربر بدون فکر کردن بفهمد قدم بعدی کجاست، و این را چهار چیز می سازند: سلسله مراتب، کنتراست، فاصله و ثبات. سه تای اول را می شود اندازه گرفت و چهارمی همان چیزی است که در صفحه های فروش بیشتر از خلاقیت به کار می آید.مقدماتی
- ۷تجربه کاربری چیستتجربه کاربری کل مسیری است که یک نفر برای رسیدن به هدفش طی می کند، از لحظه ای که اسم شما را می شنود تا وقتی کارش تمام شده یا رها کرده. رابط کاربری فقط سطح این مسیر است؛ تجربه کاربری خود مسیر است، با هر مرحله ای که در آن اضافه، مبهم یا خسته کننده باشد.مقدماتی
- ۸آموزش وردپرس برای مبتدیوردپرس یک سیستم مدیریت محتواست: به جای اینکه هر صفحه را کد بزنید، محتوا را در یک پیشخوان می نویسید و وردپرس آن را به صفحه تبدیل می کند. برای شروع سه چیز لازم دارید، دامنه و هاست و حدود نیم ساعت وقت؛ بقیه راه انتخاب هایی است که همین درس مرتب می کند.مقدماتی
- ۹سایت ساز یا طراحی اختصاصیسایت ساز و طراحی اختصاصی دو جواب درست به دو سوال متفاوت اند: یکی سرعت رسیدن به نسخه اول را می خرد و دیگری کنترل و مالکیت را. اگر هنوز مطمئن نیستید سایت دقیقا چه کاری باید بکند، سایت ساز انتخاب بهتری است؛ اگر نیازتان روشن است و بیرون از فهرست امکانات آماده می افتد، اختصاصی.مقدماتی
- ۱۰دسترس پذیری وب چیستدسترس پذیری وب یعنی صفحه ای بسازید که با صفحه کلید، با صفحه خوان و با چشمی که رنگ ها را جور دیگری می بیند هم قابل استفاده باشد. بیشترش کار سختی نیست: HTML درست، کنتراست کافی، حالت focus که دیده شود و تصویری که متن جایگزین دارد.میانی
- ۱۱چک لیست قبل از انتشار سایتچک لیست انتشار، فهرست کارهای خوب نیست؛ فهرست کارهایی است که بعد از انتشار گران تر می شوند یا اصلا برنمی گردند. چهار ستون دارد: فنی، محتوا، حقوقی و اندازه گیری، و مهم ترین موردش یک تگ چهار حرفی است که از نسخه آزمایشی جا می ماند.میانی
- ۱۲هوش مصنوعی در طراحی سایتهوش مصنوعی امروز پیش نویس یک صفحه را در چند دقیقه می سازد و همان جا متوقف می شود: چیزی که بیرون می دهد شبیه هزار صفحه دیگر است، چون از روی همان ها یاد گرفته. موضع ما ساده است، پیش نویس با مدل و انتشار با قضاوت آدم، و بخش سخت کار دقیقا همان قضاوت است.میانی
ترتیب درس ها از یک تجربه ساده می آید: کسی که اول HTML را یاد می گیرد و بعد سراغ سایت ساز می رود، می فهمد دارد چه کار می کند؛ کسی که برعکس شروع می کند، تا اولین مشکل واقعی هیچ ابزاری برای فهمیدنش ندارد. پس اول می بینیم یک سایت وقتی باز می شود چه اتفاقی می افتد، بعد زبان ساختار صفحه، بعد ظاهر و رفتار، و آخر کار با وردپرس و انتشار.
این مسیر شما را برنامه نویس نمی کند و قرار هم نیست بکند. هدفش این است که بتوانید یک صفحه واقعی بسازید، کد کسی دیگر را بخوانید و بفهمید، و وقتی چیزی خراب شد بدانید کجا را نگاه کنید. همین سه تا برای بیشتر کسانی که سایت خودشان را می خواهند کافی است.
یک نکته که معمولا گفته نمی شود: برای خیلی از کسب و کارها سایت ساز جواب می دهد و لازم نیست کسی سایت اختصاصی بسازد. درس مربوطه در همین مسیر می گوید کجا انتخاب درست سایت ساز است و کجا نیست، به جای اینکه جواب را از قبل بداند.
سوال هایی که واقعا پرسیده می شوند
برای طراحی سایت حتما باید کدنویسی بلد باشم؟
برای ساختن یک سایت نه، برای فهمیدنش بله. با وردپرس یا یک سایت ساز بدون یک خط کد سایت راه می افتد. ولی همان روزی که یک قالب کار نکند یا سرعت صفحه پایین بیاید، تفاوت کسی که HTML و CSS را خوانده با کسی که نخوانده معلوم می شود.
با سایت ساز شروع کنم یا از اول کد بزنم؟
اگر هدفتان راه انداختن سایت خودتان است، با سایت ساز یا وردپرس شروع کنید و همزمان HTML بخوانید؛ زودتر چیزی می بینید که کار می کند. اگر هدفتان کار کردن به عنوان طراح است، از کد شروع کنید، چون کارفرما دقیقا همان جایی به شما نیاز دارد که سایت ساز کم می آورد.
یادگیری طراحی سایت چقدر طول می کشد؟
اولین صفحه ای که خودتان ساخته باشید همان روز اول ساخته می شود. بین آن صفحه و سایتی که برای یک مشتری واقعی درست کار کند، چیزی که فاصله را پر می کند تعداد پروژه های خراب شده است نه تعداد ساعت های ویدیو. هر کس عدد قطعی بدهد دارد دوره می فروشد.
این مسیر برای کسی نوشته شده که می خواهد خودش بسازد یا بفهمد. اگر وقتش را ندارید و ترجیح می دهید کار را بسپارید، صفحه طراحی سایت را ببینید