Week 15 Summary (Final)

December 11, 2012 at 12:29 am (Web Design)

This week we are wrapping up our final projects.  So far I’ve updated my social networking links, added secondary navigation for the portfolio section and added content to to ArtistBio, Contact and Film.  I’ve also purchased web hosting from registar.com and registered the domain name morpheumexperiments.com.  I am bringing together samples of my my work and updating photographs.  Most likely, the most time consuming portion of the site will be the various photo galleries.  Here is a link to my homepage on the college server:

http://bcts-potomac.aacc.edu/ARTclass1/15/final-project/index.html

 

 

Advertisements

Permalink Leave a Comment

Week 14 Summary

December 4, 2012 at 11:50 pm (Web Design)

Reading

Domain names: consist of a name and an extension or top level domain; for example, I’ve chosen morpheumexperiments.com for my art portfolio site.

Domain names should be simple, unique and easy to remember.  Examples of top level domains are:

.com

.org

.biz

.co

.uk

.gov etc.

The chosen name, if available must be registered by:

GoDaddy – http://www.godaddy.com

Register – http://www.register.com

Network Solutions – http://www.netsol.com

For a full list of acredited registrars, visit ICANN.

Templates in Dreamweaver- a simplified HTML file containing elements which will remain the same on all pages can be saved as a template.  Changes made to this template will be updated on all associated pages.

Lecture

Our lecture this week concerned how to create templates within Dreamweaver:

http://tv.adobe.com/watch/companion-videos-for-adc/rich-media-website-templates-with-editable-regions/

Final Project

We completed several lynda.com tutorials concerning tables and spry widgets.  I was really impressed with Dreamweaver’s widget function.  Next we updated our design comps, finalized our HTML buildouts and created a template, which was then used to create each site page.  My linked pages can be viewed at:

http://bcts-potomac.aacc.edu/ARTclass1/15/final-project/index.html

It aligns well in IE9 and Chrome, but there seem to be some issues in Safari where the navigation links and copyright info over the header and footer bars don’t line up.

 

Permalink Leave a Comment

Week 13 Summary

December 4, 2012 at 11:47 pm (Web Design)

Permalink Leave a Comment

Week 12 Summary

November 19, 2012 at 11:53 pm (Web Design)

Reading

Search Engines

  • Crawlers – computer-based
  • Human-controlled
  • Hybrid

Image Editors and Slices

PS and FW can be used to mockup a sample site.  Slices are then used to cut out graphic portions that can be imported into Dreamweaver and combined with HTML/CSS.

Web Hosting

Recommended Sites:

•Blue Host – http://www.bluehost.com/tell_me_more.html

•Chrystal Tech – http://webservices.thesba.com/sharedhosting.aspx

•GoDaddy – https://www.godaddy.com/hosting/web-hosting.aspx?ci=9009

•Network Solutions – http://www.networksolutions.com/web-hosting/index.jsp

Lecture

https://angel.aacc.edu/section/content/default.asp?WCI=pgDisplay&WCU=CRSCNT&preview=0&ENTRY_

ID=241C37F37ACE4F619797AEB335DF0832&LinkedFromEntryId=

D9CFD50F229044D8871BD23BF879BBD1

Final Project

This week we revised our comps based on critiques from week 11.  We then used slices to separate graphic elements and chose Save for Web to optimize and export.  Next we used one of Dreamweaver’s basic CSS layouts to begin building our site.

Revised Comp

Permalink Leave a Comment

Week 11 Summary

November 13, 2012 at 12:18 am (Web Design)

Reading

Micro Stock Sites

http://www.istockphotos.com

http://www.Dreamstime.com

http://www.BigStock.com

http://www.Shutterstock.com

http://www.sxc.hu

Creative commons

http://www.flickr.com/creativecommons )http://help.fotopedia.com/entries/20500657-using-photos-from-fotopedia-on-your-website

Info: http://creativecommons.org/licenses/

Searching: http://search.creativecommons.org/

Fonts for Social Network Icons Etc.

http://www.fontspace.com/ptocheia/socialicons

http://fortawesome.github.com/Font-Awesome/

http://icomoon.io/app/icomoon.io/app/

http://designerstoolbox.com

http://www.fontshop.com/plugin/

http://www.webink.com/webfontplugin

Five Principles to Design By Article

http://bokardo.com/archives/five-principles-to-design-by/

Buttons

a touch-friendly button should be 25p to 35p tall and any width above 25-35p

Final Projects

This week we designed comps for our homepage based around our wireframes from last week.  My design looks overly busy and needs some work.

I feel like it loses the simplicity of the white background.  I’m considering making the logo smaller and higher and dangling the navigation from it on metal chains/pins.  I think the words at the bottom will have to be turned into something that is more obviously text art.  They seem like they could be links.

Permalink Leave a Comment

Week 10 Summary

November 7, 2012 at 12:51 am (Web Design)

Reading

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

Ultimate Guide to Website Wireframing

http://sixrevisions.com/user-interface/website-wireframing/

Lecture

Common Mistakes Print Designers Make on the Web

http://tv.adobe.com/watch/max-2008-design/common-mistakes-print-designers-make-on-the-web/

Text generators

http://littleipsum.com/

http://baconipsum.com

http://tunaipsum.com

http://generator.lorem-ipsum.info/

Wireframe

Permalink Leave a Comment

Week 9 Summary

October 28, 2012 at 10:49 pm (Web Design)

Reading

Our reading this week emphasized font development.

http://www.howdesign.com/design-creativity/fonts-typography/web-typography-revolution/

http://www.goodwebfonts.com/legibility_twd.pdf

http://www.goodwebfonts.com/

http://designshack.net/articles/css/a-beginners-guide-to-using-google-web-fonts/

http://designshack.net/articles/css/10-great-google-font-combinations-you-can-copy/

Lecture

We watched a video by Adobe TV that overviewed the 5 Essential Principles of Interaction Design:

Consistency

Visibility

Learnibility

Predictability

Feedback

http://tv.adobe.com/watch/classroom-five-essential-principles-of-interaction-design/part-1-five-essential-principles-of-interaction-design/

Final Projects

Next we continued our final projects by completing our design documents, experimenting with Google Web Fonts, and creating style tiles, which are on a level of complexity between mood boards and comps.

I added a flowchart and two storyboards to my design document:

 

The elements of my style tile reflect my most recent artistic focus-mixed media.  I feel that this style is effective in bringing together the many types of art displayed in my portfolio.

 

Permalink Leave a Comment

Week 8 Summary

October 21, 2012 at 10:06 pm (Web Design)

Banner Designs

This week we wrapped up our banner designs and submitted them to the Fall 2012 Banner Contest.  I learned that the animation issue I had last week could be resolved by right-clicking Layer 1 and checking “Share layer to states.”  My animated banner now includes twinkling stars and one shooting star, which draws attention to “MyAACC.”  I considered animating the apple to fall out of the tree and rolling into position, but it would have involved changing the states and timing, which related to the stars.

Stock Photography

Next we read about the various webpages, which provide stock photography:

www.gettyimages.com

www.comstock.com

www.fotosearch.com

http://pro.corbis.com

www.shutterstock.com

www.istockphoto.com

I frequently use www.morguefile.com.

Rights-managed photos: require a license fee for each use

Royalty-free images: can be used continually with only one fee

Poor Web Design

We also read about examples of bad web design:

www.webpagesthatsuck.com (Vincent Flanders)

Worst Navigation

http://www.webpagesthatsuck.com/mysterymeatnavigation.html

Worst Overall 2010

http://www.webpagesthatsuck.com/worst-websites-of-2010-contenders.html

Usability Issues (Jakob Nielsen)

Top 10 Worst Mistakes

http://www.useit.com/alertbox/9605.html

Text Links

http://www.useit.com/alertbox/20040510.html

Photos

http://www.useit.com/alertbox/photo-content.html

DigitalJENN Assignment

We completed part I of an assignment working with an imaginary client “DigitalJENN.”  JENN gave us examples of types of stock images she would like for her page and we downloaded preview images from gettyimages.com.

Final Project

We completed a design document for our final projects using a project profiler template, which covers company info, audience, content, functionality and a field trip through websites with similar goals.  Here is a link to my design document and the websites I used as examples:

http://bcts-potomac.aacc.edu/ARTClass1/15/final-project/proj-profiler-jkeeler.doc

http://www.jonduff.com/web/

http://brookehallcreative.com/

http://www.cathyboy.com/

The last site is the most like what I would like to achieve stylewise, but I would definitely improve navigation.

Permalink Leave a Comment

Week 7 Summary

October 14, 2012 at 9:57 pm (Web Design)

This week our focus was animation.  We watched two class lectures on animation for the web and elements of design:

Lecture 1

Lecture 2

We also read our textbook The Principles of Beautiful Web Design chapter 1 to understand more about layout and composition for our final projects.  The design process involves:

Discovery

Exploration

Implementation

In good designs :

Web Page Anatomy

  • containing block
  • logo
  • navigation
  • content
  • footer
  • whitespace

Grid System Links

http://960.gs/

http://10k.aneventapart.com/

Balance

http://dlanham.com/

http://jasongraphix.com/

Asymmetrical Balance

http://www.steinway.com/about/

Unity

Proximity

Repetition

http://sketch.odopod.com/

Emphasis

Placement

Continuance

Isolation

Contrast

Proportion

http://sxsw.beercamp.com/

Common Layouts

Left-column navigation

http://www.porsche.com/usa/models/911/

Right-column navigation

http://www.southcarolinablues.com

Three-column navigation

http://www.thinkgeek.com

Finding Inspiration

http://unmatchedstyle.com/

http://cssdrive.com/

http://designmeltdown.com/

http://patterntap.com/

http://developer.yahoo.com/ypatterns/

Creating a Morgue File

Part of our final project assignment for this week was to begin a morgue file-collecting various color schemes, textures and design ideas.  You can also capture screenshots using http://www.realmacsoftware.com/littlesnapper/.

Trends

Navigationless Magazine Style

http://designinformer.com/

http://thebolditalic.com/

http://52weeksofux.com/

Expansive Footers

http://showandtellsale.com

Bare Bones Minimalism

http://analog.coop/

http://khahoang.com/

http://www.underconsideration.com/brandnew/

http://www.sagemediari.com/

Fixed, Fluid or Responsive Layouts

Fixed-width:

Fluid-width:

http://www.designinfluences.com/fluid960gs/

Responsive:

http://www.alistapart.com/articles/responsive-web-design/

Screen Resolution

http://www.w3schools.com/browsers/browsers_display.asp

Banner Projects

Our Lynda.com tutorials included some review and covered a couple different ways to apply animation to your projects.  This was all pretty straight forward and I had no problem with the practice exercises, but unfortunately, when I try to animate an object within my project, all of the other layers disappear until the animation is completed.  I’ve tried creating the animation outside of the project and bringing it in, but the same issue occurs.  I’m hoping to figure this out soon, but for now I’ve just made adjustments to my banner project based on the critiques from early this week.  I smoothed out the tiling background, added some dead leaves and made my font larger.  I also centered the text on the smaller banner.

Permalink Leave a Comment

Week 6 Summary

October 8, 2012 at 12:16 am (Web Design)

This week we primarily focused on our MyAACC banner projects.  We made adjustments to last week’s rough designs, which responded to critiques by our professor and peers.  I was finally able to develop a reasonable apple by opening a new larger file and using the white selection arrow to edit individual points of a vector ellipse.  I added depth using a combination of gradient fill and hand drawn accents with the vector path tool.  Our lecture consisted of a tutorial on creating a tiling background image to lay underneath our main banners.

Lecture Video

After creating this addition to our projects, we also designed a smaller simplified banner for section headings.

These were really quick and fun to create by editing the existing elements in our main banners to accommodate the smaller size.  I really like the balance between positive and negative space, the apple going off the page and the “Calendar” heading offset by the stars and sky.

We also watched a series of lynda.com tutorials involving Adobe Dreamweaver and Adobe Fireworks, which improved our skills required for this project.  In the FW section on styles, the instructor mentioned a site for importing styles into Fireworks: http://www.fireworkszone.com/styles.html.

The whole project, thus far, shows pretty well, but the tiling background still needs some tweaking to appear completely smooth.

Next, we were given the requirements for our final projects.  We are to create an entire webpage for an existing business or non-profit or a portfolio webpage for ourselves.  I was asked by a friend recently to redesign the webpage for his professional beat music company and I’m definitely interested in working on it, but it would primarily involve embedding a lot of music files and I think I would like some more experience with all of this new technology before jumping into someone else’s project.  I’m definitely leaning toward a digital portfolio for my various art experiments.  I already have digital media for most of my visual art and film projects and it wouldn’t be difficult to photograph more.  I think the perfect site to represent my artistic ramblings would somehow find a balance between richly eclectic elements and design simplicity.

Permalink 2 Comments

Next page »