آرشیو مهر ماه 1398

تکنولوژی / اخبار تکنولوژی/ مقالات تخصصی در زمینه تکنولوژی / دوربین / موبایل/ دوربین مداربسته

فرایند طراحی سایت با بررسی محتوا شروع می شود

۷۱۰ بازديد


اگر در سال های اخیر در مشاغل و حرفه مربوط به طراحی سایت مشغول به کار بوده اید احتمالا با مفهوم " اول – محتوا "("first-content") بسیار روبرو شده اید. اما اول محتوا به چه معناست؟ بیایید قدم به قدم در خصوص این مفهوم با هم صحبت کنیم. 

فرایند طراحی " اول – محتوا " چیست ؟

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

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

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

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

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

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

فواید طراحی " اول – محتوا " :

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

طراحی " اول محتوا " باعث می شود تا  :

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

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

در سایت خود انسجام ایجاد کنید ( و کدهای خود را واضح تر بنمایید) : اگر می دانید  سایتتان یک بلاگ ،  مرکز کمک و صفحات بازار یابی  دارد می توانید  سلسله  مراتب را بنویسید تا همه ی  3 کار  را با هم انجام دهید . این به شما کمک می کند تا یک واسط منسجم  (و بنابراین برای  یادگیری) ایجاد کند .

از چرخش  تکرار بی فایده بپرهیزید :

اغلب وقتی طراحی  بدونم محتوا انجام می شود ، فرآیند توسعه وارد چرخه ی بی پایان بین طراح و سهام  دار می شود که معمولاً به  معنی تغییرات متنی کوچک و نا امید کننده  می باشد که طراح مجبوراست آن را آپ دیت و سپس ذخیره کند (  که توسط  WEBFLOW داده می شود ،  این تغییرات سختتر اما آرامتر است ) .

بعلاوه اگر ابتدا در حال طراحی محتوا در  WEB FLOW CMS  هستید می بینید که این فرآیند ساده تر و آسانتر می شود .

اجازه بدهیم ببینیم چگونه :

طراحی اول محتوا با  WEB FLOW CMS:

انواع زمینه های WEB FLOW CMS :

اولین گامی که باید در ایجاد یک سایت توسط  WEB Flow CMS  در نظر بگیرید ایجاد یک  مجموعه است و یک  مجموعه ، نوعی محتوا است که با انتخاب زمینه از لیست زیر آن را مشخص خواهید کرد :

متن ساده

متن قوی

عکس

تصویر

لینک

عدد

وبلاگ

زمان و تاریخ

تغییر

رنگ

مرجع

مرجع چند آیتمی

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

اما به محض اینکه  یک مرجع یا مرجع چند آیتمی  ساختید خواهید دید چرا برنامه ریزی برای محتوا اولین گام  در طراحی توسط  WEB Flow CMS می باشد ، چون نمی توانید به مجموعه ی دیگری مراجعه کنید مگر آنکه آن را  بسازید .

گیج شده اید ؟ نمی توانم شما را سرزنش کنم. پس اجازه دهید مثالی را در مورد این بحث مطرح کنم

مثال :

ایجاد مجله ی غذایی با WEB Flow CMS :

فرض کنید که می خواهید مجله غذایی  خودتان را با WEB Flow CMS   به راه بیندازید . شما می دانید که دستور غذایی مهمترین ویژگی این  مجله است .

حالا شما باید طراحی خود را با ایجاد " دستورهای غذایی " آغاز کنید. بنا براین  یک مجموعه ایجاد می کنید،عنوان آن را رسپی  "دستور غذایی"  می گذاریم و شروع به انتخاب مواد غذایی می کنید.

تصویر : یک تصویر نزدیک و بزرگ  از غذا به عنوان تصویر ستودنی

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

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

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

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

اینجا جایی است که مفهوم الگوگیری محتوا خیلی قوی می شود .

مدل گیری فرایند محتوا برای طراحان :

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

مدل محتوا به دو شکل می آید . یکی بزرگ و یکی کوچک . برای وب سایت مجله غذایی ، مدل محتوای دارای سطوح بزرگ می تواند به صورت زیر باشد :

مدل محتوا دارای سطوح بزرگ برای وب سایت مجله ی غذا

.

همه ی کاری که باید در اینجا انجام دهید مشخص کردن عناصر محتوایی است که می خواهید در سایتتان بگذارید و نشان دهید چگونه آنها می توانند با یکدیگر در ارتباط باشند . با webflowcms ، شما بین مرجع یا زمینه ی چند تا مرجع مختلف می توانید ارتباط ایجاد کنید ، برای مرحله ی بعد به طرح ریزی در مورد محتوای  هر یک از موضوع های بالا فکر می کنید .خبر خوب این است که طرح شما همراه با مجموعه ای که بین هر کدام از آنها ایجاد می کنید  به شما کمک خواهد کرد تا محتوای نیازمندیهای  هر ردیف را  مشخص کنید. در خصوص طراحی سایت اگر به زبان انگلیسی آشنایی کافی دارید من سایت http://www.webdesignertrends.com را به شما پیشنهاد می کنم. 

برای متمرکز شدن بر روی محتوای فردی ، می توانید کارهای زیر را انجام دهید.

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

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

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

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

همدردی در طراحی  با محتوای واقعی:

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

ایجاد کننده محتوا ، که از سیستم مدیریت محتوایی که ایجاد می کنید ، استفاده می کند

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

کار منظم با بهترین  نوع محتوا به شما کمک خواهد کرد که چگونه CM را می توانید درست کنید و چگونه می توانید  خروجی را طراحی کنید یعنی  محتوا چگونه در لبه ظاهر می شود .

چگونه web flow CMS   را بسازیم :

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

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

طراحی بصری محتوای دینامیک (CMS  ) :

همان طور که جاش پاکش در" ابزار طراحی مدرن : استفاده از داده های واقعی "بیان نمود، طراحی با محتوای واقعی  به شما کمک می کند تا جریان  بالقوه را در طراحی بصری سایت بشناسید.  سر تیتری که  در عکس ها بر روی یک پس زمینه روشن وجود دارد ، قابل خواندن نمی باشد .متن های دکمه ای باید دکمه های منظم css را ایجاد نمایند.
این سایت ( https://graphiste.com/ )  در خصوص این مفهوم توضیحات بسیار مفیدی به شما ارائه کرده است. 

هر کدام از این چالش ها  یک فرصت برای انجام یکی  یا دو مورد از موارد زیر را فراهم می نماید :

طراحی یا طراح را ، منعطف تر بکشید ؟

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

یک ورودی راهنمایی  برای روش محتوا اضافه کنید و آن را با بکاربردن  CMS  بک آپ بگیرید :

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

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

اگر افکار فوری اتان در مورد " اول – محتوا " ، جالب به نظر می رسد در به دست آوردن محتوا از سوی ارباب رجوعانتان موفق باشید . به زودی پستی در مرود روش های غلبه بر مشکلات ایجاد خواهیم کرد .

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