Final Project “joannaspaintings.com”

Here is my website. Please visit.  www.joannaspaintings.com

IN-CLASS: Site Build and Templates

I can see how templates will make creating pages a lot easier.  This practice exercise is making Dreamweaver more clear and it is starting to come togther. Here is my DigitalJENN file:

http://bcts-potomac.aacc.edu/CAT/cat06/week11/design-grid.htm

CSS Layouts

This is my predesigned CSS layout.  DW has 30 to choose from and they are an easy way to create a page.

http://bcts-potomac.aacc.edu/CAT/cat06/week11/css.html

Final Project – Comps

Here are links to comps of my website’s front page and inside page.  I am still trying to decide on the backround color so I posted two versions

This one has a GREEN backround:

http://bcts-potomac.aacc.edu/CAT/cat06/week10/mywebsite/frontpage2_londontown_dark.jpg

http://bcts-potomac.aacc.edu/CAT/cat06/week10/mywebsite/page2.jpg

This one has a BLACK backround:

http://bcts-potomac.aacc.edu/CAT/cat06/week10/mywebsite/frontpage_b.jpg

http://bcts-potomac.aacc.edu/CAT/cat06/week10/mywebsite/page2_b.jpg

FOGE Website – Rollovers

The rollovers took me a while because I did them in Photoshop. I found some tutorials on the internet which helped. I wanted to learn rollovers in Photoshop since that is the software I own. (Why are we using Fireworks? Is it better than Photoshop?)   

The kid’s links on the left were to be cartoon images which animate on rollover.  Photos are placed there for lack of cartoons.  Ideally there should be more rollovers and perhaps in different spots.

Most of my problems have to do with file types, naming files, saving files, finding files and locating them on the host server.    I cannot seem to sort it all out and find it very confusing. I’d rather be designing but unless I can learn to implement my designs in Dreamweaver what good are they?   

  http://bcts-potomac.aacc.edu/CAT/cat06/week7/fogewebsite/fogesite/index.html

Week 5 – navbar

This is late in getting to my blog.  I didn’t realize that when I put the file on the remote server I had omitted the letter “l” at the end of “html.”  I didn’t see that and when I typed the url I typed it .html and it wouldn’t work.  Devil’s in the details.  I’m surprised the url works without the “l” at the end of html but it does.

http://bcts-potomac.aacc.edu/CAT/CAT06/week5/navbar.htm

OLA Faculty Template *Final Version*

Here is the final version of my OLA Faculty Template

Chapter 7

This was easy assignment. Thanks to Adam’s help with FTP my blood pressure has lowered.

 

http://bcts-potomac.aacc.edu/CAT/CAT06/chap_07/index.html

FOGE Website

Final version of FOGE website. 

The six space related photos on the left are links which animate on rollover.  An option for their text headings would be to make them visible upon rollover.

http://bcts-potomac.aacc.edu/CAT/CAT06/week7/fogewebsite/foge.html

Chapters 5 & 8

There’s a lot of information and tedious steps in Chapter 8.  I can see why CSS Style sheets will be handy and time consuming making changes in the looks of a file.  I could do it in the Property Inspector but had some trouble doing it in the CSS box.

Creating table widths threw me.  First I wasn’t able to view the number in the column header, then I couldn’t change the percentage width.

I have wasted a great deal of time because I am having difficulty managing my sites and placing the files in the correct place so DW can find them.  Now I’m pretty frustrated because try as I may, I cannot FTP the excercises to the remote site. I give.

THANK YOU,  Erica, for helping me with FTP. I may have simply typed the wrong address for the remote domain.  It’s a mystery.

Chapter 5

http://bcts-potomac.aacc.edu/CAT/CAT06/chap_05/kettlesandteapots.html
http://bcts-potomac.aacc.edu/CAT/CAT06/chap_05/locations.html
http://bcts-potomac.aacc.edu/CAT/CAT06/chap_05/teacloudteas.html

Chapter 8

http://bcts-potomac.aacc.edu/CAT/CAT06/chap_08/rounded.html
http://bcts-potomac.aacc.edu/CAT/CAT06/chap_08/tablewidths.html
http://bcts-potomac.aacc.edu/CAT/CAT06/chap_08/teacloudteas.html

 

Week 4

At this stage my challenge with DW is getting clear on the structure of file organization.  I don’t find the actual process of creating a file as challenenging as understanding where and how DW finds the file because the concept is so abstract. It would help to see a visual diagram. 

Most of my problems originate from site management and getting tripped up for not reading every single word of the instructions carefully.  Finally called Adobe Customer Service because of inability to find root folder.  800-642-3623 and found them helpful.  The agent didn’t think I should be naming my sites CAT274 with each project though. She said there would be a dialogue box saying I could not do that, but there was not. 

http://bcts-potomac.aacc.edu/CAT/CAT06/Mapexample.html

This is the rollover assignment.  This was the hiccup: The crop tool in Photoshop went nuts and it wouldn’t do anything I asked.   Finally figured out that the width and height measurements were not at 0. .

http://bcts-potomac.aacc.edu/CAT/CAT06/Welcome.html

Principles of Beautiful Web Design Chapter 1

The author’s reference to applying design principles to a bathroom hit home with me having recently completed my bathroom.  Like any good design it takes an incredible amount of research, careful planning and tinkering.  There are hundreds of choices for a designer to make and many starts and stops that confuse your direction.  In the end it all comes together if you keep at it. 

The principle of the divine proportion is a familiar concept that I learned in painting.  It has been used by many of the great painters.  Although some people believe it is used conciously I have always believed it is used unconciously by artists with an eye for good design. 

The concepts of design the author mentions, unity, proximity, repetition, emphasis, placement, continuance, isolation, contrast, proportion are familiar and it’s good to see them used to web design because it can be an aide in describing ideas to people.  I was particulary interested in “Asymmetrical balance” because I’ve seen it used so well by painters but never knew what to call it.   Recently the Annapolis “Paint Off” awarded second and third prize to artists that used assymetrical design in their landscapes.  One was the edge of a building on the corner of a street.  The other was the front portion of a boat in the water.

The bread and butter layout of left column or three columns is interesting to note and certainly a familiar layout.  Best to keep it SIMPLE.

Fall Banner

I created a morgue file from library books, internet, magazines.  The horizontal space directed options. 

Banner 1 gives a sense of depth and space on the horizon and in deep space.

Banner 2 is a symmetrical design.

 

Final Banner

  

 

Animation – Week 6

 
My home version of Photoshop CS3 doesn’t have the animation option so I completed it at school, but it is good to know that it can be done in Image Ready.   One problem I had: in the optimize window I found “Diffusion” but couldn’t find anything that allowed me to make find anyway to make it 25%.  Don’t know what it means actually.

The assignment was straightforward and a matter of reading the instructions carefully.   My biggest problem was in creating the correct path on the url.  I was providing more files than needed in the url by including the week 6 folder (week6/anim.gif) instead of just the finished file.  If I could just get the fundamental technical stuff down, i.e. hierarchies of files and folders, it would save a lot of time that could and should be spent on more important things like design.

http://bcts-potomac.aacc.edu/cat/cat06/anim.gif

“Choosing a Domain Name”

My final project will be a website to show my paintings so my unique choice for a domain name will be my name.  This is common among artists. A drawback is that it is not search engine friendly and may not get a lot of traffic because its content is not as accessible as a url with identifyable text.  My name, Joanna Hopkinson, is a little long but it’s mine so www.joannahopkinson.com it will be – as soon as I register it, that is.  I did a search and it’s available.

Well, after reading Danny Sullivan's article about making your website search engine friendly maybe I should consider the url www.joannapaintings.com .

“Blasting the Myth of the Fold” by Milisa Tarquini

A practical article about how much information on the front page for maximum readership.  The author states proven evidence that people are willing to scroll below the screen view or what is commonly called the scroll line.  The popularity of laptops must create a challenge for web designers because the screen size is usually smaller than a pc.  I wil be interested to learn how to design for optimal screen sizes in Dreamweaver.  This sentence is worth remembering:

“For advertising to be considered valuable and saleable, a certain percentage of it must appear above the 1024×768 fold.”

I am not partial to scrolling unless, as the author says, the information is compelling.   I look for links because the user is getting a piece of work that really should be expanded. I think it would be more intuitive. .  I would prefer to have breathing space on a new page to one so filled with information you are overwhelmed.

“Search Engine Placement Tips” by Danny Sullivan

Today the search engine attracts people to your website like what used to be a “barker.”   This article addresses the importance of making your website a good target for search engines and avoid stumbling blocks. 

To make your website relevant and search engine friendly Mr. Sullivan recommends putting keywords high on the page. Tables, Java Script and graphics are not recommended at the top because they block the search.  However, visible HTML text is recommended in the heading.   Other tactics are including key words to HTML links on the home page to other pages on the sight, linking to pertinent documents helps serach engines link analysis. Search engines are attracted to your links. He recommends submitting only the top two pages and no more.  Keep your site current and resubmit changes.

OGE Website

www.foge.org

I presume that the FOGE site was created by a stranger and there is nothing at stake in criticizing it (I hope) so I will say that, while it has a strong impact, from a design viewpoint I think it looks amateur. 

The logo that appears on the opening page is the best part of the site, especially against the black backround, so I’m glad it is viewed dramatically at first.  I understand the point that black represents space but when there is a lot of small white text on a black backround  it is difficult to read.   I think all the fonts should be enlarged for readability and imade more interesting - perhaps using transparancy or a different color on subheadings to add contrast.

Some of the photos on the home page are taken at a distance and almost unreadable.  It would encourage interest to have the option to click to enlarge.  The same applies to the Kid’s space.  Kids would spend more time on the page if they could see a large photo instead of a thumbnail. 

I like the idea of the planet backround for the pictures on the home page but it is almost invisible.  Maybe the pictures could feather into into it instead of having a white frame outline or just eliminate the backround.  To simplify the page the box including the pictures should be the same height, and probably color, as the table of contents to the left of it. Generally I think the boxes are too small and do not take advantage of the full screen.  It feels cramped.  There should be more pictures of happy people involved in activities on all the linked pages but the boxes are so confining there is room for only text.

The url on the top right of the screen is not necessary and its font is difficult to read.

Here is my redo:

1.  The links at the top address the audiences equally.  Other links remain on the left.

2.  The video is featured in the star icon which is its own link.

3.  The paragraph of text is included on the homepage.

4. The logo is enlarged and placed at the top left.

5.  One photo was selected out of the montage.

Final Project – My Website

My final project will be a website to display my paintings.  It’s purpose will be to give the viewer samples of my best work. In addition to a personal showcase it will make my paintings available for the potential for sale.  It’s design will be simple with a strong visual focus, even using pictoral symbols for links. It will also have a bit of resume-type and contact information.

“The Best Faces on the Screen” D. Will-Harris

Great article.  Choosing type can be daunting because there are so many fonts and you must pay for them.  Knowing the right font to use takes experience.  Most of the ones the author recommends I don’t own. 

I know we’re not supposed to do this but I am summarizing the article for my future use. suggestions. 

The author recommends non serif types for screen and warns against serifs for the web with the exception of  Memphis/Rockwell, Bitstream Geoslab703 – thanks for the free download – and Georgia.

Also recommended for strong hinting ( pixle control) possibilties are Bitstream, Monotype and True Type technologies; large x-heights ( 1 pixel larger than half the body size).

Tracking is recommended on screen to give spacem Lucinda is not recommended, Georgia and Verdana are good.

If using a small type he recommends anti-aliasing (grey scaling).

THANK YOU for the type recommendations for the screen!!!
Memphis/Rockwell or Bitstream Geoslab703
Verdana & Georgia
Lucida fax’s serif
Serifa 
PNM Caecilia
Melior
Times New Roman and Arial
Avenir
Blueprint
Gill Sans
ITC Officina Sans, ITC Legacy Sans
Lucida Sans
Myriad Multiple Master
Lucida Handwriting

Design Reconstrution

I learned some techniques from this assignments, like copy and paste the pictures to the file, which make things easier.  I found it pretty easy but for a problem making the arrow.

FOGE Website Redo

The central photos are to rotate. 

The colored oval buttons adjacent to kid’s links on the left side will be replaced with space related cartoon icons (i.e rocket, launch pad, helmet) which will animate on rollover.

 

“A Dao of Web Design” by John Allsopp

The gist of this article was to be flexible when designing websites for different users and browsers.  Most of the lingo was too advanced and went over my head and I could have done without the esoteric quotations.  Maybe someday this article will be more meaningful.

CSS Style Sheets – Chapter 6 ***Disaster***

Style Sheets are at the heart of Dreamweaver and very important, but for the beginner they are complicated, tedious and frustrating to learn.   Excuse me if I sound discouraged but even if I follow every step carefully the end result often fails for one reason or another and because every excercise is contingent on the previous you can’t continue until you repeat confirm every step.  It takes a lot of time and patience… but with all the other homework assignments this week there isn’t enough left of either.  For me it is becoming a struggle to keep up in this class.  :-(

OLA Faculty Template

My first attempt at creating a website took a long time.  There are many choices to make and many options.  I didn’t create a storyboard because if I had it would have changed a gadzillion times. I think the first site design makes a stronger impression than the second because the colors are bright.  

But I decided to post a second design because I like the simplicity.
This is the best I can do and I have to be done with it because there was a mountain of homework this week.

CSS Style Panel – Chapter 6

With the benefit of an additional week to learn Chapter 6 I now have a pretty good understanding of how to apply styles to my page.  The CSS Style panel is a powerful resource to apply styles without the use of additional images to increase file size.  TI found the HOT video demonstrations helpful because they explain more thouroughly the reasoning behind the process and demonstrate them without the painstakingly slow process of having to read and decifer every exercise in the book.  

http://bcts-potomac.aacc.edu/CAT/CAT06/chap_06/abouttea.html

Final Project

www.joannaspaintings.com