Thursday, April 30, 2009

FontTester

So the website http://www.fonttester.com is super excellent. It has three columns of text that you can format differently using the tools on the left side of the screen, which allow you to use different CSS properties and adjust the corresponding values in order to typographically format your text. You can then just copy the CSS that it writes for you.

Excellent!

Thanks, Mr. Gaussian, wherever you are.


With love from NatalieDee.

Tuesday, April 28, 2009

CurvyCorners

So I just found the website http://www.curvycorners.net/, which provides javascript that makes rounded corners in CSS. I read that rounded corners were supposed to be included in CSS 3 [at the w3c website], but they ultimately decided not to include it. CSS4 better have it. Why is it so complicated to get rounded corners??

In class: final thoughts

The most beneficial assignment for me was an in-class assignment before module four where we had to create three different pages using the same (X)HTML and create three different style sheets.

I created these:The assignment allowed me to research explore different selectors and properties in CSS, and see the resultant effects of each line of code. I didn't know anything about CSS before this class,
and this mini-assignment really helped me learn quickly how to use style sheets and how effective CSS can be.

The purpose of a web author is to create and maintain a site that effectively conveys the content, message, and sentiment that the client wants the site to convey. I would say that the duties of a web author include:
  • Branding
  • Graphic creation
  • Marketing
  • Timely updates
  • Making sure that the website is entirely functional at all times, in all [most ;)] browsers [curse you, backwards compatibility!]
  • Coding
  • Proof-reading content (including images, layout, and text)

Saturday, April 25, 2009

Excellent branding: Sophistimom

A friend of mine sent me a site via StumbleUpon, and I couldn't help but notice the excellently well-defined branding. The site, Sophistimom.com, uses lots of white space and the colors white, light blue, and light maroon. The vertical background, ornate header font, leaf logo, and "S" favicon add to the defined personality of Sophistimom. The Sophistimom blogs about gourmet recipes and includes photos of the excellent presentation. The site effectively conveys an air of sophistication, classiness, and professionalism, but maintains the mom's personality.

Friday, April 24, 2009

Facebook addiction

We've all joked about being addicted to Facebook, but in this article I read, this woman really is a Facebook addict. Spending up to 20 hours a day on facebook has caused her relationship with her daughter and family to suffer. [20 hours a day leaves her only four hours to... sleep? Work? How does she survive?] Although at least half of the time she spends on Facebook has to do with her work, she no longer has time to help her family with anything. Facebook addictions can be a sign of social dysfunction, as those addicted are living in a false reality.

Yikes.

[Article from CNNHealth.com]

Wednesday, April 22, 2009

The story of the Twitter logo

The ubiquitous Twitter image depicting a white bird, brown coiling branch and pale blue "weathered" background was created by Simon Oxley. It was purchased by Twitter for only six dollars! Twitter is the 84th most popular site on the worldwide web, as measured by hits. You would think Oxley would want a little more for the graphic than he's gotten. At first, Oxley asked for the site to credit him for his the symbol. However, Twitter has not yet credited him for his work. I'd be more than a little mad.

[Article from Wired]

Sunday, April 19, 2009

Online shopping

Congress is working on legislation that would authorize sales tax on items purchased online. The legislation would require shoppers to pay their home state's sales tax on items purchased from outside their state. The push is due to the bad economy, and sales tax revenues have decreased by 6.1%.

[Source: CNet News]

To-do list

I thought I'd make a to-do list for this class, so I can organize my web edits and make a game plan to finish up the semester. I need to:
  • Edit my navigation for my main page for module 4.
    • Change the colors of the divs
    • Change the positioning of the columns
    • Switch the resume and sketches text to make all the resume content blue
    • Change the hover features
  • Add sketches
  • Add photos
  • Link to blog
  • Add design philosophy page
Module 5:
  • Make two more gradients
  • Make three logos
  • Make two more headers, and finish the first
Honors Option:
  • Do everything

Whiten your teeth!

Photoshop CS4: White Teeth
The narrator selects his teeth by using the magic wand tool, and then whitens them by using the hue & saturation dialogue box, under adjustments. To return the shading between teeth that provides the tooth definition, the narrator adjusts the levels of the teeth selection.

Tuesday, April 14, 2009

From class:

Who's visiting the site? Friends, family, potential employers, potential clients, professors, maybe design school admissions representatives.
What does she what to know? What does he want to do? They want to see Kyle's work (through drawings, sketches, and photos), learn about Kyle and his designs(through his resume and design philosophy), and keep in touch with Kyle.
What potential questions/tasks will you have for your users on Thursday? List at least five possibilities.
  • Find Kyle's phone number.

  • What is Kyle's email address?

  • Who does Kyle make clothes for?

  • What is your favorite sketch by Kyle?

  • What is your favorite garment by Kyle?
Mike Padilla discusses compromise in regards to creating the best user interface (UI) design and even maps out the benefits and costs with particular design elements. What are at least four design benefits and costs you can list in this manner for your final site design?



Point & clickIntuitiveAdditional time required for interaction due to increase motor skills required.
Full textEasily understoodRequires additional space
Text linksAlways understoodMust be read, do not stand out as actionable items as much from other text
Small fontMore info per screenMore difficult to read for some users
Do you feel all of the costs are truly negative? Why or why not?
With point-and-click navigation,
the minimal additional time required for user interaction due to increase motor skills required is beneficial, because they are looking at Kyle's website longer, which is good from a marketing standpoint. The small font on the resume page is probably a bad thing and I should enlarge it. Because the design is very minimalist and simple, the full text and text links are okay, especially since each text area is blocked off in color.

Saturday, April 11, 2009

You Suck at Photoshop #5: Select Color Range:
2:20 totally makes fun of people who like to magic-wand everything in a color range instead of using the "select color range" tool. I never knew about the select color range tool! [Embarrasing, I know.] Good to know. The color range tool is effective for pulling things off of their backgrounds. Just make sure that when you go to Select --> Color Range that you turn up the fuzziness so that you don't have a white (or whatever color your background was) fuzzy shadow around the foreground object you're extracting.

HyperStudio!

I finally, after three months, I remembered the name of the Apple slide show software from 1997: HyperStudio. Check out these screen shots:






Thursday, April 9, 2009

Photoshop Eye Editing

Awesome Eyes In Photoshop, a tutorial on YouTube.com presented by PhotoshopTalent.com teaches how to use the pen tool, dodge tool, burn tool, and sponge. I never really understood what those tools did or how to use them, so this was a very helpful tutorial for me.

In Photoshop, if you go to Image --> Adjustments --> Curves you can brighten a blue eye by selecting the blue channel and raising the curve.

I think this tutorial will come in handy. I've had to try to remedy red eyes many times before, but I usually suck at it. I usually try to replace the pupil by using the brush tool to make a new pupil, but the narrator selects the pupil area and deletes it, after making sure that the background color is black. He then goes back and adds the white eye-reflection mark. Duh! I felt so stupid after I saw that.

Wednesday, April 8, 2009

This just in: even the creator of Comic Sans, Vincent Connare, hates the font.

"If you love it, you don't know much about typography," Mr. Connare says. But, he adds, "if you hate it, you really don't know much about typography, either, and you should get another hobby."

Yikes.

[From The Wall Street Journal]

Tuesday, April 7, 2009

Bethany: Learn to use a computer

I've learned a lot about typography throughout this semester and reading random pages about web design online. I've linked a lot of typography tools and articles throughout this blog, so hit up the "typography" tag below this post.

I definitely went crazy during module four. After working on my site on my laptop, here in 317, and on a couple writing center laptops, I had much older version of the web pages on my laptop. When I synced my laptop with my AFS space through an FTP server, via Dreamweaver, Dreamweaver uploaded the old version of my site. It did this THREE TIMES. I still don't know what I did wrong, only that the correct answer to "Update links?" is "HELL NO." I ended up having to redo about four and a half hours of work. During the final four game. Woot woot.

There was one part of my site that I could not figure out how to re-make. I had a border on the left side of a div, which had text in it, and before one of the three retro-uploads, the line was right next to the text. After Dreamweaver got real cool and intuitive, I couldn't re-make that border. The line was about 200px to the left of the text. I really want that line back!! Padding and margin for the div (and the div next to it) are set at zero. I really have no clue how to fix it. Help?

When doing my write-up for module 4, after I made the web pages, came up with more than a handful of things I want to change on the sites. The things I want to fix are mostly for ease of viewing and cross-browser compatibility (which are very important things). I mixed pixel and percentage values in my style sheets, and all of the text on the resume page is too small. I want to fix those things, at the very least, before the page is published.

Sunday, April 5, 2009

"Facebook saved my life."

A 16-year-old boy from Oxfordshire apparently, "...was using the social networking site late on Wednesday night and sent a private message to a girl in Maryland saying that he was going to harm himself." The girl then told her mom, who told the local police, who contacted a "special agent" at the White House, who contacted the British Embassy in Washington and finally the police control room near Oxfordshire.

He had overdosed, but was still conscious.

[Story from The BBC]

Friday, April 3, 2009

Youtube = doomed?

Youtube is expected to lose $470 million due to high operating expenses with relation to advertising revenues. They expect to make $240 million this year against $711 million in operating expenses. Youtube's CEO said that they would be careful in making large purchases, such as servers, in the future.

[Source: BusinessInsider.com]

Friday, March 27, 2009

BakerTweet

BakerTweet.com. They made a device, pictured right, that bakeries can use to tweet about what they just made. There is a mess-proof box with a dial that the baker can turn to select what they made, and then, like magic, it's twittered. Those who follow the baker's tweets can get the tweets sent to their cell phone, in order to get the freshest, most delicious baked goods as soon as possible, and fresh from the oven.

Technology + pastries = nom nom nom.

Tuesday, March 24, 2009

Audience Considerations

The audience for Kyle's site will mostly be friends and family, and maybe some professors, potential employers, and potential customers. Given that, I think the navigation topics of bio, contact, photos, resume, and sketches are appropriate. I will have a link to the honors option site, which is a portfolio for his kidswear collection. Because the audience members will be interested in different topics (the employer might want to look at his resume, sketches, and contact info, but the friend might want to read everything), I think it's best for this site that I make the navigation based on content, as opposed to based on user relationship. If the family member doesn't click on "employers", I don't want them to miss Kyle's resume.

If I had to design for audiences, though, I would put his resume, design philosophy, bio, and contact information under a navigation topic like "employers" or "Kyle data" or something. I would put photos and sketches under a heading like "eye candy", and put his design philosophy and a link to his kidswear collection portfolio site under a heading like "customers" or something.

The website audience can be divided into many categories:
  • Friends // Family // Employers // Customers
  • Those who care about Kyle // Those who mostly care about Kyle's work
  • Potential bosses // potential clients // people Kyle doesn't need to impress
  • Moms who might buy kidswear from Kyle // people who will buy nothing // potential employers // professors

Sunday, March 22, 2009

Honors Option Colors

These are the colors that I want to use for the navigation of my honors option portfolio site for Kyle:

You can also download the hex and RGB values or see the ColourLovers page.

For the header, I want to use these colors on white:



Here's the colors all together:



Check out the ColourLovers page or download the hex and RGB values.

id vs. class

Use id selectors for divisions over classes if you only need to use it once within a file.

Your CSS for an id selector named "container" might look like this:

#container{
width: 80%;
margin: auto;
padding: 20px;
border: 1px solid #666;
background: #ffffff;
}

The HTML to display that ID-ed division is this:

<div id="container">Contained content</div>

Your CSS for a class would look like this:

.tealtext{
color: #008080;
font-weight: bold;
}

And you invoke that text with this HTML:
<span class="tealtext">This text is teal.<span>

CSS Basics

In my quest to begin (and eventually complete) Module 4, I came across CSSBasics.com. It's basically 18 chapters (read: web pages) that discuss CSS basics, starting with internal versus external stylesheets or inline styles, and ending with position and pseudo elements, and a .PDF link to print. I definitely want to read all of that when I have time... or when I find out I need the information when I'm three hours away from the Module 4 deadline. ;)

Saturday, March 21, 2009

HTML Punctuation Code

I know there's a more descriptive term for what I'm talking about. (What is it?)

More specific HTML punctuation code:

&#8216; = ‘ = opening single quote
&#8217; = ’ = closing single quote (or an apostrophe)

&#8220; = “ = opening double quote
&#8221; = ” = closing double quote

&#8242; = ′ = single prime (not in HTML 4.01)
&#8243; = ″ = double prime (not in HTML 4.01)

&#8211; = – = en dash (shorter)
&#8212; = — = em dash (longer)

&#8230; = … = ellipsis

-Source: AListApart.com

Friday, March 20, 2009

Facebook Faux Pas

Way to go, Facebook! Apparently 560,000 of your 2.1 million monthly active users don't like your new site design (Source: Washington Post article). Even the Facebook employees hate the redesign, and it seems as if Mark Zuckerberg (owner of Facebook) doesn't care, and is ignoring the pleas for a new redesign. He has even tried to buy Twitter for $500 million in cash and stock. Having failed that, it seems as if he tried to make Facebook into the "new" Twitter. Wow. Listen to your users, Mark; make the site what they want it to be, otherwise they'll leave.

Way to fail, Mark. Way to fail.

Typography Tools!

I found some cool typography-helping sites. Dig it:

Typetester.org -This site lets you format three columns of text - all with adjustable size, leading, tracking, color, background color, alignment, word space, and font. Then, the site prints out, in the columns, lorem ipsum text in your selected typeface with different formatting: bold, italics, uppercase, small caps, regular, and combinations of the above.


CSSTypeSet.com - you can use buttons to change the typography, and the text is displayed with your selected formatting on the right, and the CSS code is displayed in the text box on the right. I like it to see letter-spacing, word-spacing, and line-height properties, and see the exact values; it's hard to guess those numbers.

Design Police & Drop Caps

So this Design Police site is hilarious. It has printable stickers/piece of paper that you can cut out and tape on a printed document that are basically editing remarks. Only some are funny like, "Severe Lack of Creativity" or "Awful Library Stock Photo". There are 5 pages, check it out.

Drop caps are where it's at, also. I just wanted to leave the code in my blog so I'd remember how to do it. :)

Edit: that drop cap technique definitely does not work in blogger.

Horizontal Centering With CSS

I was doing some research about how to center page elements (both vertically and horizontally), and thought I'd share my findings here. I couldn't find anything about centering elements vertically, but there are actually two ways to go about centering elements horizontally using CSS, and only one is IE5 compatible.

Centering: Negative Margin
First, position the element's left edge at the horizontal center of the page using "position:absolute; left:50%;". Then, set the box's left margin is to the opposite of half the element's width using "margin-left:-266px;". Like this:

body {margin:0px; padding:0px;}

#Content {
position:absolute;
left:50%;
margin-left:-266px;
}

Centering: Auto-width margins
The other way is to center the element by setting left & right margin widths to "auto". This CSS is not supported in IE5, however. To remedy this, [kind of], we can use the "text-align" attribute. IE5 incorrectly applies the CSS "text-align" attribute to block-level elements. Declaring "text-align:center" for the containing block-level element (often the BODY element) horizontally centers the box in IE5. There is a side effect of this workaround: the CSS "text-align" attribute centers the inline content. when centering in this way, you should explicitly set the "text-align" attribute for the centered box, counteracting the effects of this crappy way to center things. Honestly, just use the other way. Code as follows:

body {
margin:50px 0px; padding:0px;
text-align:center;
}

#Content {
width:500px;
margin:0px auto;
text-align:left;
}

Honors Option Nav CSS

I can't decide whether I want to to vertical or horizontal navigation for my honors option site. The challenge is to only use one graphic, the header (which will have a transparent or white background... which would load faster, Joy?) for the navigation. I'm planning on using lots of CSS. :)

Whether I choose horizontal or vertical navigation, I want to use classes like this:

a.red:link {color: #009900;}
a.red:visited {color: #999999;}
a.red:hover {color: #333333;}
a.red:focus {color: #333333;}
a.red:active {color: #009900;}

And the code for the first nav option would look like this:

<a class="red" href="bio.html">Bio</a>

Now I need to learn how to make all of the boxes the same with. I know Entropy4Atrophy had a post about horizontal and vertical navigation. Now I just have to read it (again) and understand it.

Tuesday, March 17, 2009

Back from break

During our last class, we made three pages, all with identical HTML code and content, that used three different style sheets, which made each page look very different.

Over break, I drove my house-mate Kyle, for whom I'm creating two sites for my final project and honors option, and myself back to East Lansing, and we discussed his sites more. I'm excited to make an awesome-looking portfolio site with bio, resume, and design philosophy pages that use different, yet equally extensive and awesome, style sheets.

Thursday, March 12, 2009

Get paid, son

This page from TemplateTuning.com gives prices for them to design different elements for a client's website or page. Photoshop image slicing is $80 for a home page, creating a corporate identity is $200, adding new page elements is $15 per element, adding rollover effects is $20 for all buttons, but drop down menus cost $100 to design.

Go forth and make bank!

Monday, March 9, 2009

Loves it

Sites whose design I love:

CentralScrutinizer.it — Love the typography, fonts, main navigation, right column "accessory" elements, embedded videos and music players, and the blog title header font colors that change from post to post.

Boompa.ca — Love the stacked water color pages look. I think they did it with CSS modifications to the HTML body tag, and then they added nested divs with different backgrounds for each column and elements. Check out their style sheet. I don't know how they did the effect where when the user puts their mouse over "Search", the search bar drops below it, and when the user mouses over "Find News by Artist" more sub-nav drops down from there, and disappears when the user removes their mouse. I would really like to figure out how to do that. Especially since it's all text, which means I could use that kind of effect for my honors option site.

The Mystery of 2010 — Love the navigation! Their style sheet shows that they placed their elements using ids and absolute pixel positions. Is that practice compatible with all browsers? Also, the moving background, though super cool, is kind of distracting. But I still love it.

Thursday, March 5, 2009

Image Slicing

I've been wondering for a while exactly how I was going to implement my proposed design for my final project, and now I know: CSS, image slicing, and rollover images. Yes!! :)

I found and watched this tutorial on WebDesign.org that is 15 minutes long (kind of long, I agree) that shows how to use Photoshop and Dreamweaver to make image slices and Photoshop will write the appropriate code for you either in HTML tables (boo!) or CSS (yay!). And I have both programs on my laptop and in 317 Bessey. Yessss. :) So I will likely use that technique for the kidswear portfolio, my final project.

I'm so excited now! :)

Thursday, February 26, 2009

Live streaming from The White House

I started writing this post when I started streaming the live video feed of President Obama's joint session of Congress on 2/24. I stopped fifteen minutes later because the whitehouse.gov bandwidth is shot, and I couldn't watch the address. :(

The site also uses Flash Player 10, which isn't installed on my computer. I tried subscribing to the RSS feed, but the link is broken. There is also a White House blog and a White House youtube channel.

The Washington Post also noticed the shortcomings of the website and did an article about how the Obama campaign team utilized technology throughout the campaign, and how the Obama Administration would like to utilize technology now. It also discusses the bumps in the road the Administration's web team has encountered. Check it out. :)

Saturday, February 21, 2009

Quick Web Typography Guide

Contrast - Make sure that most of the text on page is dark on a light background. You can use light text on a dark background, but only do this for headings, links, and only a few words, because it is more difficult to read. If you can't tell if the contrast between your text and background colors is substantial enough, take a screen shot of the font and colors in use, and convert that image to gray scale.

Size - Make sure your text is large enough to be easily read by old people on a 15 inch MacBook. Don't make people squint and find their glasses. Make your site easy to read.

Hierarchy - Coordinate serif and sans-serif fonts, caps, italics, underlining, bold, contrast, size, and font styling in order to create a visual hierarchy for the reader, and provide text organization.

Space
- Use white space both between lines of text and blocks of text, like paragraphs or columns, in order to focus the readers gaze on the content.

-summary of A Guide to Web Typography

Thursday, February 19, 2009

Flashcard update!

I four-pointed my Spanish exam because of that site. Woop!

Blog Design

This site has an awesome post about designing blogs well. Some highlights include
  • Readability and text styling, including lists, padding, paragraphs, use of bold, and sub-headers
  • Useful sidebars
  • Unique themes: artistic/creative, typography-based, colorful, interesting headers
  • Comment design
  • Effective, usable navigation
  • Images in posts
  • Footers
  • Color design
  • Subscription areas / social media integration
I thought the site gave good examples of some things to consider when designing (or re-designing) a blog. I'm kind of in the mood re-design now.

Generators

When web authors/designers create generators, it would be helpful if they described what factors lead to the end product. I've come across a few in the past few days, and I wonder if the code just generates a random product, or if inputted factors affect the output.

On that note, this Color Name Generator
comes up with what I assume to be random could-be color names from a never-updated list. So if you're not feeling linguistically creative when coming up with color palettes on ColourLovers.com, this site can help you out in naming your palette, if you want to actually utilize the palette in future designs.

Tuesday, February 10, 2009

Cyber flashcards!

I was studying my vocabulary for my Spanish exam yesterday, when I decided I should make flashcards. Even better: internet flashcards. After Googling something like "flashcards" and comparing a few flashcard sites, I found Quizlet.com. I searched for my textbook name, and I found "flashcards" already made for each chapter! You can flip the cards just to review, or it can keep track of which cards you know, and which you don't by analyzing the answer you put in the program. You keep answering the cards (questions) you don't know until there are no cards left. There's nothing to download, but you do have to register. There's a test feature that makes written, multiple choice, matching, and true/false questions to answer, and there are two "speed" games. You can create cards, import cards (from a text or Word file), copy other users's cards, and share cards in croups.

Check out this game with my Spanish vocabulary!

Monday, February 9, 2009

Steak 'n' Shake

Just wanted to note that the Steak 'n' Shake website sucks. The navigation is terrible, the fonts should be sans-serif, they don't have store hours posted, and I think it's ugly. And it takes a long time to load. Also, they don't have nutritional information.

Friday, February 6, 2009

Coding resources

Although HTML Playground lacks swings and slides, it is an extremely helpful and useful tool for those learning HXTML and CSS. The page lets you select a tag (like div>, then explains what the tag does, shows an example of how to use the tag in code, and shows what that code produces, all on one page in four different areas. Additionally, you can click on any tag in the example code, and modify it's attributes (align, border, color, width, etc) using dropdown menus and buttons. Definitely check it out.

MyCelly.com has free, simple CSS layouts. I looked at some of them, and I'm starting to get the idea of CSS. OpenDesigns.org has free CSS layouts that are actually visually appealing.

Also, this site has aspects to take into consideration when designing websites and pages in order to make pages accessible to those with disabilities.

Have a good weekend!

Therefore purple means....?

There's a new study reporting that seeing red makes human accuracy and memory increase, and that seeing blue enhanced the study's participants' creative skills. So, if you want people to remember something specific on your website or page, consider making it red. On the other hand, if you run a creative site for writing, art, or brainstorming, blue would be a great color to enhance the creative ideas you generate.

"The study... said nothing about mixing red and blue to make purple." Bummer. :(

Credit: NYTimes.com

Love colors?

Oh my God. ColourLovers.com. I registered.

To make a palette of five colors, you can pick colors by hex, RGB, CMYK, and/or HSV values. Or by using one of the three sliders or black/white/color field. You can then use that palette to make patterns using the sites selection of vector patterns, including plaids, retro themes, stripes, and more ornate designs. Check out my palettes!

You can also see other users palettes, and search by hex or hue.

Also, they have a really cute favicon.

Wednesday, February 4, 2009

G-Stalk, from Google

Google just introduced new software yesterday that allows users to turn on an application on their cell phone, and Google will share the user's whereabouts with family and friends on a map. The new software, called "Latitude" updates the users location and then shares the user's location with their Latitude friends on a map. Users can see where their friends are in order to meet up, or to stalk them.

The implications for this are frightening. This seems like the next step in our government's progression toward 1984-style Big Brother monitoring.

If you reduce my language, Big Brother, I will cut you. This is double un-good.

How much technology is too much?

Sunday, February 1, 2009

Change.gov = WhiteHouse.gov

WhiteHouse.gov now has a blog!! And a weekly video address that you can stream or download that is about five minutes long. A person could feasibly download an MP4 of the president's speech, and listen to it in the car or while walking to class. Talk about getting information to the constituents and political transparency.... I love it! :)

Also, Change.gov now is pretty much just a link to WhiteHouse.gov.

Check out WhiteHouse.gov 's new design, navigation, and content. I'm way impressed.

RSS feeds = ♥

With Google Reader, I no longer have to go to several sites each day to check for updates. The updates are fed to my Google Reader, and when I log in to Google Reader, it has all my feeds listed for me, with which ones are updated and how many updates there have been. Where ever you see this icon: , you can click and add a page's update feed to your reader program. This blog has a reader, even, so if you wanted to, Joy, you could use Google Reader with your Google account, and get your students' blog updates fed to your reader.

I love my Google Reader. :)

Food for thought.

"Just as I imagine musicians to constantly hear music in their heads, painters see visions." - Alex Grey

If we are artists, designing beautiful sites, sources of information, reference, and leisure for our users, and we use website design as our creative outlet, we should always be using the creativity around us to inspire our work. Alignment, navigation, graphics, colors schemes, fonts. Every aspect has to be thematic in order to make a cohesive, memorable website that users enjoy going to, and return to in the future.

Food for thought.

Groupboard.com!

So in my younger days of doing HTML (I don't know XML or XHTML because those hadn't been invented when I was coding), there was a popular Java applet called Groupboard that everyone had on their expage.com personal websites. I will include the applet here:

launch groupboard

Explore, interact, chat, and draw. You can be anonymous or pick a user name. No registration needed. And the board opens up in a new window, so you can view two pages at once, and hyperlink your chatting friends.

Now it seems like forums and messageboards are more popular, and instantaneous interactions (like AOL's AIM Chat and chatrooms) are more for singles to meet up and for people to use webcams. That kind of thing.

But chatrooms, if held semi-privately, can be a beneficial webspace to interact with others. More simplistic than a program you have to download, with features the user doesn't need, Java based text-and-graphic applets convey information in a very simplistic fashion that leaves the user focused on the content, as opposed to the method of communication.

Until next time.

Friday, January 23, 2009

Ain't nothin' but a G Thang

Google's new favicon - the tiny logo next to the URL bar that shows a user who's website they're on, was actually created by an undergraduate computer science major in Brazil. The new favicon is the third in a year for Google. Pepsi also redesigned their logo recently. Some theorize that the logo redesigns bring more attention to the company. Additionally, consumers look for companies that are constantly improving and reinventing themselves.

Some people think that the new icon is hideous. That's okay. The favicon might not be there for long.

Homokaasu.org

If anyone needs the full text of the "Lorem Ipsum" bit for design templates, you can find it here.

Also, The 80zer is a pretty hilarious thing I found, where you can type in any web address, and the program will make it appear as it would have in the 1980s. MIDI music, moving text and graphics, hot pink, Poison photos, rainbows... it's fantastic. I found it works best with simple HTML pages, as opposed to pages written in XML or XHTML.

The same page that hosts the 80zer has a program you can use either through the site or download to your hard drive to use. The Rasterbator takes uploaded images and blows them up, formatting them into a huge graphic pdf file that you can piece together, like a puzzle with a bunch of pieces that are 8.5 by 11, and put up on a wall as art. My house is planning on rasterizing a handful of images from Alice In Wonderland (the book) and using Mod Podge to adhere them permanently to the wall. Check out some of the cool examples that have already been done.

+3 Internet.

Angel or demon?

MSU's Angel and I have a love-hate relationship. I love the accessibility of resources, syllabuses, ability to contact classmates, and taking online quizzes. However, I think the interface could be worked on. It's very simplistic, almost to the point of being primal: very small text boxes in which to input huge papers, only one set of generic headings with no sub-headings, and my least favorite aspect of Angel is that when I'm typing in a text box to submit something to a professor, it doesn't periodically save my work, a la Gmail. I definitely lost a finished assignment by navigating away from the page accidentally in class the other day. Gmail saves your email drafts as you work on them. I think this is a relatively easily implimentable feature that would save students and professors a lot of time and grief.

Worse than Angel, though, is Lon-Capa. It's interface, navigation, and organization are equally bad, but the site is inconcievably slow. This is extremely frustrating when you're completing homework against a deadline, and the page won't even load the question or check your answer.

I'm so glad I don't have CAPA homework this semester. College of Nursing: look at me now!

Reincarnation?

For my WRA 395 class, Writing Center Theory, I had to create an avatar for myself on Second Life. For those of you unfamiliar with this software, it's essentially an expansive online environment, like a PC game like World of Warcraft, only people just have their characters just hang out and go to virtual concerts and... essentially have a second life. I think, although I haven't gotten to use the software yet because my video card is messed up, that that is an awesome way to hold class, conferences, meetings, and communicate with others. Like any other cyberspace, there are bad guys and spam and viruses, but they are easily avoidable. My professor wants to hold class in Second Life one day of the two that we meet each week. Provided I can get my video card fixed, I'm all for it. I love online learning, especially in the winter. Granted, for some classes, it just wouldn't work, but for this discussion-based class, I think it's great.

Way to go, gamers.

Thursday, January 22, 2009

Inauguration on the Interwebs

So it turns out that Obama Inauguration streaming video and coverage created the fifth highest peak across news websites since it started recording data in August 2005.

The article says that, "The peak for web traffic, according to Akamai, came at 11.45am EST – 4.45pm in the UK – on Tuesday as 5,401,250 web users hungry for news of the inauguration logged on to news sites within a minute of each other."

That's insane. It's awesome that so many more people can easily access information and news relative to their lives, and keep them informed and up to date about the world around them.

In other news, a girl in this class just toured my (co-op) house. Awesome! Avalon rules!! :)

Thursday, January 15, 2009

Vintage vs. Obsolete

I can not remember what the name of this PowerPoint-like slideshow program for Macs is. We used it in elementary school, but not middle school. The year was 1996-ish. I have to wonder if it was specifically made for children, a la Kid Pix. The interface was extremely user- (read: kid-) friendly.

I just did like twenty Google searches for it: "Apple software 1990s", "Clarisworks", "Slideshow applications". My hands are empty. I have literally come up empty-handed.

In slightly-related news, Apple is 31 years old.

In less-related news, I am addicted to StumbleUpon. If you're not familiar, it's a toolbar that you download and install in your web browser. After making an account and inventorying your interests, you can click the "Stumble!" button, and it will load a webpage or site that is related to your interests. From there, you can click the thumbs-up button, showing you like the page and would like to see more pages like the current page you're on, or you can click the thumbs-down button, and Stumble won't pull up pages like that for you anymore. You can also send pages to your friends on StumbleUpon or any email address using the Stumble toolbar. You can stumble categories, type in a tag, or stumble your friends's favorites. You can also stumble photos or videos exclusively. It's fantastic. It has changed the way I use the internet. I like it because I learn a lot about things I am interested in or passionate about, often through news pages that have been created the same day.

Well, I have four Stumbles my friends have sent me in the past twenty minutes. I can't help but to click that button. Until next time....

Tuesday, January 13, 2009

First post!

So, I went on to Angel and checked out some of the "Helpful Design Resources" under "Materials", mostly just for fun. I really like the Color Scheme Generator 2. I have another blog (that I rarely use), and I've always wanted to make it pink, but not so pink that any time a guy goes to the site he feels like he has to close the window, or else his masculinity is in question. Don't get me wrong: this scheme is cute, but what guy is going to want to stay on that page for more than, oh, three seconds? This scheme is so bright and girly, and I love it! But: same problem.

The male-accessible pink page is my goal this semester.

Also, I found this gadget, which is essentially a hex-to-RGB translator, but can also be used to find the exact hex code (or RGB values) of a color you want.

This page is kind of EPIC because it lets you take any image that you like the colors in, and it provides swatches and hex codes for the main colors in the image. Conversely, this site lets you pick colors via a swatch on the right hand side, and finds images on Flickr that have your selected colors in them. Fantastic.

Alright, I've spent way more than five minutes on this. I'm listening to M.I.A. and mentally determining appropriate color schemes for her music videos. Time to purge my mind of color and get workin' on my other homework.