Final Thoughts

This class really opened my eyes to the possibilities of what I can accomplish with a computer. I have never taken any classes on using a computer or software. Since the very beginning of the class, when we learned basic techniques of Photoshop, I have been amazed at how simple software can make so many things possible. I have heard people talk about touching up photos with Photoshop but I never dreamed how simple it can be. I am sure this class has just scratched the surface of what Photoshop can do. This class exceeded my expectations and helped give me confidence to try new things with my computer. I am certain this class will help me in the future. Even if I would never design a website again, the design principles we learned will help me with other graphic design project which come my way. I am certain I will continue using Photoshop Elements long after this class is over.

Comparing My Sites.

My two final websites have almost identical content but fairly different looks. To view the site I made on Weebly follow the link http://monicasgarden.weebly.com/index.html The most glaring differences are in the colors and banner images. The Weebly site uses white and blue and the banner image on the Weebly site came with the template I followed. I could have edited the banner image to be identical to my Microsoft Expressions site but I liked the image and it kept with the gardening theme of my site. I much prefer the colors in my Expressions website. I like the light purples with yellowish background. The site has a more personal feel to me because the banner image is a photo I took and edited. The other differences in the site are more a product of formatting. The differences are due to limitations of the programs I used to create the site and my inexperience with the HTML editing software itself. In addition to the differences above a close look will show that some changes to text had to be made to the pages. This is primarily because the Expressions site has 2 navigation bars while the Weebly site only has navigation bar across the top. I used the same storyboards to create both sites and I stayed fairly true to my original plans. Aside from my banner images all the photos and locations on the pages are the same. The only exception is on the about the garden page designed on Weebly, I was able to add a few more images; they are smaller but can be clicked on to increase their size. The what’s growing pages are similar, but one can notice that the Expressions site is a 2 column design with text on one side and the image on the other. The Weebly site I wrapped the text around the image. I like the text wrapping better but haven’t figured out how to do the same thing in Expressions yet. Despite the differences between the sites a person viewing the sites would get the same message from whichever site they looked at.

My Website Plan

The title of my website will be Monica’s Garden. I will provide a showcase of my wife’s garden. The primary focus of the site will be to take an ingredient harvested from the garden and show how it is preserved or prepared. All summer my wife and I harvest what is grown in the garden and experiment with all sorts of recipes. We would like to share what we learn with friends, family and like minded gardeners. I plan to use photos taken of the garden for all the images on the site. The site will be created in Microsoft Expressions 4. I am planning to start with a 4 page site. The home page will serve as the index and link to the other 3 pages. The other 3 pages are as follows; The “About the Garden” Page, which will include pictures of the garden, a summary about the garden, and contact information for Lehigh County, who run the community garden program in this area. The “What’s Growing” page will feature information about a specific vegetable which is ready for harvest now. Finally, the “What’s Cooking” page will feature a recipe using the vegetable from the “What’s Growing” section. As the harvest from the garden changes I can add new recipes for different vegetables and archive the older pages. The first vegetable featured will be swiss chard and the recipe will be for crust less swiss chard quiche. The following links will be provided in the site http://en.wikipedia.org/wiki/Chard ,http://en.wikipedia.org/wiki/Quiche, http://lehighcounty.org/ContactUs/tabid/266/Default.aspx. All of the images I am using for the site are large jpeg images. They will require a great deal of cropping and resizing to make the web ready. Some minor adjustments of saturation and sharpness may be used to help bring out the color in the images. Magic extractor tool from Photoshop will be employed to edit the background from photos used in the cooking section of the site. I have settled on a template from Microsoft Expressions which utilizes a yellow background. Varying shades of purples are used in the template. Text will be black on a white background. I will use Photoshop to alter an image from the garden as a banner and add text in purple color to complement the purples in the pages
I will be altering the template by replacing the graphics on the pages with images from photos I have taken. I will be merging cells in the tables from the templates and adding new tables where appropriate. Aside from the basic color scheme, the finished project should appear considerably different than the template I am starting with.

Summarize and Reflect Week 5

Chapter 13 of The Non-Designers Web Design Book is filled with tips, tricks, and techniques for enhancing websites. The chapter dealt largely with using Photoshop but it did touch on Dreamweaver, HTML code, and flash animation. The readings showed how to create specialized effects which are now commonplace all over the web. Tables were discussed first. Examples of using tables for layout, nesting tables, and using a table with wrap around text were shown. Next, Photoshop tips were explained. Enhancing photos by adjusting saturation, shadows, and sharpness were covered. In addition to using Photoshop to edit images you can also use it to adjust your fonts for easier reading. This is accomplished by changing anti-aliasing methods, using duplicate layers, or even manually retouching the font. Other Photoshop methods described were image slicing for animation or layout, use of low source proxy, locking transparent pixels, rollovers, and image swaps. Rollover and image swaps are similar but differ in that in a rollover the image you are moving the pointer over changes and in an image swap you are moving the pointer over an image and it changes another image on the page. The HTML commands covered in the book provide the designer with more control over which fonts will be displayed in a browser and how to modify vertical and horizontal spacing of images. As far as forms are concerns the important thing to remember is no matter how nice the form looks it won’t work unless you write a CGI Script, which is the program that collects the data from the form and sends it where it needs to go. Finally the chapter ends with a brief overview of flash animation. Flash is great because it uses a vector format which loads quickly and starts playing before it even finishes loading. The images are sharper and cleaner. Vector images use mathematical formulas which makes the scalable so they resize correctly.

Storyboards

Storyboards were covered in the Diigo reading. The purpose of a storyboard is to make the creation of a website easier. A storyboard in its simplest form is a flow chart. Storyboarding provides a method to gather your thoughts on how your final site will be organized. It provides a blueprint you can follow once you start designing the site. It keeps your thoughts, content, and ideas organized. When you make a storyboard you gather content and divide it into chunks which you place into sections. The sections form the starting point for your web pages. By figuring out the layout of the site before you start you can prevent some problems from arising during the design process. Using storyboards will help with my final project by keeping me organized and on track. Having a good plan in the form of storyboards will ensure that my final site will be organized in a logical manner and all my navigation will be done correctly. It will save time by having me identify all the images, content, links, etc. I need ahead of time I can gather it all before I start actually designing the site on the computer. Without a plan or storyboard your site could quickly become disorganized as you build it with broken links and redundant information.