Week #16 – Last Class

  • Complete mobile site project.
  • upload missing assignments.
  • Finding inspiration in design for yourself and your clients.
  • Final exam.
  • Review.

Take quiz, get final grade:

Log in, click on “quizzes.” Following directions is part of your grade. Please follow directions.

http://engrade.com

2 Comments

Filed under Classes

Week #15 – Building Mobile Websites

The Basics:

  • Websites which make use of tables for the main layout will not look right on mobile phones.
  • Your site must use CSS for the layout to ensure maximum compatibility.
  • It is easiest if your site is coded using either XML or XHTML, with your character encoding set at UTF-8.
  • You have to consider that different mobile phones have different screen sizes. This can be a major headache if you want your mobile Web site design to run on all of them.
  • Remember to put all the most important information that you want mobile users to see on the top of the page. It can be time consuming to browse through a mobile site, not to mention tedious to read through. Make your mobile site design convenient for your consumers.
  • It is difficult to enter text in mobile Web sites. You may want to offer your user the convenience of radio buttons and lists, which they can choose from depending on what they need.
  • If you wish to put images on your mobile Website, it should be in jpeg or gif format.
  • A good mobile Web site design provides back buttons and links. Many phones are not equipped with back buttons, so try to provide one.
  • Keep in mind that the maximum page size for a mobile page is only 20 kilobytes. Make everything fit into that number.
  • Lastly, you should bear in mind that users are actually paying fees to access your mobile Website. Make sure that they are getting their money’s worth!

See For Yourself:

Assignment:

  1. Screen size 960H x 640W
  2. Use either Photoshop or Illustrator.
  3. Build three (3) pages, a start page, contact page and a gallery page. Each should contain branding/logo and navigation.
  4. Place it into this template.
  5. Upload a screenshot of work in progress to Flickr. Add to group.
  6. Upload a screenshot of mobile website in template to Flickr. Add to group.

Time to catch up:

If you have MISSING assignments, please complete them. MISSING = 0 = “F”. Too many “F”s will likely result (in combination with lates/absences) in a FINAL GRADE OF “F”. Do NOT GET AN “F”. Complete MISSING assignments. Check Engrade for grades and assignment details.

Comments Off on Week #15 – Building Mobile Websites

Filed under Classes

Week #14 – Content-Rich Newsletters

  • Screen Shot 2015-05-01 at 9.22.18 AMUse Dreamweaver and basic HTML to create custom stationery for Apple Mail (Leopard OSX).
  • Create HTML pages with editable regions for content-rich newsletters.

Resource Files:

Basic Gallery

Basic 3 Column

In-Class Assignment:

Using methods described in class, and template resources at mailchimp.com, build a content-rich newsletter.

Build a header image with your name/company. Use either Adobe Illustrator or PhotoShop (or both). The width and height will depend on the template you select. You will also need 3 smaller images of your art. They should each be no more than 500 pixels wide. In addition, for the “basic gallery” newsletter, you will need thumbnail images that are 150 x 150 pixels.

These images will be used in the templates listed above.

  1. Start by opening a free account at mailchimp.com.
  2. Follow guides in mailchimp.com to get started.
  3. Change colors, add backgrounds. Customize template, until it suits your needs aesthetically and the colors match your branding.
  4. Preview newsletter. Do a test send to yourself.
  5. Gather emails of people you’d like to send to and create a mailing list.

Classwork:

Create an avocado graphic.

Helpful Links

Content Rich

Apple Pro Tips

Homework:

Take a screenshot of your content-rich email newsletter and upload it to Engrade. If you have a Flickr account, be sure to also add it to the duCret Flickr pool!

Comments Off on Week #14 – Content-Rich Newsletters

Filed under Classes

Week #13 – Tables and Web Services Pricing

Screen Shot 2016-04-22 at 9.49.57 AM

First things first:

  • Tables, tabular data and .csv files.
  • Converting .xls files to .csv.
  • How to get tables into WordPress

Here are the files you’ll need to do this project:

Annual High School Show.csv

JBI.csv

Then:

  • invoice1How to set prices for design services.
  • Preparing Estimates.
  • Offering package deals.
  • Invoicing tools, bookkeeping software and preparing invoices.

Homework:

How’s your social networking going? Is your Flickr account growing? Well get it going!

Cool tools:

Invoice Templates
Freshbooks – online invoicing
Quickbooks – free business management software for download

Comments Off on Week #13 – Tables and Web Services Pricing

Filed under Classes

Week #12 – Using SPRY Widgets for Navigation, Menus and More

Dreamweavers SPRY toolbar allows you to easily build JavaScript menus and panels to add functionality and enhance your pages.

SPRY menu example

SPRY Accordion Panel example

We will work with:

  • Navigation Menus
  • Tabbed Panels
  • Accordion Panels
  • Collapsible Panels
  • Tool Tips

Screen shot 2014-04-18 at 9.28.35 AM

 

Comments Off on Week #12 – Using SPRY Widgets for Navigation, Menus and More

Filed under Classes

Week #11 – Continued Spring Site Design Project

Working with templates, images, design elements and CSS.

Find the basket and grass files you need to build the graphics here. Find sky image to compose background layer here.

Your finished image must contain:

  • symbol mapped 3D eggs
  • a flat vector shape bunny (make it!)
  • some of the eggs masked into the basket
  • grass
  • sky
  • clouds

Screen shot 2014-04-11 at 8.47.40 AM

 

 

 

Comments Off on Week #11 – Continued Spring Site Design Project

Filed under Uncategorized

Week #10 – Continued Site Design Utilizing CSS

Screen shot 2014-04-04 at 11.29.40 AMTweaking CSS in a CMS:

Go here.

Questions answered:

How to I put multiple links in a page and how exactly does that work?

How can I promote my events by putting links into boards and comments that support HTML?

What’s up with those sidebars?

CSS Quick Reference:

This page contains excellent explantions.

Seasonal Graphics Demo

basket_sans

Comments Off on Week #10 – Continued Site Design Utilizing CSS

Filed under Classes

Week #9 – Crafting Page Layouts with CSS

What we’ll cover today:

Hey, remember all that CSS stuff we talked about last week? We will use it for practical purposes this week.

  • Defining CSS rules for layout areas.
  • Applying CSS rules to inserted <div> tags.
  • Adding text and image placeholders to the page.
  • Exporting the CSS rules to an external style sheet.
  • Using rulers and guides to fine-tune a layout.

We will then use this CSS layout to continue working on our clients website.

Also, Spry nightmare. When to tweak the code.

Comments Off on Week #9 – Crafting Page Layouts with CSS

Filed under Classes

Week #8 – Shamrock Page Build

Build a table structured page utilizing 3D digital assets that you create in Illustrator and Photoshop (tutorials in class). Create a table in an HTML Dreamweaver document. Merge center cells of table. Combine background image, large central image and smaller images with your own supplied text.

  • Make sure your images are sized appropriately.
  • Make sure your background image does not compete with your other images.

Screen Shot 2016-03-11 at 11.58.03 AM.png

Illustrator Document:

  • Profile – Web
  • Size – 900 x 900 pixels
  • Draw shamrock leaves/stem using vector heart tutorial and pathfinder > unite to combine.

Photoshop textured background:

  • Profile – Web
  • Size – 200 x 200 pixels
  • Use shape tool and layer styles texture to create a tile for background repeat.


3D Shamrock tutorial

3D Objects in Adobe Illustrator tutorial

Vector heart tutorial

Comments Off on Week #8 – Shamrock Page Build

Filed under Classes

Week #7 – Creating Web Graphics

Create an image for the upcoming Pi Day using Adobe Illustrator and Photoshop.

pi-day-pie

Leave a comment

Filed under Uncategorized