Prompt:
When beginning a web design project, it's a good idea to research other sites that have similar goals and objectives as the site that you plan to build. In other words, you need to check out your competitors (direct or indirect) to find both good and bad ideas, and to find ways to differentiate yourself. You may also choose to do inspirational research, finding sites (or other media) that have effective color palettes, navigational schemes, grid structures, etc.
Find and analyze one or two sites that are similar in nature to your final project site. For example, if doing a website for a cafe, find other cafe/restaurant sites to analyze.
Analyze your chosen site(s). What are the site's communication objectives? How is information structured on the site(s)? What content is emphasized? Is there a theme? How do the design elements function to reveal the theme(s) and objective(s)? Describe what you've learned about designing your final project site based on this competitor/idea research.
The site I am creating for my Final Project is a site called Sparkle Moon. It is a fansite for the series Pretty Guardian Sailor Moon, a live-action drama based on the anime and manga Bishoujo Senshi Sailor Moon that aired on Japanese TV in 2003 and 2004 (and also includes two DVD-only episodes that were released in 2004 and 2005). I first had the idea for it about two years ago, and bought the domain for it back in December 2009, along with the one for my site Myu Corner, a site dedicated to the Sailor Moon stage musicals that ran from 1993 to 2005. I had gotten into these parts of the Sailor Moon metaseries in 2006 (PGSM) and 2007 (SeraMyu) respectively. I only had vague ideas of what I wanted to do with the sites back then - only that they were both going to be info pages, since informational websites seem to be what I am good at. The goal of Myu Corner eventually became a focus on providing info on the omake segments, something that I did not feel was covered enough on other SeraMyu fansites, as well as providing guides to the musicals (complete with trivia) and reviews. Sparkle Moon's goal became tied to providing transcripts of the episodes, which there was a need for since the fansite Shingetsu-PGSM, which had originally been the only fansite with PGSM episode transcripts (and thus a big help to the many PGSM fandubs being made around 2006), had disappeared from the Internet.
I originally opened both sites as Blogger blogs with custom domains. However, I didn't like not being able to do much with the layout, or being limited to only 5 pages. (This was before Blogger introduced the Template Designer, and also when stand-alone pages were only available via Blogger in Draft). So after some calls and some money spent, I transferred the hosting of my sites to GoDaddy, where I had bought my domains. The HTML version of Myu Corner debuted in early 2010 (around March or April). Sparkle Moon, on the other hand, has remained idle and never had a HTML version as of yet.
But no longer. Now Sparkle Moon will make its HTML debut - FINALLY!!
Anyway, this post is about analyzing one or two sites that are similar to my planned one. So here goes!
ANALYSIS
KIRARI-PGSM
The first site I would like to analyze is Kirari-PGSM. This is the only major PGSM general fansite that is still being updated regularly (the others haven't been updated since 2006 or so), so once Sparkle Moon is up, Kirari-PGSM will be a major competitor. Primarily, it will be a competitor in terms of information and possibly in terms of creative content as well (since it also has a fanart page and has a large fanfiction section).
The information on Kirari-PGSM is organized into four sections, contained in a sidebar: Info, Media, FanWorks, and Fun. The Info section includes all the site's information pages (Basic Info, Overall Plot, Character Guide, Cast Guide, Episode Guide, Attacks Guide, Buying Guide, and Wiki). The Media section seems to be the primary one and includes the Galleries, Music, Video Clips, Acts Download, and Music Videos (AMVs) sections. The FanWorks section contains fan-made works and has the most sections: Avatars/Icons, Fan Art, Fan Fiction, Cosplay, Desktops, Pixels, Signatures, and Submissions. The last section, "Fun," is the smallest and contains the Games, Quizzes, TCGs, and Win a Award sections. There is also a secondary navigation area below the header with main links like Home, Site, Credits, etc.
Kirari-PGSM's communication objective is primarily PGSM image-related. On its Site page, webmistress Kali states: "This site was originally created to archive my fan works of the series and as a sort of mini-shrine to the imagery in PGSM." However, it has become a major information source as well, with an episode guide, character guide, and even a small wiki.
Image and media content seems to be emphasized on Kirari-PGSM, which makes sense since its original purpose was to celebrate the "imagery" of PGSM. It has a large image gallery, downloads of all the PGSM episodes, a video clips section, a detailed section on the PGSM music, an AMV page, and lots of image content in the "FanWorks" section, including desktop backgrounds, forum signatures, and avatars.
I'm not sure what the theme of Kirari-PGSM would be. They seem to be image-themed, but they have a lot of info too. So I'm not sure.
The design elements reveal a desire for a site to be clean, usable, and simple - which is what I want my site to be like too. I'm not a huge fan of the ads on the right, but at least they are well-distanced from the content. I'm not sure how I like three-column layouts - and the right column doesn't even show up in the wiki anyway so maybe it's ok. The images are definitely given prominence with the large headers and the amount of image-related content in the site sections (as seen in the navigation sidebar). So I think that even though the site has a lot of info, images are still priority.
What have I learned about designing my site from this site?
I have learned that making a nice, clean layout - even with a lot of info content - is possible. Of course, I could've learned that from any site, I guess. I guess I learned that Kali's totally hand-coded site will be a stiff competitor, meaning that to compete with her I need to make my site worth remembering. I shouldn't have to worry too much about competition from her with my character guides and actor info because her character guides are not as detailed as mine (based on the ones I've written) and I intend to include more actor info than she gives. I might have to worry about her wiki. And I have to remember to follow her Terms of Use if I use anything from her site, because she's very strict about them.
SHINGETSU-PGSM
Remember how I mentioned that site with transcripts that went down? Well, Lisa of Three-lights.net owns it now, and she's rebuilding it. She's not going to re-design it -- just going to rebuild it back to the way it was. So, while some of its info may remain circa 2004, the transcripts will certainly be back. In fact, the ones that were up before are up again. And that means I will definitely have this site to compete with in that regard.
It's hard to determine this site's objectives since not all of the site is back up yet. But the transcripts were always a big part of that site, especially since no other site had them. So I think that was their big draw, and that's something I'll have to deal with.
The site is still in the rebuilding process, but all the links are visible (even though many of them are dummy links at the moment). The content is primarily contained in 5 sections - The Basics, The Story, Nihon Corner, The Album, and Miscellaneous. The home page also contains a 6th section called "Special Places." The "story" section is the largest because it contains the transcripts, as well as screencaps, synopses, and translations of the episode previews given on the series' two official sites.
The transcripts were the most emphasized content on this site, though now it's hard to tell as the site is in rebuild mode. There is also an emphasis on works that were translated by the webmasters, such as magazine interviews. In short, content created by the webmasters was clearly the focus.
The theme seems to be a simple layout with simple colors and design, with only the header getting some special detail. As for content theme, I'm not sure.
The design elements don't tell me much about the theme at all, but that may be because the site is mostly under construction.
What have I learned about designing my site from this site?
Not much, actually - except that if Lisa ever finishes the transcript section, I might be in trouble. But as I'm going to try to include both transcripts of TV-Nihon's subs and the subs done by the fan translation group Miss Dream, I should get ahead of her there. Not that I will have all those up for this project, of course. But eventually, I will.
****
In conclusion, I have high hopes for Sparkle Moon -- if I can really commit myself to it, that is. And the two sites analyzed above are only the two sites I think will be my biggest PGSM-related competition. There are many other sites, like Moonkitty.net, The Oracle, and BSSM-LA, which will likely be my competition as well. We'll just have to wait and see how that goes. I sincerely pray that this project meets with success!
Wednesday, November 16, 2011
Thursday, October 27, 2011
Blog Post #8: What is Semantic Markup?
What is semantic markup? Why should web designers use it? Why is coding "meaning" into the structure of a document important? How does this make the document more accessible and search engine friendly? Why do many designers seek to separate structure from presentation? Can you write examples of how designers might accidentally ignore semantic markup and/or how it should be applied?
Semantics has to do with the meaning of things, and is a topic of considerable importance to people who are much more into literary theory and criticism than I am. Mostly it is discussed in literary criticism like Ferdinand de Saussure's famous work Course in General Linguistics.
Semantics also indicates meaning in term of HTML markup. Basically, it is markup that provides some meaning. It mostly has come about in the more recent versions of HTML (HTML 4 particularly, not sure about HTML 5, but since HTML 5 seems to favor eliminating DIV tags in favor of more specific tags like <header> and <section>, I imagine it also supports semantic markup), in which many of the popularly-used "presentational" tags (i.e., ones that didn't have any meaning besides presentation) were deprecated. This may also have to do with the rise of CSS, since CSS's raison d'être is to take care of the presentational stuff.
I confess I don't know much about semantic markup, but it seems the best reason for using semantic markup is that it is "HTML that describes the content" (as the BBC Guide linked to on the class site says). This, according to the BBC guide, helps avoid browser compatibility issues and also separates presentation from content, which is becoming a more desired idea thanks to the increasing adoption of CSS. I suppose it would also be useful to any non-tech savvy person who might have some reason to be looking at your code. Doing this also would probably help your code stay cleaner (much the way, as I'm learning in MAT 225, coding PHP to do certain things can make your code cleaner because all the PHP is stored server-side and not seen by the client on the other end).
Encoding meaning into a document would make it more user-friendly because it would take into consideration the fact that readers online often scan rather than read articles and so on. It would also make it easier for search engines to index you in a meaningful way (though doing something like submitting a site map to Google also helps).
I think designers seek to separate presentation from structure in HTML because CSS is capable of taking care of all, or pretty much all, of the presentational stuff anyway. And since an external style sheet allows you to control the whole site's style in one document, this allows you to cut away a lot of the frills from the HTML that are no longer needed.
The BBC guide suggests tags to avoid when using semantic markup. These include the deprecated bold and italic tags (<b> and <i>), which apparently don't mean anything (though I'm not sure how their replacements, <em> and <strong>, mean anything either). Some of the tags they suggest not using make sense though, like <strike> for striking through a line to indicate a change (no one really does that anymore anyway, that I know of) and the purely presentational tags <blink> (blinking text, even when it was popular to use the <blink> tag, was generally found to be rather annoying anyway) and <marquee> (which basically let your text scroll like a New York stock ticker...it was fun for a while but I don't think anybody does that now either). CSS, Javascript, and PHP can probably take care of any of those things anyway.
Semantic markup should be applied where it is needed, especially in cases where the tag you might use for something is deprecated as a presentational tag. It's probably the best choice in any situation though, really.
I'm sorry I can't find much to say on this. Goodbye for now. Bonsoir!
Semantics has to do with the meaning of things, and is a topic of considerable importance to people who are much more into literary theory and criticism than I am. Mostly it is discussed in literary criticism like Ferdinand de Saussure's famous work Course in General Linguistics.
Semantics also indicates meaning in term of HTML markup. Basically, it is markup that provides some meaning. It mostly has come about in the more recent versions of HTML (HTML 4 particularly, not sure about HTML 5, but since HTML 5 seems to favor eliminating DIV tags in favor of more specific tags like <header> and <section>, I imagine it also supports semantic markup), in which many of the popularly-used "presentational" tags (i.e., ones that didn't have any meaning besides presentation) were deprecated. This may also have to do with the rise of CSS, since CSS's raison d'être is to take care of the presentational stuff.
I confess I don't know much about semantic markup, but it seems the best reason for using semantic markup is that it is "HTML that describes the content" (as the BBC Guide linked to on the class site says). This, according to the BBC guide, helps avoid browser compatibility issues and also separates presentation from content, which is becoming a more desired idea thanks to the increasing adoption of CSS. I suppose it would also be useful to any non-tech savvy person who might have some reason to be looking at your code. Doing this also would probably help your code stay cleaner (much the way, as I'm learning in MAT 225, coding PHP to do certain things can make your code cleaner because all the PHP is stored server-side and not seen by the client on the other end).
Encoding meaning into a document would make it more user-friendly because it would take into consideration the fact that readers online often scan rather than read articles and so on. It would also make it easier for search engines to index you in a meaningful way (though doing something like submitting a site map to Google also helps).
I think designers seek to separate presentation from structure in HTML because CSS is capable of taking care of all, or pretty much all, of the presentational stuff anyway. And since an external style sheet allows you to control the whole site's style in one document, this allows you to cut away a lot of the frills from the HTML that are no longer needed.
The BBC guide suggests tags to avoid when using semantic markup. These include the deprecated bold and italic tags (<b> and <i>), which apparently don't mean anything (though I'm not sure how their replacements, <em> and <strong>, mean anything either). Some of the tags they suggest not using make sense though, like <strike> for striking through a line to indicate a change (no one really does that anymore anyway, that I know of) and the purely presentational tags <blink> (blinking text, even when it was popular to use the <blink> tag, was generally found to be rather annoying anyway) and <marquee> (which basically let your text scroll like a New York stock ticker...it was fun for a while but I don't think anybody does that now either). CSS, Javascript, and PHP can probably take care of any of those things anyway.
Semantic markup should be applied where it is needed, especially in cases where the tag you might use for something is deprecated as a presentational tag. It's probably the best choice in any situation though, really.
I'm sorry I can't find much to say on this. Goodbye for now. Bonsoir!
Wednesday, October 26, 2011
Blog Post #7: Experience Design
Many designers have found a rigid focus on usability design stifling to creativity on the Web. The incorporation of experimental navigational systems, animation, sound, high-end graphics, and multimedia elements are often left out of sites who focus on fast-loading pages and making things as easy as possible for the user. However, as broadband connections become increasingly common, so too have many designers become increasingly interested in creating user experiences on the Web; sites where users can do more than simply read a brochure or shop at a store. Companies and designers are discovering that the Web can also be a place for drama, emotion, and a branding experience. Such designers are working in a relatively new design area sometimes called "experience design."
In your own words, define experience design. What considerations would be important for you as a designer if you were designing a site that focuses on "experience." Can you find a site that is a good example of experience design? Why is it a good example and how does it differ from other sites? Like debates between form and function, designing for experience and designing for usability are frequently put at odds. Why is this? Do you think they are mutually exclusive? Or, can they coexist in design?
This is sort of the flip side of the previous post. The previous one was about usability, whereas this is about those who finds usability restrictions squelch creativity.
I do kind of agree, designing to make a site meet strict usability guidelines might take some of the fun out of web design. I'm better with creating content than with the visual design side of things right now though, so I might not mind so much personally, though I'm sure some of my visitors would.
For me, a site that focuses on "experience" would be one that has a lot to offer the visitor but isn't so flashy that it's overwhelming. A person doesn't want to be bored on a website, but they don't want to be overwhelmed either. This is particularly true for me because I am autistic, and autistic people are highly susceptible to sensory overload. A site's that too flashy might also be difficult for those with other sensory processing disorders, people who are easily distracted or who have disorders like ADD, people with visual disabilities who are using screen readers, and - if flashing pictures or lights are involved - those who are prone to photoelectric seizures. I also dislike sites that are flashy visually and have some kind of audio or music that autoplays when you arrive at the site. That can be a lot for me, especially if there is no obvious way to turn the music off, and particularly if it loops AND can't be turned off easily. I also find some custom cursors distracting - they can be fun but sometimes I may not want a trail of sparkles following my arrow around. (The music problem seems primarily present in older sites where people used MIDI files as background audio for their sites. This used to be the cool thing to do once upon a time. Now I think people have moved on).
Why are designing for usability and designing for experience at odds? I think for much the same reason rational scientists and not-as-rational artistic people end up at odds - those in each camp have different ways of thinking about how web design should be done. It's like those literary theorists who only care about the text and what you can get from the text itself (sometimes called the "the author is dead" camp because they evaluate the text on its own merit, ignoring the author) versus those who want to evaluate a text based on the author and his or her background, society, culture, reader's response, feminist views, etc. They just can't agree to disagree, so they butt heads. As I mentioned before, both viewpoints have merit. Which one is the better one remains to be seen. And at any rate things in the tech world are constantly in flux anyway. So I think they can peacefully coexist, if each group would stop making such a big fuss about the other's view.
And now, some examples of "experience design":
In your own words, define experience design. What considerations would be important for you as a designer if you were designing a site that focuses on "experience." Can you find a site that is a good example of experience design? Why is it a good example and how does it differ from other sites? Like debates between form and function, designing for experience and designing for usability are frequently put at odds. Why is this? Do you think they are mutually exclusive? Or, can they coexist in design?
This is sort of the flip side of the previous post. The previous one was about usability, whereas this is about those who finds usability restrictions squelch creativity.
I do kind of agree, designing to make a site meet strict usability guidelines might take some of the fun out of web design. I'm better with creating content than with the visual design side of things right now though, so I might not mind so much personally, though I'm sure some of my visitors would.
For me, a site that focuses on "experience" would be one that has a lot to offer the visitor but isn't so flashy that it's overwhelming. A person doesn't want to be bored on a website, but they don't want to be overwhelmed either. This is particularly true for me because I am autistic, and autistic people are highly susceptible to sensory overload. A site's that too flashy might also be difficult for those with other sensory processing disorders, people who are easily distracted or who have disorders like ADD, people with visual disabilities who are using screen readers, and - if flashing pictures or lights are involved - those who are prone to photoelectric seizures. I also dislike sites that are flashy visually and have some kind of audio or music that autoplays when you arrive at the site. That can be a lot for me, especially if there is no obvious way to turn the music off, and particularly if it loops AND can't be turned off easily. I also find some custom cursors distracting - they can be fun but sometimes I may not want a trail of sparkles following my arrow around. (The music problem seems primarily present in older sites where people used MIDI files as background audio for their sites. This used to be the cool thing to do once upon a time. Now I think people have moved on).
Why are designing for usability and designing for experience at odds? I think for much the same reason rational scientists and not-as-rational artistic people end up at odds - those in each camp have different ways of thinking about how web design should be done. It's like those literary theorists who only care about the text and what you can get from the text itself (sometimes called the "the author is dead" camp because they evaluate the text on its own merit, ignoring the author) versus those who want to evaluate a text based on the author and his or her background, society, culture, reader's response, feminist views, etc. They just can't agree to disagree, so they butt heads. As I mentioned before, both viewpoints have merit. Which one is the better one remains to be seen. And at any rate things in the tech world are constantly in flux anyway. So I think they can peacefully coexist, if each group would stop making such a big fuss about the other's view.
And now, some examples of "experience design":
- Erin's Challenge! I Can Speak Japanese, the site I reviewed in my first post. That site provides a very full experience to anyone who wishes to learn the Japanese language. It's even been used to teach Japanese in a classroom setting, as their trailer in that post shows. And while it uses a lot of Flash, the overall design of the site is pretty minimalist, so it isn't too overwhelming.
- StarWars.com - The most recent version of the official Star Wars website is VERY streamlined. Yet the website still provides a lot of things for the user to do, the perhaps best well-known being the site's encyclopedia, which is the most detailed resource on Star Wars I've ever seen. One of my fave Sailor Moon websites, moonkitty.net, took its redesign cue from StarWars.com when trying to streamline its home page, but I think it still has too much distracting stuff in the sidebars to make the idea really work.
- The Great Gatsby - For NES - I was introduced to this site by a classmate in my American Lit 2 class, in which we were reading The Great Gatsby at the time. While the site does not provide a huge amount of user experience, just playing the game is fun in itself. As anyone who has read The Great Gatsby would know, it doesn't really have the kind of plot that would probably translate well to a video game, but somehow this game makes it work. And while it appears to have be a fan-created game (despite what the actual website says about it being on a NES cartridge the creator found at a yard sale), it does look like a real NES game and is pretty fun to play once you master the controls (which took me some time to do).
Tuesday, October 25, 2011
Blog Post #6: Usability
Long time no see! This time the topic is usability.
Prompt:
There is a lot of talk in the web design community about user experience and usability design. What is usability? What is meant by usability testing? What considerations are important for you as a designer if you were designing a site that focuses on "usability."
Can you find a site that is a good example of usability design and/or that provides resources or insights into usability?
Usability is defined in web design as making a site user-friendly. It might also encompass making sites accessible for the disabled, I guess. In short, you want to make your site "sticky" - a site that people will stay on for a long time. And people don't stay on websites a long time in general, because we're by nature not very patient. Then there are those people - myself included - who just get easily distracted (the old "'OOH Shiny!' ADD" problem). And other times people don't want to think a lot when they visit a website, for whatever reason. Maybe they're just impatient, or maybe they're tired or in a hurry.
I had a usability problem recently myself with a website. The site in question was the website for the Alliance Française de San Diego. Having received an e-newsletter from them (I guess I subscribed when I took their online placement test) which said the AF would be giving the Test d'Évaluation du Français (a French proficiency test), I e-mailed the person I needed to e-mail to indicate my interest in the test. They e-mailed me back the day before the registration deadline to send me the proper form, and indicated I could pay for the test online if I wished. I went to their website to do so, but could not find any page on which I could pay for my test. I began to panic, thinking I would miss the registration deadline for this test too, as I had for the TCF (Test de Connaissance du Français). It turned out that no page for certification test registration exists as of yet on their current website, which is still being set up. I was told however, that I could pay by submitting my payment under "donations" for the time being, which I did. This worked out, and I just took the test today as a matter of fact!
My issue with the AF San Diego website is that I spent so much time searching it for a page I wasn't aware did not yet exist. I can forgive them slightly as their website, in its current state anyway, is still a work-in-progress (it's an even newer site than the mostly unfinished site I took my placement test on several months ago). But I do think if they want to make a point out of being a qualified testing center for the TEF and TCF, both exams recognized by the French Ministry of Commerce and Industry, they need to make a page/section on their certification exams a priority. And to be honest, I don't know who's doing their web design, but based on the layout the site appears to be WordPress-based. If so, it would not be too difficult to make a page featuring their certification tests. But I have had a good experience with them by phone, e-mail, and today when I took the test, so I really shouldn't blame the people who work at AF San Diego. How their website looks - and how non-user friendly it might be - is not their fault. (I feel compelled to say this as well in case by some random chance they actually find this blog post and feel offended. Blogger is owned by Google, after all, and people seem to find my posts on my other blog via Google Alerts fairly easily).
Usability testing is what it sounds like - testing the usability of something. It's like focus groups in the film industry, which are shown an early cut of a film so the filmmakers can garner some audience feedback before the film goes out to the general public. With web design usability testing, you are allowing a person or persons to test the site for the same reason - to get feedback. Beta testers for software and video games are essentially providing the same thing to software/game developers (I'm actually part of an open online beta myself at the moment, as indicated in the previous post - though I've had trouble trying to access the game I'm part of a beta for). I did a sort of usability test shortly before debuting my redesigned author website. I sent the link to some online author friends and some other online friends who know a thing or two about web design, in order to get feedback. This was useful, and I felt I got something out of it.
If I were a designer designing a site that fits usability standards, I would try to make it as clean and simple to understand as possible. While I dislike the "neutral fits all" idea preached by Sabrina Soto on her home staging show Get it Sold (it drives me nuts that she refuses to use any color besides neutrals when painting, even though her reasons may be good ones in the end, seeing as she's a pro designer and I'm not), I do like clean and simple. The simpler your page is, the faster it loads as well, which is another important usability consideration. In a sense, designing for usability is like living green - when living green you make changes that not only better the environment, but ultimately help everyone live a better life (not to mention it can potentially offset global warming, maybe giving this planet a chance to survive till we have some backup plan in place in case the Earth becomes too hot for humans to handle). Even little changes in usability could help a lot, I think.
Lastly, here are a couple good sites on this subject:
-Usability First - Web Design - This site provides some good information on making your website usable. Kinda targeted more to businesses though.
-Usability Guidelines - This is from usability.gov, a website maintained by the U.S. Department of Health and Human Services that is dedicated to the subject of usability - their tagline is "your guide to providing usable and useful Web sites." They provide some good resources both on this page and elsewhere on the site.
Hope you enjoyed this post. Au revoir!
Prompt:
There is a lot of talk in the web design community about user experience and usability design. What is usability? What is meant by usability testing? What considerations are important for you as a designer if you were designing a site that focuses on "usability."
Can you find a site that is a good example of usability design and/or that provides resources or insights into usability?
Usability is defined in web design as making a site user-friendly. It might also encompass making sites accessible for the disabled, I guess. In short, you want to make your site "sticky" - a site that people will stay on for a long time. And people don't stay on websites a long time in general, because we're by nature not very patient. Then there are those people - myself included - who just get easily distracted (the old "'OOH Shiny!' ADD" problem). And other times people don't want to think a lot when they visit a website, for whatever reason. Maybe they're just impatient, or maybe they're tired or in a hurry.
I had a usability problem recently myself with a website. The site in question was the website for the Alliance Française de San Diego. Having received an e-newsletter from them (I guess I subscribed when I took their online placement test) which said the AF would be giving the Test d'Évaluation du Français (a French proficiency test), I e-mailed the person I needed to e-mail to indicate my interest in the test. They e-mailed me back the day before the registration deadline to send me the proper form, and indicated I could pay for the test online if I wished. I went to their website to do so, but could not find any page on which I could pay for my test. I began to panic, thinking I would miss the registration deadline for this test too, as I had for the TCF (Test de Connaissance du Français). It turned out that no page for certification test registration exists as of yet on their current website, which is still being set up. I was told however, that I could pay by submitting my payment under "donations" for the time being, which I did. This worked out, and I just took the test today as a matter of fact!
My issue with the AF San Diego website is that I spent so much time searching it for a page I wasn't aware did not yet exist. I can forgive them slightly as their website, in its current state anyway, is still a work-in-progress (it's an even newer site than the mostly unfinished site I took my placement test on several months ago). But I do think if they want to make a point out of being a qualified testing center for the TEF and TCF, both exams recognized by the French Ministry of Commerce and Industry, they need to make a page/section on their certification exams a priority. And to be honest, I don't know who's doing their web design, but based on the layout the site appears to be WordPress-based. If so, it would not be too difficult to make a page featuring their certification tests. But I have had a good experience with them by phone, e-mail, and today when I took the test, so I really shouldn't blame the people who work at AF San Diego. How their website looks - and how non-user friendly it might be - is not their fault. (I feel compelled to say this as well in case by some random chance they actually find this blog post and feel offended. Blogger is owned by Google, after all, and people seem to find my posts on my other blog via Google Alerts fairly easily).
Usability testing is what it sounds like - testing the usability of something. It's like focus groups in the film industry, which are shown an early cut of a film so the filmmakers can garner some audience feedback before the film goes out to the general public. With web design usability testing, you are allowing a person or persons to test the site for the same reason - to get feedback. Beta testers for software and video games are essentially providing the same thing to software/game developers (I'm actually part of an open online beta myself at the moment, as indicated in the previous post - though I've had trouble trying to access the game I'm part of a beta for). I did a sort of usability test shortly before debuting my redesigned author website. I sent the link to some online author friends and some other online friends who know a thing or two about web design, in order to get feedback. This was useful, and I felt I got something out of it.
If I were a designer designing a site that fits usability standards, I would try to make it as clean and simple to understand as possible. While I dislike the "neutral fits all" idea preached by Sabrina Soto on her home staging show Get it Sold (it drives me nuts that she refuses to use any color besides neutrals when painting, even though her reasons may be good ones in the end, seeing as she's a pro designer and I'm not), I do like clean and simple. The simpler your page is, the faster it loads as well, which is another important usability consideration. In a sense, designing for usability is like living green - when living green you make changes that not only better the environment, but ultimately help everyone live a better life (not to mention it can potentially offset global warming, maybe giving this planet a chance to survive till we have some backup plan in place in case the Earth becomes too hot for humans to handle). Even little changes in usability could help a lot, I think.
Lastly, here are a couple good sites on this subject:
-Usability First - Web Design - This site provides some good information on making your website usable. Kinda targeted more to businesses though.
-Usability Guidelines - This is from usability.gov, a website maintained by the U.S. Department of Health and Human Services that is dedicated to the subject of usability - their tagline is "your guide to providing usable and useful Web sites." They provide some good resources both on this page and elsewhere on the site.
Hope you enjoyed this post. Au revoir!
Tuesday, October 11, 2011
Pokémon Trading Card Game Online is Cool! (Blog Post #1 Again)
Find a site that you think is cool or cutting edge and well designed. Explain what this site is about and why you find it compelling. What makes the site cool or cutting edge and how does it differ from most sites that are out there? Are there special, unique, or interesting features to the site? Can you determine how the site was made and/or the tools and techniques that were used?
Recently, I discovered that the Pokémon Trading Card Game, which I used to play in its physical form several years ago, was being made into an online version, which you can find here: http://www.pokemontcg.com/. It is known as the Pokémon Trading Card Game Online, though the actual game on the site is referred to as Pokémon Trainer Challenge.
This site is basically what it sounds like - an online version of the original Trading Card Game. The original game involves collecting cards, making decks from them, and using the decks to play against others according to rules defined by Pokémon USA (or Wizards of the Coast, who released the cards until 2003). It essentially simulates a Pokémon battle in the Pokémon video games, with the same concept of a team of six Pokémon, damage, special conditions (like poison, confusion, etc), and prizes for defeating an opponent (in the form of prize cards; in the video game you earn either EXP - if you defeat a wild Pokémon - or EXP and money if you defeat another Pokémon trainer), coupled with aspects specific to the card game, like coin tossing, energy cards, and special non-Pokémon cards (initially called Trainer Cards, later expanded into the categories of Supporter Cards, Item Cards, Stadium Cards, and Pokémon Tools) that can affect gameplay in various ways (favorites early on were card-drawing cards like Bill and Professor Oak; other cards like Full Heal and the rare card Computer Search were also popular).
The online version, now available in open beta, seeks to replicate this experience online, with cards that look just like the physical ones. Based on the site's "learn the game" tutorials, the process of the game will go just the same as the physical Trading Game does. (I haven't tried the actual game; I've had some trouble getting in even though I should have access to the beta).
The site is cool because it is the only online version of a trading card game that I have ever heard of. If it is the first ever, then it is certainly cutting edge. It may help to generate more interest in the Trading Card Game, which I'm excited about because I haven't been able to play the game in a while (aside from a modified 30-card game at Comic-Con) and would like to get back into it again.
One of the interesting features of the site is the "Learn" tutorials. They feature an exclusive professor character who teaches you the basic, intermediate, and advanced aspects of the game through an interactive video environment. And if you finish the tutorials successfully, you gain special tokens as rewards (which don't have any value yet - a lot of aspects of the game aren't yet available because this is a beta - but which the site's FAQ indicates will mean something later).
Another interesting feature is the Deck Builder, which you gain once you purchase booster packs or theme decks using the credits you can gain from Pokémon Black and White physical booster packs and specially marked theme decks. After you open your purchased packs (as well as the free theme deck you get if you haven't bought a physical one and registered it - as I found out personally), you simply drag one card into place and the system creates a deck for you out of the cards you have. It's very useful because I've never been good at deck-building, which is why, I think, I've always lost playing the TCG in the past.
The site was obviously made mostly with Flash. The forum seems to be made with the typical PHPBB code used with forums. The site/game's still in beta though so it's hard to say exactly how things are built. A view of the home page source code shows some JavaScript and a LOT of DIV layers. The site also promises to be kid-friendly, a place "where kids can play the Pokémon Trading Card Game Online and we work tirelessly to help keep it as safe as possible," which may mean there is some PHP security code under the surface.
If I had been able to get into the game proper, I'd be able to say more, but unfortunately I can't. In lieu of that, please enjoy these screenshots that I took from the site:
To end this post, check out this video which shows what battling in this game is like:
See you next time!
 | |||
| My custom avatar for the TCG Online site |
Recently, I discovered that the Pokémon Trading Card Game, which I used to play in its physical form several years ago, was being made into an online version, which you can find here: http://www.pokemontcg.com/. It is known as the Pokémon Trading Card Game Online, though the actual game on the site is referred to as Pokémon Trainer Challenge.
This site is basically what it sounds like - an online version of the original Trading Card Game. The original game involves collecting cards, making decks from them, and using the decks to play against others according to rules defined by Pokémon USA (or Wizards of the Coast, who released the cards until 2003). It essentially simulates a Pokémon battle in the Pokémon video games, with the same concept of a team of six Pokémon, damage, special conditions (like poison, confusion, etc), and prizes for defeating an opponent (in the form of prize cards; in the video game you earn either EXP - if you defeat a wild Pokémon - or EXP and money if you defeat another Pokémon trainer), coupled with aspects specific to the card game, like coin tossing, energy cards, and special non-Pokémon cards (initially called Trainer Cards, later expanded into the categories of Supporter Cards, Item Cards, Stadium Cards, and Pokémon Tools) that can affect gameplay in various ways (favorites early on were card-drawing cards like Bill and Professor Oak; other cards like Full Heal and the rare card Computer Search were also popular).
The online version, now available in open beta, seeks to replicate this experience online, with cards that look just like the physical ones. Based on the site's "learn the game" tutorials, the process of the game will go just the same as the physical Trading Game does. (I haven't tried the actual game; I've had some trouble getting in even though I should have access to the beta).
The site is cool because it is the only online version of a trading card game that I have ever heard of. If it is the first ever, then it is certainly cutting edge. It may help to generate more interest in the Trading Card Game, which I'm excited about because I haven't been able to play the game in a while (aside from a modified 30-card game at Comic-Con) and would like to get back into it again.
One of the interesting features of the site is the "Learn" tutorials. They feature an exclusive professor character who teaches you the basic, intermediate, and advanced aspects of the game through an interactive video environment. And if you finish the tutorials successfully, you gain special tokens as rewards (which don't have any value yet - a lot of aspects of the game aren't yet available because this is a beta - but which the site's FAQ indicates will mean something later).
Another interesting feature is the Deck Builder, which you gain once you purchase booster packs or theme decks using the credits you can gain from Pokémon Black and White physical booster packs and specially marked theme decks. After you open your purchased packs (as well as the free theme deck you get if you haven't bought a physical one and registered it - as I found out personally), you simply drag one card into place and the system creates a deck for you out of the cards you have. It's very useful because I've never been good at deck-building, which is why, I think, I've always lost playing the TCG in the past.
The site was obviously made mostly with Flash. The forum seems to be made with the typical PHPBB code used with forums. The site/game's still in beta though so it's hard to say exactly how things are built. A view of the home page source code shows some JavaScript and a LOT of DIV layers. The site also promises to be kid-friendly, a place "where kids can play the Pokémon Trading Card Game Online and we work tirelessly to help keep it as safe as possible," which may mean there is some PHP security code under the surface.
If I had been able to get into the game proper, I'd be able to say more, but unfortunately I can't. In lieu of that, please enjoy these screenshots that I took from the site:
 |
| Pokémon Trading Card Game Online community/forum |
 |
| User dashboard |
 |
| Home page |
 |
| The initial game-playing interface |
 |
| News page |
 |
| User profile (with leaderboard) |
 |
| Shop where you can buy booster packs for the game |
 |
| Support Center |
 |
| Tutorials section |
 |
| On the forum, there are desktop wallpapers you can download with trainers on them, representing the different energy types in the TCG. This here is the water-type one (my favorite type) featuring a trainer named Calvin. |
 |
| The site's "ProfessorMaven" explains to users what exactly an "open beta" is. |
To end this post, check out this video which shows what battling in this game is like:
See you next time!
Wednesday, September 21, 2011
Blog Post #5: Web Typography
One of the big frustrations that designers have about designing for the
Web is the historically poor state of web typography. As web designers
strive for consistency across platforms, they have been forced to rely
on only a small set of commonly installed fonts, knowing that their
ideal choice of font may not be installed on the end-users system. As a
result, designers would often turn to creating images for their headers
and subheads (pictures of text instead of actual text), but this has
never been a good choice for body copy as it has some draw backs in
terms of file size, semantic markup, and accessibility. However, many
people feel that typography on the web is finally beginning to mature.
Why is that? What is the @font-face declaration and what are the
implications of downloadable and/or hosted fonts? What is WOFF and why
is it significant? What are your impressions about the current state
(and future) of Web Typography?
I think that people are saying web typography is maturing because of the introduction of the @font-face declaration with CSS3. W3 puts it well:
I for one am happy that this functionality is finally available, as I am one of those people who have created images for headers (usually banners). I also have found many interesting fonts on the Absolute Font Archive that I would like to use, and I regularly bookmark Smashing Magazine's articles on fonts and typography. Before the arrival of @font-face, though, you had to stick with what fonts people were likely to have on their computers, and that list is pretty limited. But with @font-face, all those great fonts people have created and put on the internet for download can finally be put to use!
I have not played around with WOFF, but apparently it means "Web Open Font Format" and is what is used to embed fonts in pages. It is also significant in that it compresses said data, allowing for pages to have smaller file size and thus load faster. And of course, we always want our pages to load faster. I mean, it's kind of common web courtesy nowadays.
I have to say, I'm excited about where web typography could go with the arrival of @font-face. As I said before, it will allow so many more interesting fonts to get some use. This will allow designers to make web pages so much more unique too. And UNIQUE IS GOOD!
I apologize if my commentary on this is sparse; it's a subject I'm interested in but don't know a ton about. (Plus I'm kinda tired out from doing Exercise 3). Still, a development like this is worth blogging about, right?!
Oh, and by the way, I chose not to do Blog Post Topic #4. Hence the jump from #3 and #5.
I think that people are saying web typography is maturing because of the introduction of the @font-face declaration with CSS3. W3 puts it well:
"The @font-face rule allows for linking to fonts that are automatically activated when needed. This allows authors to select a font that closely matches the design goals for a given page rather than limiting the font choice to a set of fonts available on all platforms."
I for one am happy that this functionality is finally available, as I am one of those people who have created images for headers (usually banners). I also have found many interesting fonts on the Absolute Font Archive that I would like to use, and I regularly bookmark Smashing Magazine's articles on fonts and typography. Before the arrival of @font-face, though, you had to stick with what fonts people were likely to have on their computers, and that list is pretty limited. But with @font-face, all those great fonts people have created and put on the internet for download can finally be put to use!
I have not played around with WOFF, but apparently it means "Web Open Font Format" and is what is used to embed fonts in pages. It is also significant in that it compresses said data, allowing for pages to have smaller file size and thus load faster. And of course, we always want our pages to load faster. I mean, it's kind of common web courtesy nowadays.
I have to say, I'm excited about where web typography could go with the arrival of @font-face. As I said before, it will allow so many more interesting fonts to get some use. This will allow designers to make web pages so much more unique too. And UNIQUE IS GOOD!
I apologize if my commentary on this is sparse; it's a subject I'm interested in but don't know a ton about. (Plus I'm kinda tired out from doing Exercise 3). Still, a development like this is worth blogging about, right?!
Oh, and by the way, I chose not to do Blog Post Topic #4. Hence the jump from #3 and #5.
Saturday, September 3, 2011
Blog #3: What is RSS?
On many blogs and CMS systems, you have the option of publishing a site feed which will create an XML version of your blog for RSS syndication. What is RSS? How is it useful and/or being used? How can you use the RSS feed to track updates to your fellow student's blogs? What's an aggregator?
RSS stands for "Really Simple Syndication." Syndication is basically a process that spreads something out to a wide audience. The term is used in the TV and newspaper worlds to describe something that appears, say, across the U.S., like a political cartoonist whose work is published in many different newspapers across the country or a TV show that is "nationally syndicated," which means it airs across the United States, though on different channels in different areas depending on how the cable channels are set up. Some shows may also be said to be airing "in syndication," which means they air on different channels depending on where you live -- which usually happens when something airs on a basic channel like ABC, which may be channel 8 for one person and channel 10 for another, depending on what company a person has their basic cable service through. (If it airs on a "cable channel" like TLC or Lifetime, usually this "syndication" idea doesn't apply because not everyone has those channels, since "basic cable" does not always offer such channels).
The same idea of "syndication" applies to RSS on the web. RSS allows content to be "syndicated" across the web to those who would like to follow said content, which they indicate by "subscribing" to the feed (just as you might "subscribe" to a newspaper containing syndicated content), usually by using a service such as FeedBurner or Google Reader. More on that in a bit.
RSS is useful because it is an easy (hence the "Really Simple" part) way to get content to those who want to read it. It also allows those who like a certain site to continuously follow it and read its new content easily. It is being used primarily with blogs, since people often like to follow blogs they like (especially since nowadays there's a blog for practically everything under the sun) but may not want to keep visiting the site over and over to look for updates. However, any site -- not just blogs -- can set up an RSS feed. There are various ways of doing this; I assume if you use a Content Management System (CMS) such as WordPress, Drupal, or Joomla they provide some admin option that allows for a feed to be created (or if not, most CMSes have active communities that provide plug-ins that will allow you to do things that aren't already included in the CMS install itself). Googling "setting up an rss feed" or something similar produces many results. The book Building Web Sites All-in-One Desk Reference for Dummies also gives a good explanation of it in its "Feeding Them Your Content: RSS" section. I follow two sites, one for a fan translation group that uses Drupal for their site, and the other the official site for Prince William & Kate Middleton's wedding, that are not blogs but still have RSS feeds that can be followed.
I could follow my fellow students' blogs using an RSS aggregator, also known as an RSS reader. There are many such readers; the previously mentioned FeedBurner (now owned by Google) and Google Reader are two examples that most RSS feeds (which may be called "atom feeds" depending on how the feed is set up) will recognize. Most sites will have some sort of RSS icon (represented by an orange square with little "listening" waves on it) that when clicked will allow you to subscribe to the site's feed. Either that or there will be some other clear link to do so. If not, you can try adding "/rss" to the site's URL to see if that brings up the feed (it works on the Royal Wedding site anyway) or you can follow the site's feed using your browser, if it allows you to do that (I think IE and Firefox both do). If you have a Blogger account, there is a system on the Blogger dashboard that allows you to add Blogger blogs to your "reading list," which I believe you can somehow sync to Google Reader as well (it would make sense, since both of them are owned by Google).
Given our mostly mobile-driven world these days, there are also many RSS readers for mobile devices. I use a RSS reader app called Byline, created by the company Phantom Fish, to follow RSS feeds on my iPod. It was recommended to me by several people when I asked for advice on an RSS app for iOS after my previous one failed me. Its only flaw is that you cannot add feeds from within the app, likely because it is tied to Google Reader (you have to go into Google Reader and add the feeds there). Similar apps can probably be found in the Android Market (for Android devices) and the Windows Marketplace (for Pocket PCs and Windows phones).
Anyway, I hope you have learned a little bit about RSS from this post! Till next time!
P.S. A couple useful links:
RSS readers for Android: http://www.talkandroid.com/8805-top-5-android-rss-readers/
Some Windows Phone RSS reader options: http://marketplace.windowsphone.com/search.aspx?keywords=rss%20reader
RSS stands for "Really Simple Syndication." Syndication is basically a process that spreads something out to a wide audience. The term is used in the TV and newspaper worlds to describe something that appears, say, across the U.S., like a political cartoonist whose work is published in many different newspapers across the country or a TV show that is "nationally syndicated," which means it airs across the United States, though on different channels in different areas depending on how the cable channels are set up. Some shows may also be said to be airing "in syndication," which means they air on different channels depending on where you live -- which usually happens when something airs on a basic channel like ABC, which may be channel 8 for one person and channel 10 for another, depending on what company a person has their basic cable service through. (If it airs on a "cable channel" like TLC or Lifetime, usually this "syndication" idea doesn't apply because not everyone has those channels, since "basic cable" does not always offer such channels).
The same idea of "syndication" applies to RSS on the web. RSS allows content to be "syndicated" across the web to those who would like to follow said content, which they indicate by "subscribing" to the feed (just as you might "subscribe" to a newspaper containing syndicated content), usually by using a service such as FeedBurner or Google Reader. More on that in a bit.
RSS is useful because it is an easy (hence the "Really Simple" part) way to get content to those who want to read it. It also allows those who like a certain site to continuously follow it and read its new content easily. It is being used primarily with blogs, since people often like to follow blogs they like (especially since nowadays there's a blog for practically everything under the sun) but may not want to keep visiting the site over and over to look for updates. However, any site -- not just blogs -- can set up an RSS feed. There are various ways of doing this; I assume if you use a Content Management System (CMS) such as WordPress, Drupal, or Joomla they provide some admin option that allows for a feed to be created (or if not, most CMSes have active communities that provide plug-ins that will allow you to do things that aren't already included in the CMS install itself). Googling "setting up an rss feed" or something similar produces many results. The book Building Web Sites All-in-One Desk Reference for Dummies also gives a good explanation of it in its "Feeding Them Your Content: RSS" section. I follow two sites, one for a fan translation group that uses Drupal for their site, and the other the official site for Prince William & Kate Middleton's wedding, that are not blogs but still have RSS feeds that can be followed.
I could follow my fellow students' blogs using an RSS aggregator, also known as an RSS reader. There are many such readers; the previously mentioned FeedBurner (now owned by Google) and Google Reader are two examples that most RSS feeds (which may be called "atom feeds" depending on how the feed is set up) will recognize. Most sites will have some sort of RSS icon (represented by an orange square with little "listening" waves on it) that when clicked will allow you to subscribe to the site's feed. Either that or there will be some other clear link to do so. If not, you can try adding "/rss" to the site's URL to see if that brings up the feed (it works on the Royal Wedding site anyway) or you can follow the site's feed using your browser, if it allows you to do that (I think IE and Firefox both do). If you have a Blogger account, there is a system on the Blogger dashboard that allows you to add Blogger blogs to your "reading list," which I believe you can somehow sync to Google Reader as well (it would make sense, since both of them are owned by Google).
Given our mostly mobile-driven world these days, there are also many RSS readers for mobile devices. I use a RSS reader app called Byline, created by the company Phantom Fish, to follow RSS feeds on my iPod. It was recommended to me by several people when I asked for advice on an RSS app for iOS after my previous one failed me. Its only flaw is that you cannot add feeds from within the app, likely because it is tied to Google Reader (you have to go into Google Reader and add the feeds there). Similar apps can probably be found in the Android Market (for Android devices) and the Windows Marketplace (for Pocket PCs and Windows phones).
Anyway, I hope you have learned a little bit about RSS from this post! Till next time!
P.S. A couple useful links:
RSS readers for Android: http://www.talkandroid.com/8805-top-5-android-rss-readers/
Some Windows Phone RSS reader options: http://marketplace.windowsphone.com/search.aspx?keywords=rss%20reader
Subscribe to:
Posts (Atom)