Week 6 Basics of Web Design

Website Summaries –
I used FrontPage to create my website and choose Weebly as my online web editor. I ran into a few setbacks when I started to create my site in FP. I guess the biggest issue for me was that I started my website as a page vs. a new website and had to basically redo it. Fortunately I was able to save my files. It was just a matter of moving and at times renaming.

In FP, I decided to create my own buttons and used quite a bit of different photos within the site. I decided to go with a banner that includes a photo at the top and bottom. Originally I had a frame around my website. I removed the frame and decided I liked it better without the frame. The bold borders on the top and bottom banner seemed to create a nice frame themselves. To me the site looked cleaner without the added border and I used this “look’ throughout the website.

It seemed easier for me to create the site in FP vs. with weebly because I had more freedom with FP. For example, I used the sunflower theme with my FP site. I basically wanted the background of the theme for my site. I wasn’t able to figure out how to apply this or any other background in my weebly site. It seems as though this cannot be changed in weebly once a theme is selected. Another noticeable difference was the photo gallery option. FP was a little quirky, especially, the slideshow option. I ended up using the photo gallery instead of the slideshow. Weebly offered a photo gallery but I didn’t see where I could insert comments.

The biggest difference between the two programs for me was the way I had to link the recipes I included in the site. In FP, it was easy to do. I typed the recipe name and then linked that to a PDF file that I created. When the hyper link was clicked on, a new page would open showing the recipe. Weebly was much different. I tried different approaches. It was easy in weebly to upload a file and attach it to a link. However, it didn’t look nice because it was jut a PDF icon and the file name. I ended up created a page for each recipe I wanted to share. These pages were “hidden”. On the recipes page I created a hyperlink and linked to the hidden page. I had to create a “back to recipes” link to get back to the starting point. I did this for every recipe.


Weebly would not allow me to make the bottom banner as wide as I wanted to and as result it appears smaller in weebly vs. FP.

One last comment is I was unable to change the banner at the top of the weebly page. It would end up changing all of them. I decided to go with the original banner on all pages and then have headings on each page.

Class Comments:
I learned a great deal about photo editing and html in this class. As much as I love photography, I will certainly use my new skills to have fun with photos I’ve taken over the years. I especially liked the colorize effect and will be using this with some of photos that I have of my ancestors. Another new topic for me was html. I never actually coded html before and was excited to learn about it in class. I can see how it would be beneficial for anyone to know at least a little about this and how to manipulate html code. I found myself doing this from time to time while working in FP.

Week 5 Basics of Web Design

It has been a struggle for me to decide what content to have in my website. I’ve finally decided to call my site “Beth Ashman” (original) and I will be creating a mix of things I enjoy…family, cooking and photography.

My website will be completed in FrontPage for class and my plan is to modify and recreate it in DreamWeaver sometime after this class ends. FrontPage will be good practice for me. The site will contain four main pages: Home | Family | Recipes | Photos. The family page will have some pictures of family members along with explanations of who they are. The recipes page will have several links to some of my favorite recipes and BBQ sites and the photo page will have some of my favorite pictures of animals and nature that I’ve taken over the years.

All pages will have the same photo in the top banner however the text will slightly change from page to page. I wanted to incorporate as many images as I could in the site and decided to create different bottom banners as well using different pictures for each page.

Week 4 Basics of Web Design

There are many things to consider when creating a website. Hiring someone or creating the site your self can be one of the most important decisions you’ll have to make.

If you have a computer and are willing to learn, creating your own site can be a fun experience. By doing your own website you can also save considerable money and be assured your site includes the content you want. If you are unsure about taking the plunge and creating a website yourself, check out the web and search for tutorials on the “basics creating websites”. One thing is for sure, there are unlimited helpful sources on the topic that can help you get started or even assist if you are stuck in the middle of a project. Once you’ve completed your site you will have achieved a wonderful sense of accomplishment.

However, creating your own website is not for everyone. Taking on such a task can be too challenging and overwhelming for some because there are so many things you need to know in order to get the website up and running. Creating links, inserting graphics, lining up content, color selection and themes as well as publishing your site are some of the major things a person must need to know in order to create and post a site. If you are not willing to take the time to learn proper technique it will show in your end product. Poorly designed websites do not attract viewers and since attracting and keeping viewers is the goal, it makes sense to do it right.

Usability is how the user interfaces work and their ease of use and is typically defined by things such as:

1) How easy is the site to use the first time someone visits it.
2) Once the site is visited, how quickly can a user perform tasks.
3) How quickly can a user remember how to use the site if they have not visited it for a long time?
4) Summary of the number of errors a user makes and how quickly can the user recover from it.
5) How satisfied is the user while using the site.

Accessibility means everyone has access to the web-based information regardless of physical handicaps and impairments. In other words, accommodations can be made for individuals who have physical challenges such as blindness and deafness.

Some ways to accommodate are listed below.
1) A reader that will read the pages for you
2) Magnifying pages to make them larger
3) A keyboard that had enlarged keys
4) Braille

Week 3 Entry

I enjoyed learning about HTML this week. As an Information Systems Student, often times people assume you know everything about anything pertaining to computers. This is far from the truth with me. I’ve always wanted to know how to code in HTML but never took the time to learn. It was fun to finally learn about HTML in class and I enjoyed trying different things with the homework assignment. Even though there are many web editors available today, I can see how beneficial it will be to know at least the basics of HTML when working with websites.


Web Site Reviews:

Example of a bad site
http://www.yogaunlimited.org

Starting out, the first thing I notice is you must scroll down to read the most important part of the page. This is true for most of the site’s pages. As mentioned in our Non –Designers Web Book, it is important to have the major content of at least the first page within an 800 * 600 area. The site appears to be unfinished. There is an empty block below the navigation bar…at least place a photo there or the address of the yoga studio, something! The title has the name of the business, but nothing else. There is so much empty space in this area and I do not feel the designer made good use of the space here. The address could have easily been placed in this area. Some other thoughts are the text is also too large in most places and they use too many different font colors throughout the site. Additionally, you must scroll horizontally to entirely view some of the pages.


Example of a good site
http://www.tigerbalm.com

Right away the site gives the impression of a non – cluttered, easy to navigate site. The pages are also laid out in a way where you can read and see most of the information without the need for vertically scrolling. Nowhere throughout the site is there a need to horizontally scroll to see the entire page. The color scheme is very pleasant to the eye and the same colors are used for all pages. Additionally, navigation is easy to understand and the information is neatly divided into like subjects. The viewer can see where they are within the site because the present tab is highlighted compared to the other tabs. The designer sticks with easy to read font styles and inter-mixes them as well as the sizes nicely.


I used a mix of everything I read about when evaluating these websites. Primarily I looked at the following:

Resolution, need for scrolling horizontally and vertically

Navigation as well as easily

Broken Links

Use of fonts – size and kind.

Proximity

Repetition

Content

Pictures loading timely and properly

All caps

Alignment

I will forever look at websites in a different way since learning about some the major does and don’ts. Whenever I open a site I find my self initially thinking about the above list vs. the actual reason for going to the site in the first place.

Everything we have learned to this point will guide me through the design of my website. I thought I had a great Idea about what I was going to do but now I’m second guessing it. I really wanted to do something with photography and recipes. I’m not sure how I can tie them together.

Week 2 Thougths on Latest Web Design Topics

One thing I quickly realized is the how powerful Photoshop is. Our class activities gave me an opportunity to learn some useful tools in this program. In the past I have used a scaled down version of Photoshop called Elements. I’ve never taken the time to gain a solid understanding of this program and have only really mastered cropping. Some of the other features we learned in class will greatly help me with what I want to do with my website. I have a passion of taking pictures and sharing them with others. Understanding the basics of how to go about preparing an image for the web is essential for a successful site.

I thought the marquee and feathering was a nice touch depending on what you want to do with the image. I noticed these features in Elements but never tried them before. It seemed every time I would try something new I would end up getting frustrated and at times ultimately ruining the image. Additionally, I never understood the concept of layers until we discussed them in class. This alone addresses many of my past frustrations with Photoshop. I am looking forward to experimenting with some of the other features and reinforcing the ones we learned.

It is not a good idea to attach an image to an email or upload to website “as is”. Image sizes can be extremely large and trying to send them over the internet or posting them on the internet can create problems. Some mail servers are set up to deny sending large files. It also takes a long time to download images from websites when they are too large. Some things can be done to make the image more suitable for the internet. Making the below changes will allow users to view the image more quickly and it will not take up as much space.
1) – Cropping is a technique that allows you to reduce the image size. All photo editing software has a cropping feature and it provides a way to select the wanted part of the image to be copied into a new photo image. This new image will be smaller and can be sent via emails or posted on blogs and websites. This is beneficial when you may have an image that contains parts that area not of interest to you.
2) – Another way to make an image ready for email and internet is to change the image size. Many times the image size can be fairly large considering how the image was created and saved. To check the image size of a file you can go to image > resize > image size and see what the document size is and change it to smaller measurements. One image I opened was showing 14” x 10” and the file size was 135kb. After I changed the file to measure 3” x 5”, the file size became 26kb.
3) – Changing the pixels per inch (ppi), is another way to make a file ready for the internet. Most images are saved at high resolution because they are used to make photographs from. High ppi with photographs is desirable because the higher the ppi the sharper the image. However, when using images for internet use, the sharpness of the picture in not the main concern. By reducing the ppi to 72 the file size will be reduced making it better suited to use on the internet.
4) – When working with jpeg files you can choose a compression setting. The higher the number the better, sharper the image will be but the file size will be larger. You should choose a number and then view the image to find a compression setting that will properly show the image without giving up too much detail and sharpness. The lower the number the more the image will be compressed.
5) – Making the background transparent will also reduce the file size. This is nice feature to use when you want the background color to show around the image. You can use the marquee feature to remove the part of the image you want to show and then paste it into a new file and save it with a transparent background.

Week One Entry

The “directories” topic covered in week one reading will be extremely beneficial to me. Until now I haven’t really used directories, however, after reading about them and working through the short exercise in the book I realize how useful directories can be. I searched the web using Google during some of my previous classes looking for tutorials on various topics such as programming and data structures. I eventually was able to find such information, but, I could have decreased my search time had I used directories.


Graphic design is everywhere we look in both the web and print. The success of the design depends greatly on contrast, proximity, repetition and alignment. A good design will keep the viewer’s attention long enough to get the intended message across to the reader. I also believe “designs” influence a persons overall opinion about the company for which it is for. This makes it ever more important to have a design that expresses a clear message and is professionally done. .


Web design provides the opportunity to give huge amounts of information to masses of people at the fraction of the cost of print. I work for a powder coating company and in the past we have spent $20K - $30K annually on printing product literature so we could send hard copy brochures to our customer base. Over the past several years we have developed a website that contains all of our product literature and technical documents so customers can visit our site and get the information they need without the use of hard copy brochures. I do not think the web will ever completely replace print; however, it certainly makes it easy and cost effective for the transfer of certain types of information. We have saved thousands of dollars over the years because we have reduced the number of color cards we needed to print. In addition, the actual designing of web information is very flexible and can easily be changed and updated. This is very beneficial when it comes to things such as overall new designs, price changes, introduction of new products, and change in hours, etc. When using the web approach customer feedback is very easy to capture and can be accomplished by using a feedback form or email. A common way with print would be to send a post card and wait for the customer to complete and return. This approach is not only very slow but time consuming and expensive as well.


One of the things that surprised me the most was learning about the overuse of the “centering” alignment. After seeing the several before and after pictures of alignment in the book, I agree that it is a much cleaner approach with everything being left aligned. At work I have been guilty of over using the “centered” alignment and I am looking forward to learning how to break that habit and creating a visually appealing design.

Up and Running

It's 9:42 and we are up and running...