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.