Session 1: After a brief presentation of the Project Portal assignments we will discuss the requirements for the Technical Exercise #1 Image Optimization. If time permits I will also demonstrate the techniques required to complete the exercise.
Technical Exercise 1: Image Optimization
Due: Session 1, Week 4 (3 points)
Download the Exercise Assets
Description:
Use Photoshop to optimize the provided raw images as JPEGs and display them within a single web document. Next, in the same document display some type converted to graphics using the transparent GIF format and the transparent PNG-24 format. Use a background color other than white and a typeface with plenty of curves to illustrate the advantage of alpha over index transparencies. Finally, experiment with an image of your own to create a 2 by 2 grid of 4 images that are manipulated by experimenting with the GIF color table in the “Save for Web” dialog box.
Requirements:
1. Create a single web page that documents the tasks listed below
2. Optimize the provided raw images into an appropriate web format
3. Display any type converted to graphics using both GIF and PNG-24 formats
4. Produce a grid of your own images manipulated via the GIF color table
5. Add the files and folders to your environment and upload to your student webspace
6. Upload your exercise and test your portal before class starts on session 1 week 4.
Points Breakdown:
1 point awarded for effectively optimizing the raw images into an appropriate web format
1 point awarded for using type converted to graphics to illustrate the advantage of alpha transparency
1 point awarded for creating a grid of experimental images by manipulating the GIF color table
Session 2: Today we will begin discussing the “World” CSS Positioning Project. This project is designed to allow students to focus on color, design, layout, type treatments, syntax, markup, and styles while learning about a country other than the one we live in.
Assignment 3: “World” CSS Position Project
Due: Session 2, Week 7 (25 points)
Description:
Design a web application featuring six content areas that are topics about the country you have selected. Create a consistent and appropriate design scheme that incorporates images, navigation and type treatments using HTML and CSS. Pay special attention to type, colors, layout, styles and positioning. In addition to developing your skills as a front-end web designer, this project will encourage students to discover new information another country.
Requirements:
1. Organize your content into six content areas or pages
2. Create a consistent design scheme and apply it to your template
3. Include universal navigation on each page to get to every content area
4. Incorporate optimized images appropriate for the content into each page
5. Format type, images, and the positioning of the content with CSS
6. Upload to the student webspace and test the link in your project portal
7. Due before class on session 2 of week 7 for presentations
Points Breakdown:
6 points will be awarded for designing an effective layout for the content and interface items
5 points will be awarded for a consistent and distinct universal navigation system
4 points will be awarded for placement, optimization, preparation, and choice of images
5 points will be awarded for carefully selected typefaces and type treatment
5 points will be awarded for the clarity of your presentation
World Project Resources:
Wikipedia.org
The CIA World Factbook
Getty Images Login Information
Reading:
Speaking in Styles – Chapters 7 and 8 (pages 176 – 223)
Student Safe websites.
http://www.britannica.com/
http://pics.tech4learning.com/
This is a good place to find images that are license free. They also give you the information to cite them properly.
Take 2.
Student Safe Websites.
http://www.britannica.com/
http://pics.tech4learning.com/
These are two websites I found that offer license free images for students. They give you the information that you need to cite the images properly as well.
The first website is provide by google and talks about image optimization
https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/image-optimization
The second website is an app that makes images take up less disk space and load faster
https://imageoptim.com/
The third websites provides tips
http://www.shopify.com/blog/7412852-10-must-know-image-optimization-tips
Given that this week is starting to look at the world CSS position project, we’ll all need to start considering more ways of doing a page layout, font styles, colors, etc. Included are a few websites with tips and ideas on how to get started thinking about all this.
http://designshack.net/articles/layouts/10-rock-solid-website-layout-examples
http://www.creativebloq.com/typography/how-choose-fonts-your-website-6135586
http://designinstruct.com/tools-basics/5-easy-steps-optimize-your-images-photoshop/
One of the most important things in web design is appearance. If your website doesn’t appeal to the masses, both in UI or aesthetics, you won’t keep an audience at your site. To combat this issue, take a look at this link- Top web design trends to look for in 2015.
http://thenextweb.com/dd/2015/01/02/10-web-design-trends-can-expect-see-2015/1/
The second one is about image optimization. The site gives cool graphics on the economics of optimization and has a video as well (in case you’re not much of a wordsmith)
http://www.wpbeginner.com/beginners-guide/speed-wordpress-save-images-optimized-web/
The third is for the world project. This site has resources on infographics on the countries of the world. This could add a bit of creative flare to an otherwise straightforward assignment.
http://www.smashingmagazine.com/2008/01/14/monday-inspiration-data-visualization-and-infographics/
I am barely familiar with css at all, so it is helpful for me to use a beginner website to lookup stuff.
http://www.htmldog.com/guides/css/beginner/
here’s a site with a good browsing tool
http://www.artspan.com/
and here’s a blog of different artists websites
http://www.creativebloq.com/web-design/artist-websites-10135048
When making a website one of the most important things is a user friendly interface where it is unique and far from the normal page layout, The following link provide a great list of examples of popular trends for interface that have recently been emerging and are extremely creative.
http://99designs.com/designer-blog/2015/01/16/top-web-design-trends-2015/
When making a website optimizing images does not only make things easier on the end user it also make things easier on the developer, also it can make finding your website much easier. The following link provides a list for 10 must know image optimization tips ranging from adding proper tags to an image, to how big different formats are for images, And using site maps to help keep things clear.
http://www.shopify.com/blog/7412852-10-must-know-image-optimization-tips
The last link here is based on gaining information on different countries around the world. Fact monster is an easy to use website with a basic layout that you can select a country and pages of information will pop up ranging form a ton of different categories
http://www.factmonster.com/ipka/A0107666.html
This link has a detailed explanation of image optimization and how to go about connecting the image to the web correctly. There are a various of hints and examples included to problem solve.
https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/image-optimization
Here is a site where you can learn about the current updated of CSS features. This site is a little higher experienced, so a few things are lost, but most of the information is interesting. The different background features along with the texts look very interesting and something that can be easily understood. http://www.webdesignerdepot.com/2015/01/css-you-can-get-excited-about-in-2015/
The last link is based on learning about countries around the world. The site is easy to use and contains a vast amount of information including, population, location, culture, and fun facts about the area.
http://www.everyculture.com/
This site is a great resource that goes much further in depth when deciding what type of image files to use. Helps you understand the importance of screen resolutions when making these decisions as well as vector vs. raster, and deciding if an image if even necessary to achieve your goal.
https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/image-optimization#vector-vs-raster-images
Not all photos are web-ready or look exactly how you want them to be seen by your audience. There are simple tips and tricks you can use to enhance lighting or specific colors within an image to really make it stand out or look authentic. This 5min video is quick and easy to follow while providing some simple tools to enhance your images.
https://www.youtube.com/watch?v=Vr4DNYcZhvA
Ease of use and navigation are key components to any website. If your website is too challenging to navigate, you’ll have fewer return viewers and shorter visit times. Regardless of what kind of site you’re running, this is not the goal! This site shows an easy way to customize a few different types of lists, vertical and horizontal navigation bars, and how to optimize them for mobile using a feature called Bootstrap!
http://code.makery.ch/library/html-css/part7/
A free online image optimizer that compresses images to quicken website load times.
https://kraken.io/
Since the exercise for this week has us editing images, I figured that some Photoshop editing tutorials would be a useful link. There are 45 tutorials on the page that go from creating a water ripple effect to making only a few objects in the photo sepia toned.
http://www.vandelaydesign.com/photo-editing-tutorials/
A bunch of fun facts about different parts of the world. Some of which can be used for the World Project we were just assigned. Oldest and youngest countries, population density, largest cities/metro areas, etc.
http://www.worldatlas.com/geoquiz/thelist.htm