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.

Week 4 Questions

Computers and software have enabled individuals to become one-person operations with an internet connection and a laptop. The same is true with website design. Anyone with a computer can create a website. Is this always a good thing? Explain your thoughts
I think it is great that anybody with a computer can create a website but I don’t necessarily believe that just because you can do something you should do it. Before committing to a website you should be sure you are willing to commit to maintain and updating it as appropriate. One should be especially careful if it is a business site. A poorly constructed business website is not better than no site at all. To make it really simple you should only put a site on the World Wide Web if you are prepared to take the time and effort to see that it is done right from the very beginning.
What are some of the advantages to creating your own website rather than hiring a professional? What are some of the drawbacks?
Creating your own website can save you money and give you more control over the content on the site. By creating the site yourself you can be sure your vision makes it to the page. Editing and maintaining the site in long run can be easier if you had a hand in building it in the first place. The biggest drawback, in my opinion, is time. Creating your own site correctly is time consuming. Another big problem occurs if you are not familiar with good design fundamentals you would not only make the design process more difficult but it could mean you design a site which actually causes you to lose business rather than gain it.
What is the difference between Usability and Accessibility with regards to web design and why are both important?
Usability refers to how easy a site is to use. A site is usable when navigation is simple, content is easily found, and your message and purpose are easily recognized. Accessibility is a measure of how easily users can access or get to and around your site. This may refer to the ability of people with special physical needs to get to and navigate your page but it can also refer to the ability of people with varying computers, operating systems, browsers, and monitors to view and navigate your site. Usability and accessibility go hand in hand. You should strive for a site that the maximum amount of people can get to but when they get there everybody needs to be able to find the content you are providing.

Summarize and Reflect Week 4

This week’s readings from the book started with a review in Chapter 3 of what web pages are, what HTML editors do, and basic commands found in HTML editors. It covered adding colors, changing fonts, and the use of tables, all of which we did in the class. The sections on layers and frames helped to explain how they are used in a more in depth manner than what was covered in class. In class we learned how to create links to other pages and the reading showed how to create email links. Chapter 4 of the book went into the behind the scenes factors in web design. Rather than designing specifics it dealt with organizing the files correctly, how to name files, saving files etc. The value of planning ahead was covered along with the importance of considering who is going to view your site when you formulate your plan. Servers, hosting, and domain names were covered in the readings and were expanded on in the diigo readings. The first diigo reading started as a review of HTML and a lot of the items we already covered in class. The new information was at the end of first reading. The article explained meta tags, how to get your site online and how to get people to look at your site. The second reading was how to write for a website and included case studies of sites which the author redesigned. This reading was good common sense information I will turn to when I start designing my own site. I bookmarked it. The last reading compared hiring someone to build your site, doing it “brick by brick” or using a website building service. The article read more as an advertisement for the website Site Build Us.