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.

Website Evaluations

The first website I evaluated was www.mayfairfestival.org. I chose it because I went to the site to find information and at first I was frustrated. I bought tickets to an event they were holding and was trying to find information. I went to the site and the homepage loaded. Links were clearly visible on the right side. The most prominent part was the large Mayfair logo at the top of the page. Underneath was a dotted line which seemed unnecessary and under the line was a lot of empty space. I didn’t scroll down initially because the empty space made me think nothing else was on the first page. I clicked on a link from the side and the next page loaded. It looked identical first. I clicked on the other links and it seemed the same page kept coming up. I did this a few times before scrolling down and seeing that the new information on each page was at the bottom of the page. When the pages load you should clearly see the new information without having to scroll down. This page was clearly not checked on various browsers or with different resolutions. The large blank space under the logo could easily be removed and prevent the problem. The other elements of the page seemed ok. My only other criticism is the blue title texts don’t stand out against the blue background. Using the criteria in the not so good checklist form the book it seems the general design was lacking.
The other website I chose belongs to the union I belong to. It is www.local302iaff.org. Despite being designed by amateurs it seems pretty good. I used the checklists in the book as the criteria for my critique. The site is easy to navigate around. Links are clearly visible and don’t leave much guess work. Text is easy to read and despite a lot of information it doesn’t appear cluttered. The site also clearly shows when it was last updated. At first I thought that having a large news items displayed above the general information about the site may be a mistake. Then I considered the purpose of the site which is primarily to educate the union’s own members. In this case most visitors are checking the site to get informed on current happenings so the prominent news is acceptable.
Looking at both sites showed the importance of a good first page. The site I intend to design will feature my wife’s garden and what we do with the harvest. I will need to provide a clear path to the information I will include. I will not make the mistake of the Mayfair site and have too much space. Learning form the union site I will need to have a clear explanation of the site expressed on the first page. It should be expressed without having to scroll down much. My target audience will be new viewers who may not know what the site is all about at first.

Summarize and Reflect on Week 3

This week’s readings were focused on what makes a website well designed. Chapter 7 concentrated on designing the interface and navigation. Interface basically refers to how a page looks and how one interacts with it. Navigation design is a specific part of the interface design and is focused on how people find their way around your site. Finding the way around the site is extremely important. The whole reason you have a site is to supply information and content. If the reader can’t find the content easily they will not spend much time at the site. The key to good interface is a simple plan. It is wise to start with an outline or flow chart to guide you through the design. As was talked about in other chapters you need to design your site to be viewed on various monitors with different browsers. Horizontal formats tend to work best for this. Whatever navigation style you choose should be simple and clearly understood. A reader should know where they are and where they are going. Good repetition will let the user to navigate by not having to look at different places on each page to find common elements. Use of a site map or index is a good idea so a user can get a good idea of where all your content is located and how to get to it. Chapter 8 provided a number of case studies of good and bad sites. It reviewed specific items to avoid when designing. Many of the items, such as not using all caps and having a contrasting background to text, were emphasized. The two checklists at the end are great tools to use when evaluating not just existing sites but sites you create. The Diigo readings provided another take on evaluating websites. The readings focused on evaluating the website using other criteria. They explained the importance of looking at why the website was created and who created it. Questions you should ask are; Is it biased? Is the information accurate? Does the creator have an agenda? Websites are created for all different reasons and you should be careful when viewing and trusting the content. The article written by Kim Guenther dealt with designing web pages and how to organize information. Using a method like the inverted pyramid taken from traditional journalism is a smart approach. Picking an appropriate style guide is important and especially useful when organizing websites which may have multiple contributors. When multiple people are providing content you must be sure to use uniform statements and brands. The most important part of the article I thought was at the end. The last paragraphs were about making sure your site is easily found and searchable by sites like Google. The best sites are useless if nobody can find them.

Making Images Web Ready

When deciding whether to attach a digital picture to an email, add it to a blog or upload it to your personal web space you need to consider the needs of the end viewer. For example if you are sending a picture to someone to print an 8 x 10 by glossy photo than you may want to keep it as is. If the viewer is only going to view the photo it is a good idea to make it web ready. In general you should make the file size smaller to allow for quicker downloading and easier viewing. If you need to make it web ready here are 5 easy ways to go about it.
1. Cropping – With cropping you cut out the part of the image that is unnecessary. This maybe eliminating some of the back ground or just cutting out the face of the person in the image to create a portrait.
2. Change the file format – Changing the file format to GIF may make the file size smaller. GIFs use fewer colors. If the image only uses a few colors you can make a JPEG a GIF and you may not lose much detail. This will also enable you to make your backgrounds transparent.
3. Compress – You can compress the file or make it smaller. JPEG are “lossy” so as you compress the file you are losing data from the image but if it is only going to be in a digital format this may not be a problem.
4. Change resolution – Reducing the PPI or pixels per inch to 72 or 96 will generally not make the image look worse on a computer screen.
5. Indexed color – When you use indexed color you are limiting the colors in an image by using a palette of colors. This will limit the amount of colors used in the image thus making the file size smaller.

Summarize and Reflect on Week 2

The readings in the book this week were eye opening. I never would have thought that you would need to consider so many different aspects when designing for the web. Chapter 9 went into detail about color. It explained the differences between CMYK color used in printing and RBG color you view on the web. The sections on bit depth and monitor resolution described terms I have heard often but never understood like 24 bit opposed to 8 bit. The last parts of the chapter dealt with choosing the correct colors, how to create web-safe colors and hybrid web-safe colors. Chapter 10 reviewed file types and formats. Some of the chapter was included in last week’s reading assignment. GIF and JPEG are explained along with an explanation of the differences between pixel-based or raster type graphics as opposed to math-based or vector type graphics. The chapter also covers selecting the right file size, creating and using thumbnails and a section on image maps. I have been on numerous sites that use image maps but never knew what they were called. The book made them seem relatively easy to create. I would have assumed they were much more complicated. Chapter 12 was all about type. It introduced me to the terms serif and sans serif and when to use them. I learned that like colors fonts must be chosen with care. Not all fonts are created equal and not all will displayed the same on all systems. You can control the font a viewer sees to varying degrees by using different default settings. The chapter explained special characters and provided the html code to make a number of them. It allows me to display my "quotes" as “quotes”. The readings in Diigo dealt with resolution and scanning. One of the links on resolution was no longer available. I was interested in learning how a scanner really works but as I delved into the scan tips reading I was getting more and more confused every time I clicked next. The author kept saying everything was easy but it clearly wasn’t for me. I moved on to the last reading and chose a few articles to view. I read about the advantages to cropping a photo rather than using digital zoom when taking the picture in the first place. I also read two articles related to increasing size and resolution.

Poll Questions

Creating a poll was even easier than changing the background. I would like to be able to edit the color of the text of the poll answers but I haven’t figured out how to do that yet. Reading and responding to everybody’s polls had me asking questions of myself beyond what the poll questions were. I mean, I have only been to Dorney Park but Hershey Park was the clear favorite. What am I missing? Is a trip to Hershey in order? I wondered is Lebron James really that good that he warrants all the hype. Based on the coffee question I realized I may need to skip the overpriced Starbucks and revisit Dunkin Donuts. I liked Jess’s question regarding how to use your money best at a restaurant and pondered long and hard (well for about 30 seconds) before clicking on appetizer. Lastly, I was stumped about what I drive. Is a Jeep Wrangler an SUV? It is 4 wheel drive but the U in SUV means utility. When I think of utility I think utilitarian and useful. The Jeep’s lack of 4 doors, tiny back seat, and nonexistent trunk do not make it utilitarian at all. So I clicked other.

Web Design Verse Print Design

Designing for the web and print have similarities in that they use the same basic guidelines regarding alignment, proximity, repetition, and contrast but they do have numerous differences also. The lower cost of web designs coupled with the ability to provide almost unlimited information on a site is a huge advantage over print. But when actually designing for the web you need to keep in mind that your design will be different depending on the monitor it is viewed on and the browser used. Designing print is more what you see is what you get. A lot of care must be taken when designing for the web to ensure that files are compressed to appropriate levels and files are not too large to allow for quick loading. In print the size of the photo is less important but typos or other errors can prove costly if not caught prior to production. Generally speaking it seems that training to design for print or web should be specific to the medium. Without guidance one could foresee a lot of mistakes made by a print designer designing their first website and vice versa.

Graphic Design in Daily Life

Graphic design is really everywhere around us. From the websites we get our news from to the cereal boxes in the store to the restaurant flyer found in our mailboxes people are trying to get our attention everywhere. Good graphic design is valuable because it can get your message noticed in what amounts to a sea of rival messages. While a bad design could actually cause people to completely disregard your message.

Summarize and Reflect on Week 1

Well my week one reading is complete and now it's time to summarize and reflect. Let's go chapter by chapter. Reading chapter one served primarily as a review for me, not because I already knew most of the information but because I completed the terminology worksheet before I started reading. In chapter two, I found the information on search directories interesting. I never used them to search. Instead, I rely on search engines for all my search needs. I will definitely have to try my luck drilling through a directory. I read chapter five after I completed the diigo readings and they covered the same information. All the advantages and disadvantages between print and web design made perfect sense to me. As I read the chapter, I couldn't stop thinking about what a mistake it would be to not have a website if you run your own business. Chapter 6 helped me better grasp the C.R.A.P. that was talked about in the first class. I am glad I did the readings before I worked on the good, the bad, and the ugly. I will most certainly be turning to that chapter over and over again. The examples they showed really helped me to gain a better understanding of alignment, proximity, repetition and contrast. While I was reading the chapter, I kept thinking of this blog and how my new background really isn't working with the font color. The font was black and I changed it to orange to add more contrast against the background. But that isn't working and when I have more time, I will make changes. Reading pages 186-192 explained the differences in file formats in a very easy to understand way. I never paid much attention to those letters at the end of a file name but now I will.

Add a Background

I picked out a background for this blog. There were tons to choose from. I found the one here at shabbyblogs.com. Installing it was really easy. You simply copied the code from the website and pasted it to the appropriate place on the blog. The site explained exactly where to paste the code. After logging into the blog you simply clicked "layout" then "add a gadget" followed by "HTML/Javascript" those three clicks brought up a box to paste the content. Simply pasting the copied code in the content box and clicking save was all it took. It took longer to choose a background than install it.

First Post

This is my first post!