Thursday, May 23, 2013

Week #6 Blog Post from Homework

The final blog...

This was fun! Not web expressions though. After working in Wix, why would anyone want to put themselves through that? Of course, that comment is mostly because I am a novice at this, and Wix was not only easier, but actually fun! The Web Expressions templates themselves were boring, although I realize that I could have located other templates, I doubt I would have had the skill to work with them in a way to produce the stunning results anyone can make in an online web site builder. I did manage to get a video embedded so that made the Web Expression have some movement. With Wix, I was able to have a moving slide show on the front page, nice transitions, embed the video, add a poll and have many more features such as a form for contact.  A page in the template actually had a google map to my location, but for this exercise I deleted it. I like how the navigation bar shows all the sub pages when the mouse hovers over it. There was spell check in Web Expressions, but not in Wix. This was certainly not good! But, copy and paste directly from Word was possible, so as long as the text wasn't changed, checking for spelling could be done in Word. Web Expressions has spell check, but text has to run through notepad. I did attempt to past without formatting at the end.

Problems with Web Expression freezing on my computer cause a loss of work quite a few times. On one occasion with Wix my browser shut down, but had less problems overall with the site builder online. Both of these issues are related to my computer, but nonetheless, it was aggravating. Another issue with Web Expressions was that my side border picture did not repeat. On long pages, a side border photo did not show, which did not look nice. Wix on the other hand took care of all of that, with a nice background that was consistent throughout.  Working with images was quicker and efficient in Wix. In fact, I did not use Photoshop at all. Compare that with Web Expressions, and ALL images needed to be reworked first and then imported.

Wix templates are all pre-formatted to maintain consistency in color and style and the templates were very professional. There was some consistency in the Web Expressions template, but it was very easy to mess that up and create a site that would break the rules. I worked longer and harder on Web Expressions, but when I was working in Wix I found it to be more appealing and less aggravating. Another area of difference was in creating separate pages for the recipes, which I wanted to do in my original storyboard. This was very simple in Wix but not so easy in Web Expression. In the end, I just moved on and left all the recipes on one page in my Web Expression site. Also, in terms of difference from the storyboard, I did not include animations or video portions. Having the storyboard and information ready was a definite plus. It allows you the time to work on the design, rather than content.

When I compared both sites, the Web Expressions site is just okay, but I feel that the Wix site made my site look so much more professional. I am actually surprised that the Expressions site looks okay since I thought it was going to look very basic or even dated.  The basic templates are just that, basic. However, I was impressed with the Wix site and would consider using this in the future to build a website. In fact, a friend just sent me a link to a website he created. I think I might steer him to something like this or offer to create one for him. Although I have worked in graphic design, it has been years since I designed or wrote anything HTML, in fact my skills were terribly outdated. Even though it was a ton of work, I am pleased to have increased my knowledge in web design! Actually, I think I'll leave my veggie bite site up and keep working on it! Thank you for a great class! --Sandy


My Wix site: http://sjos0513.wix.com/veggiebites


Monday, May 20, 2013

Week #5 Blog Post from Homework

Getting to the end and finally putting together a site. This week is all about good writing, setting up a good website starting with storyboarding, and a few more tidbits about design.

Writing for the web is not the same as print. I liked the idea of an inverted pyramid, conclusions first, then expand.  Remember, people do not want to spend a ton of time reading lengthy wording. Again, appearance, navigation, relevant content are key. When writing, lists are better (7-10), try not to use "passive" voice, something I struggle with in all my writing. More helpful hints include, one idea per paragraph, links in paragraphs, headings and subheadings, and then...proofread and spellcheck.

Storyboards are for planning, organizing, and navigation of the website. A flowchart can be used to layout the entire site. A good design will be simple, stand out, be fresh, exciting, yet user friendly. One good way to find ideas and see good site design is by looking at other websites that are appealing. Good information from websites can also be found at bad websites. Bad websites show designers what not to do! When putting the storyboard together, a designer can see how the site will flow, and what it will take to navigate. It will not do any good to have pages buried through separate links that are impossible to get to.  Remember to keep it simple and consistent. Always have a way to get back to the homepage, and navigation bars should be the same on each page. In the book reading, important aspects this week is file organization. This is especially important as the site goes live so that all links are valid. Image files in the same folder can save a lot of time when routing or fixing links. Additionally, a few advanced tricks in Photoshop for the images such as slicing and rollovers or image swaps where a fly out/different graphic appears when the mouse hovers over a certain part of the graphic.

Some of the most beneficial reading was not to do in web design. Be careful with advertising if used. This should be related to the website if possible. Splash screens are bad! I personally do not like these at all. Be careful with text, color, and no horizontal scrolling because your content is too wide. Always check your website in other browsers, and also for accessibility and usability. Turn off graphics to be sure that you have properly attached text to all images. It is a great idea to see what your site looks like without graphics. Also, try to view in mobile devices or chose a site builder that offers mobile capability. More and more people are surfing the web on tiny screens and if your site does not look good or operate in this environment then you will not have visitors. (Usability and Accessibility answered more fully in blog post #4)

For my final web design, and after reviewing some of the online site builders, I am choosing Wix. With Wix, I was able to easily locate a design that fit my content. The company is also free and the template I am using has a slide show feature.

Tuesday, May 14, 2013

Week #4 Blog Post Homework

The fact that computers have allowed many people to have a voice online is a double-edged sword. The Internet is a vast database of knowledge, from personal to business, governments, and more, but you have to carefully sift through it all and be sure that what you are reading is actually true. We must always ask, is the information presented from a reliable source? Its easy to surf the web and fall into thinking that everything you read is accurate. However, there is no dispute that we now a vast amount of information available in an instant! We have become smarter and more knowledgeable because of it, and education has dramatically benefited from this technology. It is hard to imagine the days when doing reports meant checking out encyclopedia's from the school library. The flip side though is that anyone can create a site, and unfortunately that also means that people are able to create and do things that could potentially harm others. Users have to be diligent in how they use this technology.

Advantages to creating your own website are many IF you have the ability and skill to do it the way you need it. After all, no one knows you, your hobby or your business like you do. Hiring a web designer is expensive, so if you want someone else to do it, you will need a sizable budget. Depending on how much you pay and the company doing the design, it is possible that they will have a variety of people that work on various aspects of your site with their own skill set. The most dramatic results will come from a paid website designer, provided you have selected someone with excellent skill and education. However, if you want to tackle this project yourself, you will need time to get the job done. While a professional can have a site complete in a rather short amount of time, novice users could pick web site builder programs that use templates or those with which you can simply type in what you need. These programs still require some knowledge or it will be very frustrating. However, they will enable a beginner to have rather decent website, but with little control. An often overlooked aspect of web design is site optimization. There are people that specialize in this field.This is important especially if you want to have an online business. What good does a good site design do if your site does not come up in searches. Online adverting, targeted advertising, and store/cart systems are other areas that require a good skill set. Another area that requires good knowledge is security, especially if you are a business owner who collects personal and financial information from your clients. Again, very important considerations if you are running a business when choosing who will design your site. However, if you want just a hobby or other personal site, there are easy to use, site creation programs, hosting etc. that walk non-web designers through the entire process. The question you have to ask yourself is, will my website achieve the goal it was intended, will the data be safe, secure, and backed up regularly, and will the site have any unwanted advertising from the program or hosting server, especially in lieu of free services.

Finally, you have be sure that your site is usable and accessible. These terms are often confused. Accessibility refers to the ability of everyone to use the computer and Internet in terms of disabilities and usability refers to ease of use. The Americans with Disability Act has set forth laws that require certain websites to be accessible to those who have mobility, sensory or learning disabilities. Because of the vast nature of how we use computers and the Internet, having an accessible website has become both a legal and ethical issue in web design. It is important to have a universal design that is usable to a wide range of audiences.  Protocols are set by World Wide Web Consortium (W3C). One very critical design element is the use of alt text or long text names for non-text items on a page. This allows those who are unable to see to have the ability to understand what images you have portrayed, as these can be read out loud. In a nutshell, the website needs to be obtainable and functional to people with disabilities. Usability refers to how easy one can navigate the website. If a website is difficult to use, people will leave. Usability covers areas such as intuitive design, efficiency, ease of learning, memorability, error frequency and severity, and satisfaction by the user (usability.gov).  When designing for the web, the site needs to offer the user an opportunity to learn and use the site to meet the desired goal, and be satisfied with the process. Its important to check the design by viewing in different browsers, turning off sound, turning off graphics, use different monitors, screen resolutions and such to see how usable and accessible your site actually is.

12 Popular Logos with hidden messages in the desgin....

12 Logos ...These are interesting. I knew only of the FedEx logo. While subliminal can be debated, these designs are very clever.

Wednesday, May 8, 2013

Dreaming of....Beach Therapy!


The beach is where I go to restore my soul, and energize my spirit!


Morning sunrise at Virginia Beach with broken clouds
Virginia Beach, VA (May 13, 2013)
"At the beach, life is different. Time doesn't move hour to hour but mood to moment. We live by the currents, plan by the tides and follow the sun." 
-Unknown

Monday, May 6, 2013

Week #3 Blog Post from Homework

Quiz: Immediately after viewing the two examples I could see that "B" was designed much better than "A". While there was contrast in colors in "A", fonts are not easily readable, and the entire first page was not visible, the buttons are dramatic and huge, need to scroll down to see all options, but no scroll bar? The navigation buttons should not be the main focus of the page.  In "B" the entire first page is easily seen, good contrast, navigation of the site is clear on the left hand side, fonts are readable, still has contrast, pleasing colors, all of the button (links) have both pictures and words so it is clear what to expect when you click on them.

Evaluation of Websites:

  • #1 LUXE Salon and Spa
    • Visually appealing and understandable site, opens on home page with a multimedia show of the salon and spa. Pictures are clear and inviting.
    • Site has color theme: grey, black and orange - most font/font colors are easily readable, nice contrast. Use of light gray might be an issue in some monitors though.
    • Object of the site is to provide information for potential new clients
        • Phone # to make appointments stands out very clearly as well as address.
    • Navigation bar at top clear in words, also located at bottom of page
    • All pages including initial page load -- good load time! Important information is contained in first view. After scrolling down though, it was a bit junky. Some of this could have been placed onto separate links, such as salon specials.
    • Link at bottom to Google maps is good for directions, also link Facebook and Twitter at top of page.
    • The navigation bar repeats on every page. To show where you are a fine orange line appears on the navi-bar. Each linked page within the site has wording to indicate where you are as well. Home link is very clear. Could not find a site map, but I don't feel as if I need one here.
    • I think the team page is fun with a revolving graphic of the people that worked there, however they missed an opportunity by not providing information about the employee when you click person.
    • Offers/coupons/following or rating them online should redone.
    • They are missing an "appointment page" which many salons on the web now have. The phone is clear, but they should have a link to make appointments by phone or Internet. Also should have a search site box.
    • When graphics were turned off, they did a pretty good job, just a few missing "alt" tags and descriptions.

  • PPL Electric Utilities
    • Home page almost fits to screen. Nice pleasing multimedia show that can be clicked for more information. Clear box for site search.
    • Navigation is on the right on this website
    • Although there is a top navigational bar (words) on all other pages, this does not appear on the home page. No navigational bar in words at bottom either. Personally think they should have one since many people are accustomed to this feature and should be appealing to a larger audience, especially for an utility company. However, after leaving the home page, getting back to home is clear and easy.
    • Page load time is excellent
    • They have a nice color scheme, shades of blue and off white. Fonts are clear, easy to read, nicely sized, and appropriate contrast.
    • Could not locate a site map/index and this size of website should probably have one.
    • Customers that utilize this site will want to report trouble, need customer service, or view account. All of these activities are clearly visible on the home page.
    • There is no button or link to convert this page to different languages. This is a surprise!
    • This website was redesigned a few years ago and thought this version was much better than the previous.
This class is helping me to refine a critical eye that I developed when in print design. I might even be becoming a bit of a web snob, actually! Although I knew things looked bad, I did not always know why. When I create my website, I know it is important to reach a wide audience and be visually appealing. Websites that are not done properly, do not invite the reader in to look around, which is of course, the ultimate goal! Remembering the Alt tags, quick load times, clean and crisp fonts/wording, good navigation, and first page "fit to screen" is a great reminder of things I like to see when I looking at websites. The truth is, as critical as I am about these websites, I can only hope that I accomplish a website that incorporates the elements that they did.

Sunday, April 28, 2013

Logo Design Article at Entrepreneur Magazine

Entrepreneur Magazine's "20 Logos We Love" and why....

"The 20 logos showcased on the following pages were thoughtfully crafted with unique characteristics and wit that lend them eye-catching appeal and longevity. Let them be an inspiration as you create the public face of your own organization." http://entm.ag/15NqQA8


Saturday, April 27, 2013

Blog Gadget #2...Polling around!

Added a poll today! I decided to ask my fellow classmates what their ultimate goal was in pursing their Albright degree. I guess that is a bit boring, but I am just wondering, okay nosy as to whether others are making a "later in life" career change as well! At this point, most checked for advancement or career change; however, one person selected the "other" category. I hope I get the opportunity to find out what "other" meant. Unfortunately the poll setup did not allow for write in answers.

So far I have answered these polls: one on Oreo cookies (yum!) my dream vacation, favorite literary genre, how long will it take for the USPS to close, how I take my coffee, how I get my news, my happy place, what super power I would like to have, how I access the Internet, favorite wireless, and favorite food! Looks like we are getting close to completing all of our polls. I don't know about everyone else, but I think my poll question reflects my interest which is education. I really enjoyed the wide variety of questions from everyone. I had so many favorite poll questions, but deciding what superpower I would like to have was funny, yet interesting. This is something I can honestly say I have never thought about!

This gadget was troublesome at times. Results did not show and a scroll bar appears at times. There is no way to adjust font and size of the poll. I did however try to change the overall width of the blog and columns, but in the end I did not want to compromise the layout to accommodate the poll.



Week #2 Blog Post from homework

If you want to take a photo that you took off your 8 mega pixel camera and place it on a website you will need to do the following. First you will need to transfer the image from your camera into your computer. Then open an image editing program such as PhotoShop Elements and import the image into the program. The actual size of the photo will depend on what camera settings were used. The finest settings will produce the largest photos.  Before you do anything to the photo, save this as a PSD "source" file so that you will have the photo without any changes. Make a copy of the photo. It is best to turn off the original photo by clicking the eye on the left side of the original photo in the layering pallet. To resize the photo, go to image, and resize. Constrain proportions and resample image boxes should be checked so the resized photo is not distorted. Resolution should be set at 72 dpi for web, 300 for print. Duplicate layer, take the crop tool, drag and crop out the tourists in the photo by selecting only the area that you want in your photo. If you need to make any further adjustments, make a new adjustment layer and apply techniques such as sharpening, brightening etc. Re-save this photo in the PSD format named with changes. Next we want to "save it for the web" as a jpeg using medium compression. This is so the image is the appropriate size for the screen as well as loading time. Image size can also depend on on where it is uploaded, as there can be maximum pixel and file size. If making changes to size, be sure to check "constrain proportions" so there is no distortion. At this point the jpg file is ready to be uploaded into your web program. The goal of all web graphics/photo is to have reasonable quality, at the smallest file size, and that loads quickly.

Typography--Readability vs legibility?

First, I love typography. I have books solely devoted to the art of typography. Unfortunately, I remember little since I switched my focus from design to Organizational Behavior. At one time though, I had to upgrade my home computer to accommodate my font collection!

Bad typography can ruin the best print/web material. Sometimes people can get caught up with fun and fancy fonts, placement, and size without realizing that the words are not legible and/or readable. Typography is a true "art" all on its own!

  • Readability is about how a lot of text is viewed and considers factors such as size, contrast, bolding, italics, and avoiding long lines of text. In print, a simple serif face is best.

  • Legibility refers to shorter areas of text such as headlines, button text etc which are generally best with sans serif font. These are fonts without the little tails on the end. Short "bursts" of text should not be in all caps. While serif fonts are nice for print, sans serif are actually clearer to read.  

It is important to understand that not every font on the computer is good for the web. There are in fact a number of web safe fonts that are generally on all computers. If you make a web page with a special font, you risk others not being able to view the page as you view it. If a computer does not have the font specified, it will substitute and the results can be dramatic, and usually poor. Likewise, monitor resolutions will effect the how big or small text appears.The best way to achieve consistency is to use Cascading Style Sheets (CSS). CSS will allow you to name, and define all of the formatting which can be applied or changed easily to text selections. While not all browsers support the standardized css code, basic typographic controls in css are generally recognized. In the end, designing for web or print, the ultimate goal is that what you have created is easy to read and understand.

Sunday, April 21, 2013

Week#1 Blog Post from homework

Now more than ever, graphic design is everywhere. Effective design grabs the reader and directs the reader to the desired goal. There are both advantages and disadvantage to print vs web design. Most importantly, print design can be cost prohibitive. One aspect of print that has always been difficult for me was the limitation of the four-color process. When design was just beginning on the computer, adding RGB and the conversion to CMYK for print was a nightmare. In print, a mistake could lose a client in terms of inconvenience and cost. In web, a mistake is corrected without the negative side effects of print. Likewise, the interactivity of web design, and ability to reach large audiences quickly, and relatively inexpensive, is a great advantage (providing the intended consumer has the appropriate hardware). While the book states print is more portable, with books, newspapers, and other media available on phones, laptops, e-readers, etc., I think that argument is losing. While hardware is necessary, accessibility is becoming more and more available to a very large segment of the population, and content is available using free applications. The drawback still though is whether or not content is reliably available both in download to the device and readability. And that is where print always wins!

Quiz pg. 112:

1. Print/Web
  • Annual reports are usually confidential, and this is one report that you would want to make sure everyone was reading the same content the way it was designed. Not all stockholders may use digital devices. Although, I would also make this available in PDF format especially if the company was public or in an intranet if private.
2. Print/Web
  • This question does not indicate they type of job the person wants. If applying for print designer, then I would send a sample of print work, but if the job was for digital design, then a digital sample would be more important. If the applicant wanted to reach a large audience though, a four-color brochure would be expensive, so perhaps the web would be more cost effective
3. Web
  • Most people expect to be notified about software updates through the web. This is a cost effective way of reaching your intended customer base.
4. Web
  • Reaching large audiences often can be costly if done in print. This would require more than likely a secure log-in type situation for information that clients pay for.
5. Web
  • There are so many places on the web that a teacher could self publish information for students/clients which could be free or even paid content. Small publishing jobs in print would be too costly, and would additionally involve distribution costs.
6. Web
  •  Once again, a large amount of work can be displayed quite easily and inexpensively in some form of an online portfolio. The key here for me is probably the amount and security. Artists I know have had their artwork photographed and others have used commercial scanners. I have worked with both types of art digitally and although the files are large, to my eye at least, it was clear to me how beautiful the art was. Once a portfolio is online, having a time and/or place to see the art in person if desired could then be arranged. The art will need to be protected as well.


The video's on "Exploring Web Design" are a nice primer to begin this course. Although I am somewhat familiar with design, the most important aspect of web vs print that was pointed out was the fact that the user has the ability to change how the content is viewed. The videos remind me that design for print is not the same as designing for web. Site load time, usability, readability, and many different interfaces that are in use today are serious considerations. Because the experience can be quite different for a variety of reasons, designing is more difficult than a static print design where everyone is viewing the same output.

Good web design takes time, practice, and knowledge. In addition, the field is forever fluid with changes occurring in technology daily. The concept of understanding what is beneath web design also reminded me when I was an accountant, during the years when it was common to computerize. Understanding how accounting works was critical so that we could identify that what was coming out of the computer was accurate.

While there are many ways to get content out in web easily, and for the most part accurately, (IE: pre-designed templates and blogs), the best design comes from those who have mastered the art and are able to write their own code, and use web tools to the fullest extent.

My favorite activity this week was the Good, the Bad and the Ugly! Years ago when I was trying to learn how to design, I would keep a file of print that I liked and disliked. I would use these examples for ideas, and to remind myself of what not to do! It is quite funny that once these design elements were pointed out, I never looked at ads the same way again!

Saturday, April 20, 2013

The Search for a Blog Style...

I have spent more time trying to set this dang blog up. For some reason I am not satisfied with much of what I have done. So late last night, I may have found one I like. I have been going back and forth on my mobile device and tablet too. I tend to be a bit compulsive in design. No one makes me more mad at myself than me! At any rate, tried a few gadgets, layouts, fonts, and color schemes. Placed the class blog roll and visited the class blogs. I like all of them, very colorful! I also liked Scott's raindrop background with drops on both background, and foreground in the design.

Decided to do one more change to the background, once again! I need a bit of peace in my life right now, so when I saw the sailboats, done! LOVE sailing, and miss it terribly! There, I'm ready!

Wednesday, April 17, 2013

A Few Hours at Chiques Rock

There is nothing better than spending time in nature to reconnect. The sun was warm, finally, and it was breezy, but the sounds of birds chirping, and water lapping the shore, was complete and total therapy. Even the rock climbers looked peaceful from where we stood.  It has been a long winter despite what the groundhog predicted. Today was my first day of spring!



Tuesday, April 16, 2013

First Post

It has been a fun night of CRAP web design! Enjoying what we have learned so far and really happy to be doing something creative. After months and months of psychology, this is truly a great break!