اندازه استاندارد برای طراحی وبسایت

[Aligfx]

سلام بر همه
از اینکه تاپیک جدید ایجاد کردم معذرت میخوام
سوالی داشتم
اندازه استاندارد برای طراحی وبسایت چند هستش و با چه اندازه ای باید تو فتوشاپ طراحی رو شروع کرد و اندازه فونتها هم باید چند باشه؟؟؟؟


Sent from iPhone 4S

[Thor God]

ببینید تمام این موارد بستگی به سایتتون داره.
بعضی سایت ها رسپانسیو و فول اسکرین هستند بعضی دیگه بیشتر جنبه پروفایل دارن که 500 پیکسل هم زیاده براش.

به شخصه در طراحی هایی که انجام میدم WIDTH رو درصدی وارد میکنم. بهتر جواب میده. البته 1 دیو رو درصدی وارد کنید، تا آخر راه باید با درصد برید جلو.


در بحث فتوشاپ هم اندازه باید بر اساس آبجکت های درون سایت تنظیم بشه. اما سعی کنید از حد مجاز کمی بزرگتر کار کنید.

[A.N.A.P]

سلام اندازه عرض استاندارد برای طراحی استاتیک 980 پیکسل هست.

[Thor God]

سلام اندازه عرض استاندارد برای طراحی استاتیک 980 پیکسل هست.

همچین چیزی کاملا اشتباه هست. البته اشتباه هم نیست قدیمیه.

این روش برای وقتیه که برای بادی یک width قرار میدادن و آبجکت ها رو تو اون می چیدن. الان دیگه این روش ها منسوخ شده هست.:n26:

[A.N.A.P]

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

[Thor God]

عرض کردم برای یک صفحه استاتیک.

ربطی به استاتیک یا داینامیک بودن نداره ؟
فکر میکنم شما درست متوجه استاتیک و داینامیک بودن یک پیج نیستید.


با این حساب ایندکس ها و صفحات پروفایل عرض همشون 980 باید باشه دیگه :n29:

[Aligfx]

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


Sent from iPhone 4S

[A.N.A.P]

ربطی به استاتیک یا داینامیک بودن نداره ؟
فکر میکنم شما درست متوجه استاتیک و داینامیک بودن یک پیج نیستید.


با این حساب ایندکس ها و صفحات پروفایل عرض همشون 980 باید باشه دیگه :n29:

شما متوجه نیستی عزیز. صفحه استاتیک رو فکر کنم با برنامه نویسی استاتیک اشتباه گرفتی.

صفحه استاتیک که Fixed هم بهش میگن ، صفحه ای هست که با ریسایز کردن صفحه تغییری نمیکنه.

[Thor God]

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


Sent from iPhone 4S

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

980 پیکسل هست.


شما متوجه نیستی عزیز. صفحه استاتیک رو فکر کنم با برنامه نویسی استاتیک اشتباه گرفتی.

صفحه استاتیک که Fixed هم بهش میگن ، صفحه ای هست که با ریسایز کردن صفحه تغییری نمیکنه.

:n02:
دوست عزیز سخت در اشتباه هستی.
اصلا از اساس داری اشتباه فکر می کنی. اصولا برنامه نویسی استاتیک و داینامیکی وجود نداره ! به صفحات برنامه نویسی شده داینامیک و صفحاتی که برنامه نویسی نشدن و فقط html+css+jquery خالی هستند و در واقع به دیتابیس متصل نیستند استایتک می گن. ( گرچه وبسایت هایی هستند که برنامه نویسی دارند اما نیازی به دیتابیس ندارند و اطلاعات رو تحت سرور پردازش می کنن مثله صفحات تماس با ما اما عمدتا وبسایت های داینامیک با دیتابیس شناخته میشن )

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


اصلا فرض میگیریم صحبت های بالا اشتباه ! شما به بنده بگو ببینم فرق برنامه نویسی استاتیک با داینامیک و طراحی استاتیک و داینامیک در چییست ؟:n29:

[A.N.A.P]

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

980 پیکسل هست.



:n02:
دوست عزیز سخت در اشتباه هستی.
اصلا از اساس داری اشتباه فکر می کنی. اصولا برنامه نویسی استاتیک و داینامیکی وجود نداره ! به صفحات برنامه نویسی شده داینامیک و صفحاتی که برنامه نویسی نشدن و فقط html+css+jquery خالی هستند و در واقع به دیتابیس متصل نیستند استایتک می گن. ( گرچه وبسایت هایی هستند که برنامه نویسی دارند اما نیازی به دیتابیس ندارند و اطلاعات رو تحت سرور پردازش می کنن مثله صفحات تماس با ما اما عمدتا وبسایت های داینامیک با دیتابیس شناخته میشن )

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


اصلا فرض میگیریم صحبت های بالا اشتباه ! شما به بنده بگو ببینم فرق برنامه نویسی استاتیک با داینامیک و طراحی استاتیک و داینامیک در چییست ؟:n29:
اشتباه فکر نمیکنم
من حرفی از طراحی داینامیک نزدم . پست دومم :



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



:9:
قضیه همچین چیز پیچیده ای نیست.شما پیچوندی قضیه رو. گفتم صفحه استاتیک یا Fixed ( فکر کنم روی کلمه استاتیک گیر هستید) ثابت هستن. صفحات فلوید مثل P30world ، اساسشون درصد هست .صفحات آداپتیو هم بر اساس گجت ها طراحیشون فرق داره .ریسپانسیو هم با اسکیل کردن مرورگر تغییر میکنه .

توضیحاتتون هم بی ربط هست.


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

[Aligfx]

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

[Thor God]

اشتباه فکر نمیکنم
من حرفی از طراحی داینامیک نزدم . پست دومم :



:9:
قضیه همچین چیز پیچیده ای نیست.شما پیچوندی قضیه رو. گفتم صفحه استاتیک یا Fixed ( فکر کنم روی کلمه استاتیک گیر هستید) ثابت هستن. صفحات فلوید مثل P30world ، اساسشون درصد هست .صفحات آداپتیو هم بر اساس گجت ها طراحیشون فرق داره .ریسپانسیو هم با اسکیل کردن مرورگر تغییر میکنه .

توضیحاتتون هم بی ربط هست.


فیـسبوک توی نسخه جدیدش مقداری سعی کرده ریسپانسیو کار کنه . ولی هنوز بصورت کلی Adaptive هست.


دوست عزیز این پست شما :


شما متوجه نیستی عزیز. صفحه استاتیک رو فکر کنم با برنامه نویسی استاتیک اشتباه گرفتی.

شما بین برنامه نویسی استاتیک و طراحی استاتیک فرق گزاشتید ! شما توضیح بدید ... . من متوجه فرق این دو نیستم. اصلن برنامه نوسی استاتیک یعنی چی ؟:n26:

من نپیچوندم فقط شما لغات جدید و تکنیک های جدید از خودت درآوردی :n02: ( برنامه نویسی استاتیک ! )

شما داری تکنیک ها و روش ها و انواع برنامه نویسی رو با هم قاطی می کنی. ببینید طراحی fluid یک تکنیک طراحی هست نه یک حالت طراحی که شما با طراحی استاتیک مقایسه می کنید. همچنین طراحی فیکسد.
ما دو نوع طراحی داریم، استاتیک و داینامیک. حالا زیر مجموعه اینها که جزو هر دو نیز هستند تکنیک های رسپانسیو و فیکسد و فلوید و حتی Infinite Scrolling هستند.

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

[Thor God]

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

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

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


موفق باشید.

[A.N.A.P]

من تو قانع کردن شما عاجزم.

همین که Infinite Scroll رو هم جزو طراحی ها میدونید برای من کافیه.

موفق باشید.

[Thor God]

من تو قانع کردن شما عاجزم.

همین که Infinite Scroll رو هم جزو طراحی ها میدونید برای من کافیه.

موفق باشید.

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

همون طور که گفتم :


ما دو نوع طراحی داریم، استاتیک و داینامیک. حالا زیر مجموعه اینها که جزو هر دو نیز هستند تکنیک های رسپانسیو و فیکسد و فلوید و حتی Infinite Scrolling هستند.

من کی گفتم Infinite Scrolling طراحی هست ؟ گفتم یک تکنیکه. مثله رسپانسیو. :n26: که الان گوگل از این تکنیک (Infinite Scrolling) داره استفاده.
در هر صورت این موارد به پوینت اف ویو هر شخص بستگی داره که یک روش رو طراحی بدونه یا تکنیک. این وسط لغات جدید که وارد این عرصه شدند مثله برنامه نویسی استاتیک مورد بحث هستند :n29: ( من هنوز هم نمیدونم این لغت یعنی چی )


در ظمن اگر متوجه اشتباه خودتون شدید لطفا اشتباهِ الکی از صحبت های من نگیرید.


موفق باشید.

[behnamy01]

فرق بین Adaptive و ریسپانسیو چیه دوستان؟

[Thor God]

فرق بین Adaptive و ریسپانسیو چیه دوستان؟

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

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

[behnamy01]

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

ولی برای طراحی رسپانسیو علاوه بر اینکه اندازه ها درصدی هست چندین استایل شرطی برای رزولیشن های مختلف و مرورگر های مختلف طراحی می کنن + مدیا کوئری های مختلف تا اتوماتیک آبجکت ها تغییر شکل بدن، مثلا در رزولیشن خاص اینقدر آبجکت ها تقییر می کنند که قالب تبدیل به قالب موبایل میشه.
آقا ما اومدیم Adaptive (درصدی) طراحی کنیم، بیزار شدیم :n02: همون fixed بهتره :n02: نگاه کنید مشکلم اینه که مثلا من یک صفحه رو به دوقسمت چپ و راست تقسیم کردم، یعنیwidthبرای div سمت راست رو 50درصد گذاشتم و div سمت چپ رو هم 50درصد. یک float هم دادم که کنار هم وایستن تا اینجاش خوبه، ولی اومدم دور div ها border گذاشتم بعدش دیگه div ها کنار هم واینمستین یکی میره زیر اون یکی :n03: دلیلش هم فکر کنم اینه که مثلا 1px به border هم که بدی مجموع عرضت میشه 100% + 1px که دیگه div ها میان زیر هم. امتحان هم کردم نشد که به جای پیکسلی اندازه دادن واسه border درصدی اندازه بدم، مثلا 49.5 درصد هر کدوم از div ها و 1درصد هم border حالا میگید راه حل چیه؟ :n16:

[mtchabok]

آقا ما اومدیم Adaptive (درصدی) طراحی کنیم، بیزار شدیم :n02: همون fixed بهتره :n02: نگاه کنید مشکلم اینه که مثلا من یک صفحه رو به دوقسمت چپ و راست تقسیم کردم، یعنیwidthبرای div سمت راست رو 50درصد گذاشتم و div سمت چپ رو هم 50درصد. یک float هم دادم که کنار هم وایستن تا اینجاش خوبه، ولی اومدم دور div ها border گذاشتم بعدش دیگه div ها کنار هم واینمستین یکی میره زیر اون یکی :n03: دلیلش هم فکر کنم اینه که مثلا 1px به border هم که بدی مجموع عرضت میشه 100% + 1px که دیگه div ها میان زیر هم. امتحان هم کردم نشد که به جای پیکسلی اندازه دادن واسه border درصدی اندازه بدم، مثلا 49.5 درصد هر کدوم از div ها و 1درصد هم border حالا میگید راه حل چیه؟ :n16:

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

برای مشاهده محتوا ، لطفا وارد شوید یا ثبت نام کنید

[kian98]

سلام

بهترین اندازه ای که میشه برای ساخت قالب سای توی فتوشاپ در نظر گرفت اندازه ۱۰۲۴×۷۶۸ هست. این اندازه رو خود w3c تعیین کرده.
البته برای عرض قالب بهتره از اندازه 960 px استفاده کنید چون معمولا توی مرورگر یه مقداری از صفحه رو فضای اسکرول و یا تولبار ها و خود منوی مرورگر اشغال کرده ولی با این عرض دیگه عرض صفحه شما به اسکرول احتیاج نخواهد داشت.

باتشکر

[kian98]

البته این رو هم یادم رفت بگم که بعضی از سایت ها از شیوه ای توی طراحی سایتشون استفاده می کنند که قالب به صورت اتوماتیک مطابق با اندازه صفحه مرورگر خودشو سازگار می کنه.اسم این نوع طراحی Flexible Layout هست.:n26:
برای اینگونه طراحی ها باید ابتدا گرافیک سایت رو به گونه ای انجام داد که قابلیت Flexible Layout داشته باشه.بعد از اینکه طراحی رو اینطوری درست انجام دادید:n20:باید برید سراغ CSS. مثلا از Width:100% به جای Width:990% استفاده کنید. بعدش هم باید از جاواسکریپت استفاده کنید.




باتشکر:n16:

[kenzu]

ریسپانسیو میگن

[kian98]

سلام

اسمش رو یادم اومد. نوشتمش