Let me know what you guys really think! Be honest:)...Any criticisms are more than welcome:)...
Monday, November 9, 2009
Samples
It is difficult coming up with artwork/designs for yourself. That is the difficulty I am currently dealing with. My teacher suggested, what I feel to be, a great solution; I should come up with three or more options, show the variations to people, and see what they like and don't like. I consider this step in my web design process to be the first usability test.
Let me know what you guys really think! Be honest:)...Any criticisms are more than welcome:)...
Let me know what you guys really think! Be honest:)...Any criticisms are more than welcome:)...
Thursday, October 29, 2009
Structure
My newest obstacle is one of fundamental proportions; structuring my website with intricate details, links, integrating program files, etc., is not as easily achieved as I had hoped, or thought.
In order to successfully develop my site, I will need to be sure and maintain a good sense of organization within my site root, to be attentive to its overall size, and create the correct linkage within folders. In addition, it is important to export files correctly. For instance, exporting a Dreamweaver file as a (.html) will only make coding content available for viewing.
An aspect of my site that has worked out, which was a sort of happy accident, was my desire to incorporate a wider range of text, color, and other design capabilities outside of Dreamweaver's constrictions. In other words, I have certain fonts that I wish for my site to incorporate. Because Dreamweaver offers only a select few, of which my choices are not apart, I decided to produce the text in Illustrator beforehand. The only issue with my method is that the text will become part of the imported image. As a result, I am unable to highlight words to create links, and other various options granted by Dreamweaver when utilizing its fonts. Instead I will be creating hotspots as a method for linking. Dreamweaver allows for hotspots to be drawn with a tool located on the properties menu, located at the bottom of the interface.
Helpful Hints:
- Be sure to label all folders appropriately
- All main folders should be placed within the site root folder. However, larger files, such as large PDFs, should be stored outside of the site root. The larger files may be linked to later.
- Do not be afraid to approach the web design from your own comfort zones. Feel free to create your pages and content with any program, though I do suggest Illustrator, Photoshop, Fireworks, and Dreamweaver.
- Remember to save files with appropriate extensions.
In order to successfully develop my site, I will need to be sure and maintain a good sense of organization within my site root, to be attentive to its overall size, and create the correct linkage within folders. In addition, it is important to export files correctly. For instance, exporting a Dreamweaver file as a (.html) will only make coding content available for viewing.
An aspect of my site that has worked out, which was a sort of happy accident, was my desire to incorporate a wider range of text, color, and other design capabilities outside of Dreamweaver's constrictions. In other words, I have certain fonts that I wish for my site to incorporate. Because Dreamweaver offers only a select few, of which my choices are not apart, I decided to produce the text in Illustrator beforehand. The only issue with my method is that the text will become part of the imported image. As a result, I am unable to highlight words to create links, and other various options granted by Dreamweaver when utilizing its fonts. Instead I will be creating hotspots as a method for linking. Dreamweaver allows for hotspots to be drawn with a tool located on the properties menu, located at the bottom of the interface.
Helpful Hints:
- Be sure to label all folders appropriately
- All main folders should be placed within the site root folder. However, larger files, such as large PDFs, should be stored outside of the site root. The larger files may be linked to later.
- Do not be afraid to approach the web design from your own comfort zones. Feel free to create your pages and content with any program, though I do suggest Illustrator, Photoshop, Fireworks, and Dreamweaver.
- Remember to save files with appropriate extensions.
Tuesday, October 20, 2009
Fireworks
If you have not experienced, explored, or even heard of Fireworks, then I suggest you get your little booty in gear!
Fireworks is a phenomenal program! It embodies most of the characteristics found in Photoshop, Illustrator, Dreamweaver, and many other CS4 applications. After attempting to create web pages in both Dreamweaver and Fireworks, I have officially decided to create my entire site in Fireworks. I will then bring the files into Dreamweaver where I will complete the finishing touches and publish to the Internet.
I would like to add that Lynda.com is continuing to excite me each and every time I use it. The tutorials are extremely beneficial, without which I would have taken more than 5 hours just navigating the new program (Fireworks). It is worth looking into!
I'll keep you posted with my progress. Happy Tuesday Everyone!
Fireworks is a phenomenal program! It embodies most of the characteristics found in Photoshop, Illustrator, Dreamweaver, and many other CS4 applications. After attempting to create web pages in both Dreamweaver and Fireworks, I have officially decided to create my entire site in Fireworks. I will then bring the files into Dreamweaver where I will complete the finishing touches and publish to the Internet.
I would like to add that Lynda.com is continuing to excite me each and every time I use it. The tutorials are extremely beneficial, without which I would have taken more than 5 hours just navigating the new program (Fireworks). It is worth looking into!
I'll keep you posted with my progress. Happy Tuesday Everyone!
Monday, October 12, 2009
Lynda.com
Have you ever heard of Lynda.com? It is a website featuring tutorials on a large variety of computer programs. This is the main site I have been utilizing for teaching myself aspects of web-design. So far I have completed tutorials on HTML coding, CSS, and will soon begin flash tutorials.
Though much of Lynda's information is a repeat of the "Visual Quickstart Guide," my tutorial experience has only enhanced my understanding of the material.
The ability to subscribe and use Lynda.com does come with a price. If you are serious about teaching yourself web-design, or any other new programs/software, then I can assure you the investment is worth it.
Though much of Lynda's information is a repeat of the "Visual Quickstart Guide," my tutorial experience has only enhanced my understanding of the material.
The ability to subscribe and use Lynda.com does come with a price. If you are serious about teaching yourself web-design, or any other new programs/software, then I can assure you the investment is worth it.
Monday, October 5, 2009
Domain Update!
UPDATE:
I just registered for three domains!
- annemorningstar.com
- annemorningstar.net
- annemorningstar.org
These are under my ownership for the next two years, and I plan to renew after that. Now all I need to do is create my site, find a web host, and upload my complete website!
Are you looking for a company to order your domain from? If so, then I recommend Network Solutions (networksolutions.com). The registration process was easy and, as far as I can tell, Network Solutions is a reliable company. For instance, no more than 10 minutes after completing my order, I received an confirmation e-mail and tested the availability for each of the above domains; I went to godaddy.com in an attempt to "buy" each of the domains. FAILURE to purchase! SUCCESS for me as the official owner! All of my domains are listed as "Taken." Because Network Solutions has put my ownership into the system, no other competitor has the ability to sell the options.
*It is acceptable for you all to do a little dance at this point ;)...I AM!
I just registered for three domains!
- annemorningstar.com
- annemorningstar.net
- annemorningstar.org
These are under my ownership for the next two years, and I plan to renew after that. Now all I need to do is create my site, find a web host, and upload my complete website!
Are you looking for a company to order your domain from? If so, then I recommend Network Solutions (networksolutions.com). The registration process was easy and, as far as I can tell, Network Solutions is a reliable company. For instance, no more than 10 minutes after completing my order, I received an confirmation e-mail and tested the availability for each of the above domains; I went to godaddy.com in an attempt to "buy" each of the domains. FAILURE to purchase! SUCCESS for me as the official owner! All of my domains are listed as "Taken." Because Network Solutions has put my ownership into the system, no other competitor has the ability to sell the options.
*It is acceptable for you all to do a little dance at this point ;)...I AM!
Sunday, October 4, 2009
Designing My Logo
Hello Everyone...
I have been attempting to design an affective logo ever since my senior year at MIAD. What do I need to take into consideration for this design?
Here are my thoughts:
- Recognizable up close and from a "thumb nail" distance
- Clean
- Line Weight
- Balance
- Composition
- All of the elements and principles of design
- Not so overpowering that it takes away from other information (when it is included as a letterhead, in end credits, etc.)
- Strong enough to stand alone
- The last point I would like to make is in regards to my last name. It is no secret that the word "Morningstar" lends itself to a variety of creative imagery (rising suns, stars in the sky, and any other hieroglyph-esque pictures). Therefore, yielding a successful logo should be a sinch, right?
At first I did not feel that exploiting my last name would be the best option. What an easy way out! Where would my challenge be? Plus, wouldn't people start thinking "Oh, look at the morning star. Typical!" The last thing I want to be is "typical."
I began sketching concepts a few weeks ago. For inspiration, and to see what works, I googled images for "logos." About 99% utilize letters in a graphically clever manner. This influenced me to consider the letters in my name, in particular my initials: A and M.
As my drawings evolved, a variety of logos started taking form. I manipulated my initials to the point of abstraction, gave them character, and tried to maintain the elements and principles of design. Once I felt confident in a logo I would ask others to critique the design. The first option I was attached to was not as well received as i had hoped. Though recognizable, many equated my design to that of an abstracted bunny, lion, goat, and other "creatures." Back to the drawing board!
My sketching process continued last night. Watching my pen's ink flow onto the acid free paper of my sketchbook was hypnotizing. I drifted in and out of a dream-like state, asking myself questions like "who am I as an artist?" "how do I convey my artistic style and characteristics through a logo?" "am I the only artist making this task more difficult that it needs to be?" That is when I realized, being literal could still produce an unexpected result. In other words, maybe I should take advantage of my last name's potential; here lies my challenge.
Instead of continuing work on my logo, I decided to begin conceptualizing my "bumper." A bumper is a short, 3 - 8 second clip introducing the producer(s) of a film, animation, website, etc. (think of the Roaring Lion, Pegasus, Lightning Bolt, Statue of Libery, and many others that occur at the beginning of a movie). What should mine be? How will my bumper and logo work together?
Although I have completed my bumper's storyboard, I will not be sharing it with you today; I have yet to animate it, and to explain would be too difficult. However, to stimulate your imagination, my bumper will include a sunrise, pasture, silhouetted fence, shift in camera angles, and a zoom out. Finishing my storyboard allowed for a natural progression into the design of my logo. I believe the two together are an affective representation of me, my artistic style, and my life.
If you are planning to design your own logo, I encourage you to dig deep into yourself: Who are you? What is your name? What type of work do you do/who will your audience be? It will also be important to take the elements and principles of design into consideration. Sketch a lot! Think of your designs as a rubber-band; expand your ideas as taught as they will go, and then bring yourself back. This will allow your concepts to grow. Have others critique your ideas and give their input, but remember that this is ultimately a representation of you.
I have been attempting to design an affective logo ever since my senior year at MIAD. What do I need to take into consideration for this design?
Here are my thoughts:
- Recognizable up close and from a "thumb nail" distance
- Clean
- Line Weight
- Balance
- Composition
- All of the elements and principles of design
- Not so overpowering that it takes away from other information (when it is included as a letterhead, in end credits, etc.)
- Strong enough to stand alone
- The last point I would like to make is in regards to my last name. It is no secret that the word "Morningstar" lends itself to a variety of creative imagery (rising suns, stars in the sky, and any other hieroglyph-esque pictures). Therefore, yielding a successful logo should be a sinch, right?
At first I did not feel that exploiting my last name would be the best option. What an easy way out! Where would my challenge be? Plus, wouldn't people start thinking "Oh, look at the morning star. Typical!" The last thing I want to be is "typical."
I began sketching concepts a few weeks ago. For inspiration, and to see what works, I googled images for "logos." About 99% utilize letters in a graphically clever manner. This influenced me to consider the letters in my name, in particular my initials: A and M.
As my drawings evolved, a variety of logos started taking form. I manipulated my initials to the point of abstraction, gave them character, and tried to maintain the elements and principles of design. Once I felt confident in a logo I would ask others to critique the design. The first option I was attached to was not as well received as i had hoped. Though recognizable, many equated my design to that of an abstracted bunny, lion, goat, and other "creatures." Back to the drawing board!
My sketching process continued last night. Watching my pen's ink flow onto the acid free paper of my sketchbook was hypnotizing. I drifted in and out of a dream-like state, asking myself questions like "who am I as an artist?" "how do I convey my artistic style and characteristics through a logo?" "am I the only artist making this task more difficult that it needs to be?" That is when I realized, being literal could still produce an unexpected result. In other words, maybe I should take advantage of my last name's potential; here lies my challenge.
Instead of continuing work on my logo, I decided to begin conceptualizing my "bumper." A bumper is a short, 3 - 8 second clip introducing the producer(s) of a film, animation, website, etc. (think of the Roaring Lion, Pegasus, Lightning Bolt, Statue of Libery, and many others that occur at the beginning of a movie). What should mine be? How will my bumper and logo work together?
Although I have completed my bumper's storyboard, I will not be sharing it with you today; I have yet to animate it, and to explain would be too difficult. However, to stimulate your imagination, my bumper will include a sunrise, pasture, silhouetted fence, shift in camera angles, and a zoom out. Finishing my storyboard allowed for a natural progression into the design of my logo. I believe the two together are an affective representation of me, my artistic style, and my life.
If you are planning to design your own logo, I encourage you to dig deep into yourself: Who are you? What is your name? What type of work do you do/who will your audience be? It will also be important to take the elements and principles of design into consideration. Sketch a lot! Think of your designs as a rubber-band; expand your ideas as taught as they will go, and then bring yourself back. This will allow your concepts to grow. Have others critique your ideas and give their input, but remember that this is ultimately a representation of you.
Monday, September 28, 2009
The Notecard Test
I have begun designing my website. Yes, the ACTUAL design. However, it may not be in a format most of you are expecting. In fact, my method does not require the use of a computer. Based on advice given from an Instructional Design teacher, from the IU Education Department, I have decided to utilize 3X5 notecards as my initial design facilitator. How does this work, you ask?
The process:
1) Write the header for each heading/tab you plan to create for your site
I will be using the following headings: Home, Portfolio, About Me, and Contact
2) Include the navigation options from each heading
Be sure that each heading has an option to go "Home," and any other obvious navigation options
3) Have a couple of people attempt to navigate through your "site"
Should there be a need for a new heading, add another notecard
4) Continue this process until you feel confident that your website is "user-friendly" and navigable
So far I have had five people attempt to navigate my site. There have been a few corrections needed, such as: clearly defining subheadings, making additional options from each page clear, and indicating the type of information that will be found on each page. I plan to test the notecards on five more people before moving on to phase two of the test.
Phase two will require me to draw a mock up of each page on the notecards. This will allow my testers to see what the interface will look like, which will demonstrate how visual navigation will occur. Many of my survey results will come into play with this phase, in terms of: placement, graphics, balance and composition, etc.
This notecard process is the first of many tests I plan on using to help uncover the ease and usability of my website. I will keep you posted!
The process:
1) Write the header for each heading/tab you plan to create for your site
I will be using the following headings: Home, Portfolio, About Me, and Contact
2) Include the navigation options from each heading
Be sure that each heading has an option to go "Home," and any other obvious navigation options
3) Have a couple of people attempt to navigate through your "site"
Should there be a need for a new heading, add another notecard
4) Continue this process until you feel confident that your website is "user-friendly" and navigable
So far I have had five people attempt to navigate my site. There have been a few corrections needed, such as: clearly defining subheadings, making additional options from each page clear, and indicating the type of information that will be found on each page. I plan to test the notecards on five more people before moving on to phase two of the test.
Phase two will require me to draw a mock up of each page on the notecards. This will allow my testers to see what the interface will look like, which will demonstrate how visual navigation will occur. Many of my survey results will come into play with this phase, in terms of: placement, graphics, balance and composition, etc.
This notecard process is the first of many tests I plan on using to help uncover the ease and usability of my website. I will keep you posted!
Where To Begin My Design
Where do you begin when attempting to teach yourself web-design? I recommend interviewing and surveying people for any project you begin: films/animations, games, websites, other interactive interfaces. Though it may seem obvious, interviewing and surveying current website visitors is the crucial element in the pre-production phase of a website. Let us think for a moment, who will be visiting your site? People you interview and other Internet users. Take advantage of this fact and utilize the information gained as the foundation for your design. Thanks to my interviewees, I have a growing list of websites waiting to be researched. I am also gaining knowledge in what audiences find appealing and annoying in web design. The following lists are also continuing to grow (NOTE: due to a large number of interviewees, a few of the listed items listed may be considered both positive and negative):
Likes (what works)
Links located at top and/or bottom
Links to other websites
Be sure to open new sites in a different tab
Tabs on left
Easy navigation
Placement of information
Mouse changes to finger when rolling over a link
Good graphics
Pictures, photos, other graphics
Thumbnails
Do NOT open in new windows
Video
Separate pop-up window(s)
Being in control of what you click
Soft colors
Flash-based
Tells narrative/story rather than information
Sound affects/music
ex) With “Sound Off” button
Make button easy to locate
Condense information so easy to read
Depth
Consistency
Well organized
Balanced shapes
Innovation
Less is more (Keep It Simple Stupid = KISS)
Links within text
Fades in and out depending on where mouse is clicking
Change color of links after clicking
Good mix of text and graphics
Dislikes (what does not work)
Scrolling
Too much information on one page
Long loading
Unclear navigation
No good way to get back to homepage
Bright colors
Too much white
Too much of one color
Small text, font sizes, etc.
Sans-serif
Search features never work = useless
Introductions/videos
Unless for artistic site
Option to skip
Not being able to get everywhere from “Home Page”
Advertisements
Music/sound affects
Pop-up windows when rolled-over
Rollovers
Adding to favorites, but the wrong page is added = make favorites for the “Home Page”
Graphic menu that doesn't work
ex) Disappears after you roll-over, so you have to rush to click
Videos/Audio that play immediately
Main window and inside window can scroll
Roll-Overs
Depends on the placement
Menus that say "Coming Soon"
Likes (what works)
Links located at top and/or bottom
Links to other websites
Be sure to open new sites in a different tab
Tabs on left
Easy navigation
Placement of information
Mouse changes to finger when rolling over a link
Good graphics
Pictures, photos, other graphics
Thumbnails
Do NOT open in new windows
Video
Separate pop-up window(s)
Being in control of what you click
Soft colors
Flash-based
Tells narrative/story rather than information
Sound affects/music
ex) With “Sound Off” button
Make button easy to locate
Condense information so easy to read
Depth
Consistency
Well organized
Balanced shapes
Innovation
Less is more (Keep It Simple Stupid = KISS)
Links within text
Fades in and out depending on where mouse is clicking
Change color of links after clicking
Good mix of text and graphics
Dislikes (what does not work)
Scrolling
Too much information on one page
Long loading
Unclear navigation
No good way to get back to homepage
Bright colors
Too much white
Too much of one color
Small text, font sizes, etc.
Sans-serif
Search features never work = useless
Introductions/videos
Unless for artistic site
Option to skip
Not being able to get everywhere from “Home Page”
Advertisements
Music/sound affects
Pop-up windows when rolled-over
Rollovers
Adding to favorites, but the wrong page is added = make favorites for the “Home Page”
Graphic menu that doesn't work
ex) Disappears after you roll-over, so you have to rush to click
Videos/Audio that play immediately
Main window and inside window can scroll
Roll-Overs
Depends on the placement
Menus that say "Coming Soon"
Cracking The Code
I have uncovered a highly useful tool to enhance my learning of (X)HTML coding. Start by printing out a website’s “page source” information; I suggest printing with font size 14 – 16 and double-space the document, as it is easier on the eyes. Grab your “Visual Quickstart Guide” and a pencil. As you read “Quickstart” follow the tutorial examples in the book to mark where the elements take place in your selected webpage’s source code. Pencil will not only allow for you to erase, but also gives your eyes a break from the harsh content of (X)HTML coding.
NOTE: This process may be reversed. In other words, try to pick out an element within the coding. Chances are there is a meaning behind your selection. The back of your “Quickstart Guide” explains what each abbreviation, symbol, and configuration stands for. Many of the explanations may also be found in the corresponding chapter to “Quickstart” (check the Table of Contents in the front of the book).
NOTE: This process may be reversed. In other words, try to pick out an element within the coding. Chances are there is a meaning behind your selection. The back of your “Quickstart Guide” explains what each abbreviation, symbol, and configuration stands for. Many of the explanations may also be found in the corresponding chapter to “Quickstart” (check the Table of Contents in the front of the book).
Welcome To My Blog
Hello Everyone...
My name is Anne Morningstar. I am a graduate student in the Master of Science (MS) program through the department of Telecommunications at Indiana University - Bloomington. I hold my Bachelor of Fine Arts degree (BFA) in Animation from the Milwaukee Institute of Art and Design. Before completing my studies, Spring 2010, I will construct and publish a personal, artistic website in order to exhibit my portfolio to the masses.
This Blog shares my progress and experiences as I journey through the world of Web Design! I have begun teaching myself the ins and outs of what it takes to construct a successful website. However, I believe input from others will only enhance my ability to create an affective site. Therefore I will be posting various information, thoughts, and questions throughout the process in hopes of receiving feedback from you. In addition, I hope my Blog will inspire others to either begin, finish, or continue working on their own website(s).
Please feel free to comment and/or give suggestions and feedback!
Thanks so much, and I look forward to hearing from you.
Happy Monday:)...
Best,
Anne Morningstar
Graduate Student
Telecommunications - Indiana University
2008 - Present
My name is Anne Morningstar. I am a graduate student in the Master of Science (MS) program through the department of Telecommunications at Indiana University - Bloomington. I hold my Bachelor of Fine Arts degree (BFA) in Animation from the Milwaukee Institute of Art and Design. Before completing my studies, Spring 2010, I will construct and publish a personal, artistic website in order to exhibit my portfolio to the masses.
This Blog shares my progress and experiences as I journey through the world of Web Design! I have begun teaching myself the ins and outs of what it takes to construct a successful website. However, I believe input from others will only enhance my ability to create an affective site. Therefore I will be posting various information, thoughts, and questions throughout the process in hopes of receiving feedback from you. In addition, I hope my Blog will inspire others to either begin, finish, or continue working on their own website(s).
Please feel free to comment and/or give suggestions and feedback!
Thanks so much, and I look forward to hearing from you.
Happy Monday:)...
Best,
Anne Morningstar
Graduate Student
Telecommunications - Indiana University
2008 - Present
Subscribe to:
Posts (Atom)
