Basic Design Principles

Transcription

1 + Basic Desig Priciples

2 + Assigmet 2: Your studet web site 1. Baer 2. Your ame 3. Your accout umber 4. A lik to aother web page, preferably oe useful to you i this class 5. A photo, preferably of you 6. Upload this page to php.missiocollege.edu Usig your FTP software, which should already be istalled o your computer Usig your accout umber

3 + Dreamweaver? Pros Helps you with CSS styles. Easy to sychroize your home setup with the Missio College server. Has a good text editor built i. Cos Ca be a crutch that prevets you learig proper HTML codig. People who use DW extesively ted to ot do very well i the class. Tedecy to use the desig tools istead of the HTML editor. Summary Useful for sychroizig your web site. But do t use it for actually creatig your web site.

4 + Frameworks? Frameworks such as Bootstrap, Foudatio, Skeleto, ad jquery Mobile may make your life easier i geeral, but they will make your way difficult i this class. These frameworks do t always iteract well with PHP. I my experiece, studets who try to use frameworks ted to get stuck aroud the third week ad they ever recover. They get bogged dow tryig to make their framework work with PHP, ad they ever get aroud to just makig the PHP work i a more vailla settig.

5 + Three compoets of this class Web developmet (about oe week) Proper stadard HTML (HTML5) A little CSS PHP (about 12 weeks) Form processig Usig Templates MySQL (about 2 3 weeks) Storig data ad Retrievig data Commad lie for settig up your database Usig PHP to view ad update your database

6 + The Goals of Desig To commuicate iformatio effectively ad efficietly. Textbook Ifographics To persuade a audiece to buy a product, use a service, believe a propositio, or feel a particular way. Advertisig Politics Games To solve a problem. Music streamig Cloud services

7 + Accomplishig these goals Typography to make ruig text legible ad header text scaable. Color to brig features forward or back. Warm vs. cool colors Light vs. dark colors Saturated vs. gray colors Color to effect physiological resposes i the reader. Warm colors ted to raise the heart ad respiratio rates. Cool colors ted to lower the heart ad respiratio rates. Lie to lead the eye aroud the page. Images to make the iformatio more uderstadable.

8 + Images Use images of the appropriate size (i both pixels ad bytes). Use a image format that is suitable for the cotet you re displayig. Use images that load quickly. Whe resizig images, preserve the aspect ratio.

9 + Image Size Use images that have appropriate resolutio for the page ad placemet you re givig them. If your photo is too small, it will appear fuzzy. If the photo is supposed to fit i a space 400x600, do t use a photo that is oly 200x300. If your photo is too large, it will take a log time to load. If the photo is supposed to fit i a space 400x600, do t use a photo that is 3200x4800. (Some cameras will take a photo this large.) However, if the photo is supposed to fit i a space 400x600, you may wat to use a photo that is 1200x1800, because it will look icer o a retia or other high-desity scree, which are ow widely available i 1.5x, 2x, 2.5x, ad 3x resolutios.

10 + Image formats ad file types Differet image formats offer differet tradeoffs betwee file size ad appearace. JPEG is compressed, so you get a smaller file size, but ca be fuzzy if you use the lower quality settigs. PNG is ot compressed, but it is better for flat images like logos. It may look fuzzy for real photographs. PNG-24 has better quality tha JPEG but also slightly larger files. GIF is a good format for flat images, just like PNG, but GIF is copyrighted ad may web hosts do ot eve allow you to use it for fear of icurrig copyright charges. GIF support trasparecy ad aimatio. BMP is ot a cross-platform format ad you should ot use it. SVG is a powerful vector format, makes highly scalable images, ad ca either be writte i code or geerated from Adobe Illustrator. It is best for logos ad icos.

11 + Image formats ad cotet Use these image formats for these kids of specific cotet: JPEG for photographs, images that use fie gradiets, images that use more tha 256 colors. PNG for logos, icos, buttos that do t use fie gradiets, ad ay other artwork that has flat colors or fewer tha 256 colors. GIF for logos or icos that must iclude trasparecy or aimatio. SVG for artwork that must be widely scalable i size.

12 + Image loadig time You ca shrik your images ad chage formats usig Photoshop, GIMP, ad may other image processig programs. If your web page takes a log time to load, I will ask you to shrik the image files, substitute a differet image, or chage your whole web page. Your page should obviously start beig loadig withi oe secod, or users will avigate elsewhere. The curret rule seems to be: oe image 150K max, all images o the whole web page 500K max.

13 + Preservig aspect ratio Do t stretch your images. Whe you resize, maitai the same aspect ratio. Do t put a image that is 400x600 ito a space that is oly 300x600. The result ca look fat or skiy. Like viewig ormal TV i wide scree mode, or a wide scree movie i ormal TV mode.

14 + Preservig aspect ratio