Week 14a: Continuing website

This week we were instructed to keep working on our website and to have it 20% done by Wednesday. I had already set up a basic structure for my site, which included the header, a feature area, the body, and a footer. I designed a new logo for the Kickstarter project and then made a header in Illustrator. I like the overall design of it, but I think I could use some critique to push me more in the right direction. For my feature area, I knew that I wanted something that would catch people's attention and make them want to learn more about this project. I decided a statistic about the importance of this show would be a potential idea, and it what I have in place now. From there, I began working on the body area. So far, I have included the explanation of the project and some statistics which describe the importance of the creation of this show. I think overall I am headed in the right direction, but I would like to see what suggestions I get to better my website as a whole.

Here is my website so far:

Note the separation between the two images, there is no page break within the actual website.

Week 13: Reflecting on IIDCon

Last Saturday, I attended IIDCon. The primary event was the four speakers. These speakers included Liese Zahabi, Victor Yocco, Brian Crumley, and John Halfpenny - who all came from different backgrounds. Before even attending the event, I knew that I would likely find value in what each speaker presented. 

Victor's presentation was first. He specialized in psychology and its relation to design. I have always been fascinated by psychology, and knew there were many aspects of it which could be powerful in benefiting a design or application. Perhaps one of the most basic things in terms of design that he related to psychology was the use of hierarchy. Displaying information in a meaningful way is always crucial in terms of having a good design. His example of a site that did this poorly, was a student loan repayment site. Many of the subcategories didn't necessarily correspond with their headings in a meaningful way. In fact, two of the options that could've been placed under another category, had their own heading of "Other". Victor explained how this kind of design would leave users frustrated because they wouldn't necessarily associate what they were looking for with where it was placed. He also discussed the idea of give and take. An example of this is when you receive a free trial, and then at the end of it are asked to purchase the full service. This type of transaction helps to make a user feel, even if it is subconsciously, that they should return the favor - especially if they enjoyed the service. I found Victor's talk not only interesting, but also beneficial and it is something that I would like to do more research on.

The next speaker was Brian, who presented on the idea of a living style guide. This talk actually played in very well with what we are doing in class - especially since we had a style tile/guide due the following Monday. He believes that these living guides - which incorporate working code and styling - are essential when communicating between a business and its customers/users. The living style guide goes beyond a traditional one because it really allows the designers/business/users to understand exactly how the final product will look and behave, without it actually being finished. Beyond this, it also allows for the styling and code to be reused and applied with ease across multiple pages of a website. Although a lot of what he spoke on felt a little ahead of where I was in terms of learning design and application, I felt that it was a nice primer for my future in these fields.

Liese Zahabi spoke on the idea of evolution of the search box. Her presentation felt very philosophical in comparison to the others. She primarily spoke about how we must transition our metaphor for search in order to facilitate a more successful evolution of search. The metaphor that she felt was most effective was that online search and the internet is like an ecosystem. She said this was more accurate than previous metaphors because it took into account the fact that the web is comprised of content which is old and new. It is constantly changing and constantly being added to at a rate much greater than ever before. I found that this metaphor lined up with my own personal observations about content creation on the internet. However, Liese helped to expand on what I had previously thought and has left me thinking about the internet in a new way.

The final speaker was John Halfpenny who specializes in personal branding online. His presentation primarily spoke about what a person should be doing if they would like to have a presence and stand out online. He used a few examples of people we likely recognized and knew the brand of - including Donald Trump. He explained that these people were effective in creating a brand for themselves online because we knew what to expect from them - good or bad. Some of the things he said that we should be doing starting now to begin creating a brand was to expand our social media outreach. Specifically, having an account on all major social media accounts, defining ourselves on those accounts, and linking them to and from each other. John also said that the most important thing was to use our names as both usernames and in our personal website domains. This tied into his bigger picture of his speech - which was inserting yourself into search results and optimizing your exposure. I felt that John's presentation was very beneficial and something that I felt I should start doing before I exit college in the coming years. After his presentation, I felt equipped with knowledge that could help define my online presence.

Overall, I felt that IIDCon was a beneficial experience. My knowledge on the topics that were presented felt expanded and my interest in them has also increased. Many of the topics presented were helpful to me now, and will likely be helpful as I continue in this field. I will likely continue my own independent research on some of these topics and hopefully learn even more as time passes. 

Week 12b: Style Tile

This week I completed my style tile for my website. Since my choice of a Kickstarter project is aimed at children and parents, I knew that I wanted to gear my design towards them. I did some research on other children's TV show websites, and most were very colorful and fun. I wanted mine to also be colorful, but not as extreme as some of the other websites took it. The name of the show is Tiny Tech Academy, so I knew that I wanted the colors to relate to ones you would think of relating to school. I chose red and blue, with a variety of grays for the background and text elements. I tried my best to steer these colors away from primaries and I think I was effective in doing so. As suggested, I redid the logo into a simpler, and perhaps more effective, school crest. I kept the same font that the original logo had, however. Anyway, here is what I came up with:

Week 12: Outside of Class

For my content, I have a few paragraphs of information, some facts, and descriptions of each of the characters in the show. Because of the nature of my content, I knew that breaking it up would be very important. Since a lot of my content is based on facts and statistics, I think it is crucial to split that up in an interesting and unique way. I kept the header the same for each wireframe because I knew that it is one element that would be consistent. I also knew that I wanted an eye-catching fact or statistic to draw the user in and develop an interest for the rest of the content on my page. 

Although I haven't totally nailed down what I would like my design to be, doing these wireframes helped me consider what elements I need for the content I have.

Week 12a: Revising Content Write Up

After receiving some guidance, I had a better understanding of what a content write-up was. I took the information that I gathered through research last week and translated it to something that someone else could look at and design a website from. This is what I came up with:

Tiny Tech Academy

6 out of 10 millennials (age 16-34) have “low” technology  skills, (or other attention grabbing fact for feature area - to draw the user in)

What is Tiny Tech Academy?

Tiny Tech Academy is the concept for a children’s show that is currently seeking funding on Kickstarter. It features a diverse cast of minority children and focuses on a wide variety of topics dealing with technology and computer science.

What makes this show important?

Statistics show that minority children and adults are largely underrepresented in TV as lead characters. When minorities are brought into TV and film, they are almost always typecast, meaning that they are used to portray stereotypical characters - even in children’s cartoons.

There is also an extreme lack of diversity in STEM fields, including computer science. Over half of schools in the United States do not offer any computer science courses, leaving a majority of children, especially minorities, without any exposure to computer science or technology in an educational setting. The result of this is that African Americans and Hispanics only make up 1-3% of the workforce and women only make up 20-30% of employees in technology jobs. Tiny Tech Academy aims to change this through showing diverse characters conquering technology-related issues.

Since children spend about 3 hours a day watching TV, educational programming can be a very effective method of spreading information and teaching kids new things. Children who watch TV are also likely to act out what they saw while watching. They also tend to view characters on TV as role models, especially ones they can relate to. Promoting diversity in children’s television can also help improve children’s feelings towards those who are different than them. Tiny Tech Academy focuses on bringing minority role models and technology into the spotlight, hopefully bringing change in traditional thinking and representation to both children and adults.

More Statistics

• Women account for relatively small percentages of degree recipients in certain STEM fields: only 18.5 percent of bachelor's degrees in engineering went to women in 2008 (EEOC)
• Approximately 1 cartoon in 6 (16.1%) contained at least one character was a member of a racial minority group, whereas substantially more (69.6%) contained at least one character that was Caucasian (Klein)
• In computer and mathematical occupations, 8.3 percent of workers were black or African American, 6.3 were Hispanic or Latino (EEOC)
• Two-thirds of women report having to prove themselves over and over; their success discounted and their expertise questioned. Three-fourths of Black women reported this phenomenon (EEOC)
• When racial minority group members are included in the media, they are often portrayed in negative and stereotypical ways (Klein)

Topics Covered in Tiny Tech Academy

- Web Safety	- Online Research
- Online Etiquette	- Coding
- App Design and Use	- Web Design
- Computer Graphics	- Hardware Design, Care, and Usage
- Diversity

Meet the Cast

Meme (pronounced like Mimi): the social media wiz, teaches kids about social media through use of her super tool - a phablet

Cody: expert programmer, will teach basic programming skills, her super tool is a laser cane which helps her navigate the world

Mega: Terra’s brother who specializes in hardware, his super tool is a soldering iron

Terra: Mega’s sister who specializes in software, her super tool is a mouse

Shortcut: well versed in keyboard shortcuts and other helpful tricks, his super tool is a wireless keyboard

“The Hack”: specializes in computer graphics, his super tool is a stylus

Check Tiny Tech Academy out on Kickstarter!

Week 11: Outside of Class

After doing lots of researching regarding Tiny Tech Academy, I now have to come up with a strategy for my website. I think that there are three important topics that need to be addressed on the website. These topics include the cast of characters, the purpose of the show, and statistics which support the need for a show like TTA. I think the most eye catching topic, which would draw people in to read more, is the statistics about minorities and STEM fields. Looking at other webpages dedicated to children's shows, such as pbskids.org, I knew I wanted something that was fun, colorful, but not too overkill especially since the audience for this webpage would likely be mostly adults. I definitely feel inspired by PBS Kids - since a lot of the shows they feature are less traditional than shows on networks such as Cartoon Network and Nickelodeon. They are an established brand. Many of PBS Kids' shows are educational. Because of this and the fact that Tiny Tech Academy is also not traditional and is educational, I think it is a good inspiration.

The reading that we had to do also helped me to start considering a potential layout. This chapter of Above the Fold spoke about the essential elements found in a webpage. This included the header, navigation, feature area, body/content, sidebar, footer, and background. Since the website we are creating will be only one page, I may not use all of these elements. However, looking at them and how they are traditionally used helps me understand effective ways to activate the compositional space that I will be faced with.

Week 11b: About Tiny Tech Academy

The Kickstarter project that I decided to design a website for is called Tiny Tech Academy. This is a proposal for a children's educational television show that features a diverse cast and is aimed at teaching kids about technology in a variety of ways. The target audience is children ages 4-8. The cast features young children from African-American, Asian American, Native American, Latino American, female, LGBTQ and disabled communities. The goal of the show is to teach parents and kids about basic computer science while also celebrating diversity. The world we live in is certainly diverse and that diversity is largely underrepresented in media, especially in STEM roles. Minority children are far less likely to be exposed to or employed in STEM fields, with female minorities falling even farther behind. This educational show aims to dispel this stereotype and encourages children to pursue whatever they desire, despite what traditional media portrays. By publishing a TV show that discusses computer science in a fun, educational, and relatable way, our community can begin to expose more children to STEM roles who may otherwise not learn about them. This hopefully can begin to spark a change in trends regarding minorities in STEM roles.

As for the technology side of this television show, Tiny Tech Academy covers several topics in an attempt to better educate parents and kids. Internet safety is perhaps one of the more heavily covered topics and it includes discussions about browsing, using it for research, and social media etiquette. They also want to cover safety, with topics that will likely include scams, catfishing, and other dangerous interactions that can occur when using technology. In terms of computer science topics, this show intends to cover programming, app design and use, and web design. In addition to the aforementioned topics which mainly focus on the software aspects of computing, Tiny Tech Academy will also cover hardware design, care, and usage. User interaction is also covered through mentions of shortcuts and tricks to enhance technology usage.

The cast of the show features 6 main characters. As mentioned previously, they come from a variety of backgrounds and each feature a special skill and tool which will help to guide them through their various adventures. The main character, Meme (pronounced like Mimi), is the "social media wiz" who will likely focus of teaching the viewer about the various aspects of social media. Her "super tool" is a phablet. Cody specializes in coding and is visually impaired, so her "super tool" is a laser cane. Mega and Terra are brother and sister. Mega is specialized in hardware and his sister, Terra, is specialized in software. Shortcut is a character whose specialty is in keyboard shortcuts and as such uses a portable keyboard as his super tool. Finally, "The Hack" specializes in graphics and uses a stylus as his "super tool". Clearly, each of these characters were designed to teach the aforementioned topics through their personalities and respective tools.

Week 11a: Kickstarter Project Choices

For our next project, we are choosing a Kickstarter project and creating a website for it. The criteria for choosing the project is that it needs to have content, but a website that is lacking, or that the project has no website at all. We were to pick three to narrow our choice from. Here are the three projects I am interested in and my reasoning for choosing them:

Age of Awakening, an apocalyptic fantasy role-playing game
https://www.kickstarter.com/projects/thearmoredduck/age-of-awakening-an-apocalyptic-fantasy-role-playi/description

The first project I was interested in was this table top game called Age of Awakening. I found this project to be interesting because I sometimes play table top games and am always looking for ones that actually capture my interest. I knew that I wanted to have personal interest in whichever project I would end up choosing as a way to motivate myself. This project doesn't appear to have a website at all, and is a newly added project with not a lot of funding yet. However, they appear to have a strong concept in terms of the project itself that I think could easily lend itself to a nice, one page website.

Tiny Tech Academy
https://www.kickstarter.com/projects/426599241/tiny-tech-academy?ref=newest

This project caught my eye mainly due to its unique concept of a children's TV show meant to teach kids about technology, web safety, and basic computer science through a cast of minority super heroes. The character designs are interesting and the concept itself isn't like anything I have ever seen. However, this project doesn't have a website to back up such an excellent idea. The project page links to the show's future "distributor" website, but I couldn't find anything about the potential show itself. I think that making a web page which really focuses on the unique idea for this TV show and its potential impact on kids could tie in really well with the concept of the show overall - since it is dedicated to web safety, tech, and programming.

Dynacorp - We come in peace.
https://www.kickstarter.com/projects/roxflame/dynacorp-we-come-in-peace?ref=recommended

Dynacorp is a 2D side-scrolling platformer game with nonlinear game play. As mentioned previously, I want to pick a project that I am actually interested in, and since I want to be a game designer some day, indie games such as this one often catch my eye since they differ so much from a AAA title. This project does have a website, but it is super lacking in detail compared to what they show on the actual Kickstarter page. I am really drawn in by the character designs and game art that they show on the project page, yet they neglect almost all of it on the website. This project seems to have a bright and colorful look overall and I think it could be fun to translate that into a website design.

As of right now, I am most interested in doing a website design for Dynacorp, however that could change in the coming days when I discuss my options more in class.

Week 10b: HTML and CSS 101

After relearning the basics of HTML, it was time to begin incorporating CSS. For what we are doing we are using an external CSS, which seems to be the most effective way to incorporate CSS. I began by updating my own HTML vacation page from earlier in the week with some new CSS styling. Here is an image of that:

After updating my site with some basic CSS styling, we were told to do 2 basic tutorials for HTML and CSS. The HTML tutorial covered much of what I discussed in my previous post. However, here is the code for that:

Pretty basic stuff. For the next tutorial, we were to apply CSS to the page we created in the HTML tutorial. I decided to show the code and page side-by-side:

Once again, not to difficult. However, I do find value in these tutorials. I have never learned any CSS and so far it is simpler than I imagined. I definitely can see the benefits of using an external CSS and am excited to move forward and learn more.

Week 10: Outside of Class

This week outside of class, we were asked to work on a basic HTML page. The page had to feature an image and a list, as well as a description of our dream vacation. I chose to briefly talk about why I want to visit Japan in my main paragraph. I then use a picture whose source was a url. Finally, I made an unordered list of the places I would visit while I was there. This exercise was a nice, simple refresher of what I had learned last semester. Here are screenshots from my HTML page:

I don't feel like there is much to say about this assignment because, for me, it was very straightforward. However, as already mentioned, it was a nice reintroduction to HTML.