Week 12 Summary

One of the two lectures for week 12 was titled “Designing for Search Engines.” This lecture covers search engines and traffic on the web. Search engines are one of the primary ways users find web sites. Good search engines increase website traffic. The traffic on a website is the amount of visitors that reach a site at any given point. Traffic in sites drive search engine rankings for many sites.  However, many web sites appear poorly in search engine rankings simply because they fail to consider how search engines work. For those who do no know, a search engine is often used generically to describe both crawler-based search engines and human-powered directories. An example of a crawler-based search engine is Google.com and an example of a human-powered directory is open directory (dmoz.org). When designing a search engine for a specific subject or topic be sure to use keywords, words that may eventually be searched by a potential user.

In the article Website Hosting and Domain Names, it discusses reserving your own domain name. It is very important that after your domain has been reserved, you will need to secure the hosting for your website. Some recommended website hosts are Blue Host, Chrystal Tech, GoDaddy, and Network Solutions.  In a “Shared” Hosting experience be sure to check that tech support, analytic  servers, programming, email accounts, and limits on tech support are checked for.  Ask yourself will be the tech support be via email, via phone, or both. Are there any limits on the tech support? Will the servers be Linux or PC? What kind of programming is allowed? Hoe many email accounts will there be and are the web mail and outlook compatible? Will the analytic offer information on traffic, visitors, pages, etc?

Week 11 Summary

For week 11, we were given 2 articles to read, Resources for Comping and Low-cost or No-cost Images. https://angel.aacc.edu/section/default.asp?id=ART1708752012FA

There are four design resources to use when developing a design comp. The social icons font is a free font that will allow you to create social icons for a design. Free icons are used depending on what you may be trying to accomplish. You may want to use subtle icons to indicate key areas of the page. The designers toolbox provides common interface graphics and browser icons that can be downloaded and incorporate into comps. FontShop and Extensis are web fonts that are used in Photoshop.

As stated in the Low-cost or No-cost Images  article, if you are not working with a client who has a large budget for stock photography, there are two options that may be used; Micro Stock Sites and Creative Commons Licensing.

Micro Stock photography is an offshoot of the original stock photography industry  Depending on the site Micro sites will buy/sell images almost exclusively online and accept images from a range of photographers. Images may sell for a low as $.20 or as high as $10 per image. Popular Micro Stock Sites are as followed; iStockPhotos.com, Dreamstime.com, Bigstock.com, Shutterstock.com, and stock.xchng.

The Creative Commons License was founded in 2001 with the support of the Center for the Public Domain. Creative Commons is a non-profit organization lead by a Board of Directors that develops, supports, and stewards legal and technical infrastructure that maximizes digital creativity, sharing, and innovation. Creative Commons License was created as the online community sites and social media developed. Some popular sites that offer Creative Commons licensed content are Flickr.com.creativecommons, fotopedia.com, and creativecommons.org.

Week 10 Summary

This weeks assignment consisted of reading the articles, A Dao of Web Design (http://www.alistapart.com/articles/dao/), Planning And Implementing Website Navigation (http://www.smashingmagazine.com/2011/06/06/planning-and-implementing-website-navigation/#more-96551), and Ultimate Guide to Website Wireframing (http://sixrevisions.com/user-interface/website-wireframing/.In) the article, A Dao of Web Design, it is noted that Daoism is a philosophy, like Buddhism, a way of living.When you are controlling web pages, you will notice that many words or phrases are being repeated. The most repeated phrase will be  “how do I?” How do I make my site more appealing? How do I control the users browser? These kinds of questions will replay in your mind over and over again because you want to make sure your site is top of the line. In the article, Planning And Implementing Website Navigation, Kayla Knight states that navigation can either be simple or be complex. Designing navigation is an art in itself, and designers become better at it with experience. Websites with a lot of content or functionality require a navigation menu. As a website grows in complexity, guiding users to that content and functionality shouldn’t be the job of any one menu. All websites must  have at least two main menus: primary and secondary. A primary navigation menu stands for the content that most users are interested in. A secondary navigation menu is for content that is of secondary interest to the user. Any content that does not serve the primary goal of the website but that users might still want would go here. The article Ultimate Guide to Website Wireframing, asks the question of ” Why you should wireframe your web designs?”  Unless the site you’re designing is incredibly minimal and simple, wireframing helps clarify exactly what needs to be on the different page types of your website. Wireframing is really the first step in the design process. Taking the time to create at least a simple wireframe, you can make sure that your designs will take into account all the different page elements that need to go into the design, and that they’re positioned in the best possible way

Week 9 Summary

This weeks lesson consists of learning about web fonts, grid design and the principles of interaction design. When it comes to web fonts you must make that the font is easy to read and that it is a “good” font. What classifies as a good font? A good web font must be legible. According to the article on http://www.goodwebfonts.com/legibility_twd.pdf  reading text type  (12-16 px) is easier if the font has a generous x-height, open apertures, prominent ascenders and descenders, slightly loose letter spacing, and discernible terminals. Though Helvetica is cleaner and simpler than Georgia, Georgia is easier to read. Grid systems bring visual structure and balance to site design.

Week 8 Summary

Each week I improve on making my banner. The only problem I am having is when it comes to animation. Other than that I think I am doing a great job and could still improve on my graphics. For our reading this week we read the article ” 10 Worst Web Site Uses of Navigation for 2010.” These sites indeed were terrible but, I think the worst website to me is number 5, George’s Township Civil Defense EMS & Fayette_County_Ambulance_Service Fayette-EMS 306, simply because the red writing on the site interferes with the pictures and background of the site making it hard to read. It is very important that the text on websites are legible and easy to read because to me that is the first aspect that would appeal to me. If I am not able to read the information on the site that would automatically make me exit the site. We also read and learned about stock photography. Stock photography consists of existing photographs that can be licensed for specific uses. Images are filed at an agency that negotiates licensing fees on the photographer’s behalf. Most stock images are available online, and are easily browsed in huge databases. There are two primary flavors that stock photography are associated with, rights managed and royalty free. Rights managed is an individual licensing agreement negotiated for each use, with an option for exclusivity in an industry or for a period of time; price dependent on use and is often a more expensive option. Royalty free is a flavor that offers the ability to use an image in an unlimited number of ways for a single license fee, with no exclusivity; much cheaper option. This does not mean the image is FREE – it simply means there are no royalties attached. The user pays once to use the image in many ways. Most sites offer low-resolution versions of images called comps. Comps is an abbreviation for comprehensives. Comps are normally used in rough sketches or designs to show a client how a final piece may appear. Though there are several photography stock houses that offer individual licensing as well as cd’s of professional images, the main sites are www.gettyimages.com,www.comstock.com,www.fotosearch.com, and pro.corbis.com

 

Week 7 Summary

During this weeks lesson I have definitely improved on my skills with using Adobe Fireworks. Each week my banner has had great improvement though it still could use a lot more work to make it look a little more professional. When using GIF animation there are several programs that may be used including Adobe Photoshop and Adobe Fireworks. I also learned that logos should not be the dominate focus of a GIF animation, unless branding is the focus.The two most familiar web animation technologies are GIF and SWF. GIF is screen by screen animated raster images. Gif animations are low-bandwidth, low-tech ways to create animations which is also a simple format and well known standard. GIF is also popular because no additional software installation is required. SWF is animated vector animation with true interactive capabilities that is a compiled file resulting from Adobe Flash’s authoring environment. SWF is a flash animation. Flash is a rich-media application and animation file format that creates Vector images. According to the Designing Websites power point  a website should  entice, attract, and engage users. It should also encourage the user(s) to visit more than once. Images should be engaging and relevant to the user. In chapter 1 of our textbook, it discusses how the design process of a website long with the technical details of developing, hosting, and maintaining a website or application can be. However, the design process can be cut down to discovery, exploration, and implementation. the discovery part of the design process is all about meeting the clients and learning what they do.  For instance, you may ask, what does your company do?, What is your role in the company? The exploration process is to take the information you have learned and analyze, dissect  and experiment with the results. When implementing you are focusing on the design.

(https://angel.aacc.edu/section/content/default.aspWCI=pgDisplay&WCU=CRSCNT&preview=0&ENTRY_ID=1D57251047B649109BFE79B65EC425A4&LinkedFromEntryId=0E8D8D6544314D51AA05FE221EBEB2D7)

https://angel.aacc.edu/section/content/default.asp?WCI=pgDisplay&WCU=CRSCNT&preview=0&ENTRY_ID=59C6666670A747AFAE13E7F33B11D99F&LinkedFromEntryId=20732BA1FCA64331B5FDB7AC812A2AA7

Week 6 Summary

This weeks lesson has taught me that I need a lot of improvement when it comes to making banners. I have a general idea of how to create them in Fireworks, but I could still use a lot of work to make my banners look very professional and appealing. Creating a banner is not very hard to do, but for someone who is not very advanced in the web design world, and is a criminal justice major it can be quite frustrating to deal with.

Final Project

For my final project I will create a portfolio website. I will display photographs that I myself have personally taken. Some will be photos that were captured in MD and others will be photos I captured in NC.

Week 5 Summary

 This weeks lesson started out by using Lynda.com to exercise the use of Adobe Fireworks. Adobe Fireworks is a bitmap and vector graphics editor. There are five important terms that are associated with Fireworks. The first being layers, which means an object can be moved and the order of items can be rearranged. The second term being frame. Frame controls the state of your image, used in animation and used in creation of rollover graphics. Guide is the third term which simply helps divide images. Guides are invisible except within the original program. The fourth term, slice, does exactly what you may be thinking. It slices the picture anyway that you guide this tool. Last but not least, web layer holds slice and hot spot info. A layer is added automatically when you create a slice. However, it is not editable through layers window. (https://angel.aacc.edu/section/default.asp?id=ART1708752012FA) There are also several tools within the Fireworks program, but there are two main tool options that are used more than some, vector and bitmap. Vector tools include line-draw straight lines, create separate editable objects, pen and vector path, text-editable and scalable, and shape tools. Bitmap tool consist of marquee and lasso, paint brush and pencil, eraser, blur, smudge, dodge, burn, rubber stamp, replace color and red eye.

For this weeks lesson we also read chapter 3,”Texture.” Texture is anything that gives a distinct appearance or feel to the surface of a design or any object. Though when working on a website you can actually feel what the image may look like may it certainly gives an appeal to the image and you can imagine what it may feel like if you could actually touch it. This chapter also discusses points. just one pixel is one of the many dots on your computer screen. For example, if your resolution is set to 1280×1024 pixels, then you will have 1,310,720 pixels on the screen which is arranged in 1,024 rows and 1,280 columns. At the end of the day, every single one of these pixels come together to create an image. Another element is line. Line is the most common element of any graphic design and most expressive. When a line is diagonal, it evokes a sense of movement and excitement. For example, a falling domino.

Week 4 Summary

This week in Web Design 1 the main topics at hand were typography and fonts. Typography is simply about arranging a familiar set of shapes  to make words, sentences, and paragraphs. The root words that make up typography consist of typos meaning impression or mark and grapheia meaning writing. In simpler terms, typography means to make impressions with the form of writing.Several font families are supported by default. Arial, Arial Black, Comic Sans MS, and Courier New, Georgia, Impact, Times New Roman, Trebuchet MS, and Verdana are all know as the safe list meaning they are the more familiar fonts. The font-family property allows you to choose multiple fonts in order of preference. This is known as the font-stack. Generic font families are serif, sans-serif, cursive, fantasy, and monospace. In order for you to host your own font it must be licensed for web embedding and several different font formats and latest code for embedding will be needed. Though developers tried several different tricks to render text in their preferred fonts, there was only two successful solutions; sIFR and Cufon. sIFR is an acronym for Scalable Inman Flash Replacement, which means that Flash movies have the ability to embed fonts and display them. An alternative to sIFR is Cufon. Cufon transforms fonts into SVG files, then uses a JavaScript to draw letters using canvas elements. In the article, The Difference Between ID and Class,  (http://css-tricks.com/the-difference-between-id-and-class/) it discusses how to differentiate between ID and Class.  Id is very unique. When dealing with ID each page may have only one element with an ID. If the same ID is used on more than one element, the code will not pass. Unlike ID, Classes are not unique. Multiple classes can be used on multiple elements. There are no browser defaults for ID or class. Adding a class name or ID to an element does nothing to that element by default. According to the article, 12 Really Useful Image Optimization Tools For Web Designers, (http://www.webdesignbooth.com/12-really-useful-image-optimization-tools-for-web-designers/) there are twelve useful image tools for web designers. Smush.it, Dynamic Drive Online, PonyPng, and SiteReportCard are all web based tools. Shrink O’ Matic, OptiPNG, ImageOptim, and PNGOut, PNGGauntlet, JPG & PNG Stripper, TweakPNG, and RIOT(Radical Image Optimization Tool) are all desktop image tools.

Photo courtesy: https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcTfSV4YJKZ-rakYWz-lpzqkIvcQCcZz1_comqlj2toXWCcinU1tQg