menu

نمونه کارهای من

بیدار مردان

پلتفرم:

CakePHP

تکنولوژی های مورد استفاده :

CakePHP

CSS3

HTML5

JQuery

آدرس وب سایت :

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

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

در ادامه به معرفی وب سایت در قالب چند تصویر میپردازیم:

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

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

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

هم چنین در طراحی این سایت، از تکنیک های all in one استفاده شده است و تمام سایت در یک صفحه است.

1) صفحه ی بارگزاری:

2) صفحه ی اصلی: بعد از اتمام loading و بارگزاری کامل سایت، شما با صفحه ای مانند تصویر زیر روبرو خواهید شد.

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


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

4)شهر ها: با حرکت دادن موس و رفتن بر روی شهر های مختلف، با hover شدن موس، یک صفحه ی کوچک popover مانند زیر باز خواهد شد که در آن به معرفی آن شهر در قالب یک تصویر و نام می پردازد.

5)افراد: و با کلیک بر روی شهر ها، صفحه ی مربوط به افراد بیداری اسلامی آن شهر مطابق زیر باز خواهد شد.

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

7) در تصویر بعدی نیز یکی دیگر از شهر ها(تهران) پس از کلیک به نمایش در آمده است.

8) افراد : پس از بردن موس بر روی تصویر افراد، شما با تصویری مشابه زیر مواجه خواهید شد

9)زندگینامه ی افراد: شما با کلیک بر روی شخصیت های مختلف، در صفحه ی باز شده میتوانید به مطالعه ی زندگینامه ی افراد بپردازید.

10)منابع و ماخذ:

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

مطمئنا در طراحی سایت بالا، مانند بسیاری از سایت های دیگر نقاط ضعف و قوت زیادی وجود دارد.

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

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