Firebrush Array Reflection

Firebrush Array was a great team to work with. I was very proud of the Dough in the Wall website. The time constraint was pretty difficult on top of other classes and work, but we managed to pull it together.

I was glad to work with a few different new things, such as flex box, media queries, and php.

Although I had played with php for WordPress theming, I was not prepared for setting up the php connection to the database and interacting with the form. Even though, we didn’t link the database to the form for the final presentation, I spent a lot of time figuring it out.

I was really worried at first, trying to figure out how the form would have to be with the php so that it would work well with a database. In the end, I was very happy with our solution. I think we could have made it production quality after addressing security concerns to try to prevent injection into the form and database.

I really strengthened my skills with css and databases by helping others in our team and in other teams. I think learned the most by looking at the issues other people were having and talking them through different solutions.

As a group we didn’t really have any conflicts or power struggles. I found our positions and work divisions to be very balanced playing off our individual strengths.

Food was often considered. I can’t work on an empty stomach. I got food a number of times with members of my group both before and after class. I would say that it was definitely the most important part of this assignment.

Segway Site

Site Link

My site was pretty polished by the time peer reviews came around. I was grateful; however, for some of Colby’s pointers. He pointed out that a monospace font that I was using was a little hard to read. I changed this to regular style of my font family.

Using Flexbox was a new challenge for me. I never used it before so I had to get used to the new syntax. Also, there were some quirks when it came to styling. Not every rule worked as expected with the flex. I gradually pressed on and got everything to look as I wanted it to.

I also decided to use a php form. Since this was also new, I decided to keep it basic.

This is section of my site seemed to be my peers’ favorite:

They seemed to like the clean design with semi-transparent color block on top of a background image. I didn’t hesitate to reuse this in other places of the site. I also had issues in validation. The validator didn’t seem to think my divs on my flex container were closed, but it was clear which end tags matched the openers. When the validator reached the closing tags, it said they were stray tags.

Image Optimization

A few takeaways from “Image Optimization are:”

Scalable Vector Graphics are fully supported in modern browsers. We can take most vector graphics and export them as SVGs instead of png, or jpg so that they can be created from XML.

JPEG XR is a thing? JPEG XR isn’t fully supported yet; however, it can provide a 30% file size decrease.

Exporting images to display size reduces a ton of overhead. Just a few pixels add up quick when you consider the difference between the natural size and CSS pixel size!

Photo Cropping and Cloning

Cropping:

To crop this image I used two methods. The first was the selection and erase method. I selected certain small areas and erased those selections. For more precise areas, I zoomed in super far and erased the background directly with the eraser. I then copied and pasted what was left into the image on the right.

Clone Tool:

This image took some major finessing because the trees were very troublesome. The gradation in the background kept me from simply cloning the tree with the house. After cloning the house, I removed the tree that was behind it by sampling sections from all over the image to get the right variation in the gradation. I used a similar methodology to remove the top of the shed. After that I cloned some bushes and used the spot correction tool to blend them with the background.

Usability Testing

It was extremely apparent that the testers  shared similar behaviors that I think reflect the general user on the web.  Scrolling,  for example,  is intuitive in the modern age. Each tester instinctively scrolled  first to gauge the site  before reading.  Using the top  navigation was also a natural and first response.  All testers seemed to quickly use the top left of the page to get home.  It was also apparent that when skimming the page,  testers  looked for what they expected things to look like as opposed to reading the actual content headings.I think these things are the most important things to take away from the tests.  When building a web page,  emphasis should be placed upon how the  user will use the page so they can find what they are looking for.

Tom’s Hardware Evaluation

Tom’s Hardware is a frequent stop for hardware and PC enthusiasts. A one stop shop for reviews, specs, builds, releases, and tech news; tomshardware.com is an incredible resource with incredible content.

Content

Tom’s Hardware is filled with content written by hundreds of creators. If you can stick it in a computer, then  there is an article about it. The content is extremely useful. Content creators are techies and their articles are backed by manufacturer specs and stress tests. Active and relevant comment threads grant increased validity and provide further information. Advertisements aren’t distracting but function as the main images of the site providing ads from relevant hardware manufacturers.

Structure

The structure of the website is simple. The  homepage has subtle navigation with pages that help filter articles by categories or tags. The prominent way to navigate is through the built in search that can filter specifically by the model of the hardware you are searching for. Beneath the homepage lies the masses of articles that are neatly disguised as fully fleshed out pages, but simply pull in elements from the homepage and specific content based on their tags.

Behavior

There isn’t any incredible behavior elements of Tom’s Hardware. There are some nice dropdowns from the nav and a useful  lightbox enlargement of photos. There is also a scrollable gallery of the latest articles on the homepage which is useful for frequent and daily users.

Design

The website is not very nice to look at. It is very clear that the emphasis is on content and styling seems to be mainly used to ensure that the content is usable. Red bars, white backgrounds, and lots of text makes Tom’s Hardware feel like a newspaper. The static design elements are really uncomfortable especially for widescreen users which most PC enthusiasts are. Some of the icons and nav elements are very sleek and pleasing but contradict the stark print feel of the rest of the site. The design doesn’t make the content unusable, but it certainly doesn’t boast user friendly. The design definitely doesn’t reinforce the site’s tagline as “the Authority on Tech.”

In all, Tom’s Hardware get’s a 10/10 on content, but I’d rather follow them on Google+ or subscribe to their RSS feed rather than spend time on their site. If I do visit the page I go straight to the search bar to bypass the homepage and jump straight into whatever content I’m looking for.

Google Power Searching

Use define:(term) to find definitions without typing as many words! This is much better than typing What is the definition of coagulate? Instead; type define:coagulate.

Search by file type using filetype:(extension). This will filter results based on extension. For Example, find a cat vector using cat filetype:svg.

OR will help find synonyms or alternatives. Maybe you are searching for biological articles about philodendron xanadu, but you know that the article may contain botany instead of biology. Search philodendron xanadu botany OR biology.

Use intext: to verify word is contained in a page. To verify a philodendron xanadu article is biology related, seach philodendron xanadu intext:biology

Use WHOIS to find site owner. WHOIS youtube.com will show that Youtube is owned by Google Inc.

Web-based services: DeviantArt

DeviantArt is a hub where artists (deviants) submit there artwork (deviations). DeviantArt has always been focused on creative freedom and expression. As a result, the site is home to ideas and media of all kinds. Media ranges from sketches to vector logos and even literary works. The pros of DeviantArt are that you can find graphics about anything and individual artists have unique spins on pre-existing themes. The cons of DeviantArt come with almost any art site; inappropriate images and masses of strange fan creations. However, that is part of creative expression. Luckily, the site revolves around searching, filters, and categories. A proper search will filter out the things you don’t really want to see. I’ve been a deviant for almost ten years and I frequently visit the site to gather inspiration. A quick search, based on whatever I’m currently working on, shows me what hundreds of other artist have created: the good, the bad, and the ugly. From this, I have learned interesting techniques and what not to do. Deviants, also love to share their Photoshop brushes, templates, and image bases.