For Project 3, I am going to make a website about my favorite hobby, exploring! I will post pictures, location information and specific information about the hikes and drives I explore around the Hill Country.

The first mobile-friendly site I chose was for Jimmy Johns… which I use all the time. It has definitely evolved since online ordering started taking off. I remember not being able to get my address to show up correctly, submit buttons not working and pages freezing all the time. Over the past few months they have updated the site, and now I never experience any problems. Jimmy Johns is an example of a responsive site, because it uses the same basic layout and just repositions items on the site to fit whatever device you are using. The site has 2 different layouts, one for using the full desktop screen, and then one that changes when you shrink the window on your desktop to a more streamlined version: this is the version used on my iPhone, too. The sites change enough to optimize your experience for using the site on a mobile device, but it keeps that same theme on any device you are using to view the site.

The full sized desktop site has an order online area at the top, a navigation bar and a logo at the top of the page. It also has more graphics, shows the recent tweet from @jimmyjohns, and shows pictures tagged with #jimmyjohns on Instagram. The site also gives you the option to add Jimmy Johns on Facebook, Twitter, Pinterest, YouTube and their blog.

The more streamlined version, for smaller windows and mobile devices, has the most important parts of the website on the homepage. It has a tiny logo at the top, a tiny icon for finding a location, it has one graphic, an order online area, and then the navigation menu at the bottom of the screen.

Victoria’s Secret is a good example of a dedicated web site. The desktop version stays the exact same size, no matter how small you make the window you are viewing it in. The desktop site is broken up into sections, each section has a picture of a model with some text and links inside them. The text is mostly advertising some sort of deal like “Free Shipping on Swimwear” or “25% off” and then they link you to areas of the that relate to the deal. They have an area that allows you to sign up for special offers, to login to your account or to search the website for a specific topic. They have a navigation menu for all of their Victoria’s secret products, and another separate navigation menu for all of their Pink products. At the bottom of the website they have limited edition deals, information about the VS credit card, Account information, Customer Service, links to download apps for separate devices and a subscribe area. Also, they have links to the official Victoria Secret Facebook, Twitter, YouTube, Pinterest and Instagram pages.

The mobile site for Victoria’s Secret is much more streamlined than the desktop site, but it still has almost all the same information. It has the separate tags for Victoria Secret and Pink products, and underneath those tabs it has small icons to show where you can click to see a whole menu, where you can search,  your profile, what you like and what is in your cart. Instead of advertising all of their deals they just have the pictures of the models as links to get to the bra, panties, clothing and swim areas. I personally think they should have stuck with showing the different deals, because that is what most people are interested in when shopping. Then they have all your account information, card information, App information and Subscription information at in a drop down menu. I feel like the mobile site has a little too much information on it, and they could have done a better job at only putting the most clicked areas on the home of the mobile site. Even though there is a lot of information, they still did a good job at organizing mobile site, with the most important information toward the top of the page.

Project 3 topic

I will do a hobby site. I would very much like it to be about my crocheting, although I know you said it should be different. On a limb, I am outting myself as a total loser: besides work and school, I don’t really have any other hobbies besides playing with string and turning it into useful objects and wearable garments. Insert frown face.

Responsive Websites

Craftsy

Craftsy is a really fun site that makes me feel as excited as I was when I was a kid watching Saturday morning cartoons. There are tutorials on every kind of artisan craft you could imagine, and more are being added every day. I was happy to learn they have a great, responsive web design that adapts to your browser size. No device detection appears to be at play, since browsing the site from my iPhone showed me the same format.

Jo-Ann Fabric & Crafts

Jo-Ann’s website is also responsive, but the large banner at the top of the homepage doesn’t scale down with the rest of the site and navigation. It remains huge at the top of the screen when you decrease the browser size on a desktop. However, when browsing from a mobile device, it appears device detection serves up a differently formatted banner.

Website Reviews

Knitpicks.com

Knitpicks.com is one of my favorite sites to buy yarn. It is easily navigable, and I can always find what I’m looking for quickly. The alternating web banners on the homepage entice and inspire knitters and crocheters with brilliant colors, high quality photographs, and relevant copy that invites the shopper to click deeper into the site. The copy and overall structure of the pages provide enough contrast so the shopper can easily click and browse without struggling to read. I consistently browse this site because of how easy it is to use and find what I might want to buy.

Eat24

Eat24 is my favorite way to order food delivery to my apartment when I’m completely occupied with work and school. The search bars to locate restaurants that deliver to your house are the most prominent thing on the page. There isn’t a lot of clutter on the site either, keeping the viewer focused on the matter at hand: locating food for the tummy. Throughout the ordering process, the menu is extremely easy to use, and the copy is short and to-the-point, providing a fast and easy experience. Although the website design isn’t “responsive,” their mobile app provides mobile users a fast and easy way to order food as well.

Knitta Please

Magda Sayeg, from Austin, TX, is one of my favorite artists. She designs and executes large-scale knit and crochet art installations, usually in very public places like downtown Austin, the Google building in NYC, or even Etsy’s headquarters. I’ve always loved the layout of her site. The simplicity of the layout provides a stark contrast to the vibrancy of the images of her installations, inviting the viewer to click through her gallery. Because of the lack of clutter, the navigation floating at the top right is easy to find, although not distracting to the images below it. Although her “Store” link doesn’t work, overall it’s a great website for an artist.

Texas State Culture Pics

I chose these three photos because I took them during my first few days at Texas State. Every morning, I parked in the commuter lot at Strahan Coliseum and walked through Sewell Park, J.C. Kellam, and up the hill to Old Main. I would get so excited about spotting wildlife, and I took pictures whenever I could. This is one of the key memories I’ll have when remembering my time at Texas State University.

• Website #1: http://flightoftheconchords.co.nz/

This website is awesome, but I might be biased because of how much I love the show! The colors pop, there is a cohesive layout, and it is funny. The links are in cool fonts that look like highlighted crayon when you scroll over them. There is easy navigation to their music and video pages along with tour dates. I like this websites simplicity and how well it captures the playful nature of the show “The Flight of the Conchords.” Be sure to click on the “Ultra-High Fidelity Music Box” to pull up the music player and make the tape recorder dance. Very interesting way to present music on a website, I would like to learn how to do this. Pretty sure it is a flash feature. They also have a “Chords & Lyrics” page which I found really intriguing as a musician/songwriter/guitarist to learn their songs with ease.

Hilarity…

Quote: “I’m not cryin’. It’s just been raining… on my face.” – Jemaine

• Website #2: http://jackjohnsonmusic.com/home

I really like Jack Johnson’s website. The sites elements are aligned well and the colors of the text contrasts well against the wood-grain background. This site also does well representing the mellow vibe of his music and lifestyle. I personally like the rustic wood style of the page as you can tell by my own website Jeremy-goble.com. I also like video box on the home screen so it is easy to see and hear his most recent material. I also like the Instagram photo slideshow on the home page as well. It allows for a lot of material to be viewed in a small, clean space.

I’ll admit it, I’m jealous!

Pretty wild compared to the entire possessions of a family from Bhutan out of the book “Material World: A Global Family Portrait”

Website #3: http://walkingwallofwords.com/

This website belongs to a pretty cool experimental indie band called Neutral Milk Hotel. I like the style of art they used on the website, particularly the flying gramophone on the home page. There is a very simple four-page layout with a charity page that I thought was really cool. A portion of concert proceeds and one dollar from every box set will be donated to children in need. When you click on the page links they open on the bottom of the screen and add colors and images that contrast the grey vibe of the home page.

San Marcos Photos:

Unfortunately I wasn’t able to take my own photos in San Marcos for the blog project this week because I live in Austin. However, I did find some really great photos on the internet that capture my favorite places in San Marcos. The first picture is of the San Marcos River where I love to hang out and relax, along with everyone else in San Marcos some days. There are few places I enjoy more than the river on a quiet day.

The second photo is of one of my favorite music venues in San Marcos, Cheatham Street Warehouse. This place has a ton of history with some incredible Americana musicians stopping in for shows frequently, including one of my old songwriting teachers Will Sexton who I saw play there several times.

The last picture is of another place I frequent in San Marcos, Tantra Coffeehouse. This place has some lively music in the evenings; my favorite is bluegrass nights. One of the most impressive young singer/songwriters I’ve seen in the past few years named Grace Park used to work at Tantra (she still might). She is currently playing gigs in Central Texas with a group called Grace Park & the Deer. I highly recommend you check out their music or go to a show if you see their name on a poster around San Marcos.

So I decided to make a separate twitter account solely for school/business purposes! I tweeted AP, Sugarscape & Hunger magazine. I hope to eventually work for either publication, and I’m obsessed with AP updates so I decided to tweet them for this post. I asked them about internship opportunities and advice for my future as a copy editor &/or journalist. I also threw in a tweet & link to Edible San Antonio where I’m interning this semester. Do me a solid and follow/like their pages! Here is their Facebook & Twitter links.

The three websites that I think are well designed are Facebook, our Web Design and Publishing, and The Huffington Post. I thought I would list the design principles in the book, and then list how well the websites follow those principles.

Alignment:

Facebook, Web Design and Publishing and The Huffington Post all  follow the alignment rule by keeping all of their web content aligned to the left. The only exceptions are the centered headline pages of The Huffington Post.

Proximity:

Facebook– All the stories have their own box that they fit into, with your picture and name right next to your post. So you always know exactly who a post belongs to.

Web Design and Publishing– Every headline is close to whatever it is talking about, and there are not any unnecessary spaces. Areas are boxed off into relevant sections, and then sectioned off again into more specific sections.

The Huffington Post– All the pictures, links, posts, surveys and advertisements are close to what they are talking about. The page has an organized feel even though there is a lot on it. On the page they group sponsored links together, the most popular stories grouped together and the same types of stories together.

Repetition:

Facebook, Web Design and Publishing and The Huffington Post all follow the same repetition rules,  they stay with the same font, color, logo and basic layout from page to page.

Contrast:

Facebook has a nice contrast to it. The blue front on the white background is really easy to read. The headings of profiles use white lifted font so that you can read it easily on top of photos.

Web Design and Publishing and The Huffington Post both have very simple but effective contrasts of black text and a white background that makes it easy to read everything on the page. Every title is bolded for more contrast and to show the most important parts of the page.

Texas State University started classes in 1903, and the first building built was Old Main. It’s beauty and history makes it one of the most recognizable buildings on campus, which is why I chose it for my first photo.

My second photo is of the statue of Lyndon B. Johnson reminds students of the great man that attended our school. The LBJ photo I took also shows a ton of stairs in the background, which is something that every person who has attended Texas State will remember.

My third photo is of a garden that I found while I was looking for my class. I think this photo shows all the beauty of the Texas State campus, which is the main reason I decided to move to San Marcos.

I learned the four basic design principles are alignment, proximity, repetition, and contrast. Alignment is what I stress over the most with any design I work with. I like things to be neat and orderly and I feel in web design it’s important to help in keeping continuity page to page.

I asked two voice actors, John DiMaggio and Maurice LaMarche, about what advice they had for people just starting out. I was very frustrated that I was limited to 140 characters, because I wanted to be more specific. I have yet to receive a response, but am anxious about getting some.

I also @replied my improv teacher Amy Jordan. I asked her what she thought it took to get started in comedy.

This was a fun exercise and I’m looking forward to getting some good knowledge.

It’s a lot harder for me to keep up with a conversation about creating a website as it is.  So when I think about having a class assignment to read over laying out a webpage, I’m already a little hesitant about the topic before I even read it.

The resource on TRACS was a helpful read because it felt like you were reading the “boiled-down” version of what you’re supposed to do when creating a website. I felt like I was getting casual advice on the dos and don’ts of how to layout a page. Having the tips after the example pictures certainly helped with getting a visual of those examples were either good or bad and why.

The most helpful tips I learned were definitely universal rules like to never mix your alignments. Remembering to think about the contrast between the text and graphics will be helpful to think about as you’re choosing a color. I also didn’t realize that every web “site” is only one page.

My Twitter questions were asking how to get a job in a Sales job market and how to get into two PR departments for the Houston Astros and the Houston Rockets.

Let me tell you… designing your own website is both WAY more difficult than you would think… but at the same time it is surprisingly simple and easy. I feel like designing your own website is like the question, “Which weighs more? 100 lbs of bricks or 100 lbs of feathers?”… The answer is simple, but if you over think it you will end up not knowing what to do. And I am the QUEEN over over thinking so obviously I had a hard time trying to set up my Balsamiq and designing the wireframe for my website.

Thats when I decided that I should try to read the chapter from The Non-Designer’s Design Book that @_caryanne assigned to us. I was really taken aback at how interesting and easy  the chapter was to read and understand, and how much it helped me with getting my wireframe started.

The chapter starts with talking about alignment and how important it is to keep the same alignment throughout your webpage. The chapter said that if you mix alinements (like center and left) it makes your webpage look sloppy and makes it hard for your user to understand the flow of your webpage. So that was the first thing I fixed on my webpage. The chapter said that center alignment wasn’t the ideal alignment to use, but I liked the look of it so that’s what I stuck with.

Then the chapter moved to the importance of proximity on your webpage. I hadn’t really thought about the importance of the proximity of my headlines to my paragraphs. When I looked at all the examples given, I could see how putting too many spaces between parts of my site that are supposed to go together, can make those parts look like they aren’t supposed to be grouped together. So I fixed all those issues on my wireframe.

The rest of the reading talked about repetition and contrast of webpages. Before I had read this chapter I already had an idea about those two elements, and had incorporated them into my design. It was helpful to know why these elements were so important to design. Repetition is important because it makes your pages seem like they fit together and not like separate people designed every separate page of your site. Contrast is important because it makes it easier for your user to read, and also can point out the most important parts of your page.

All in all, the chapter really made my webpage design much simpler, and I felt a little silly for freaking out so much about how to design my page. I will definitely be reading all the assigned readings before I try to tackle our next assignment!

Now, for the Twitter assignment.

I had a little bit of a hard time with this assignment, basically because I still don’t know what I want to do after I graduate. All I know for sure is that I want to do something in the communications field, so I googled the top Public Relations and Marketing Pros on Twitter.

The first person I tweeted was Philip Parancias who describes himself as an “Industrial/B2B digital marketing specialist, blogger/author, speaker. New York.”

I asked him: @Flip2Market I am a student at #TXST and I was wondering what digital marketing tools you think are the most useful?

He replied: Hi @brittaniii there are many. Here are a few faves: For social – @hootsuite, email – @myemma for integrated/automated – @hubspot.

The second person I tweeted was Kathy Jacobson who describes herself as “A full-service public relations, brand building & cause marketing agency representing sports, lifestyle, fashion, philanthropy, events & consumer brands.”

I asked her: @KathyJacobsonPR I am a PR major at TXState and was wondering if you have any advice on what has helped you become so sucessful?

She replied: @brittaniii what a cool tweet! I would say work hard,learn everything you can, intern,volunteer,never give up & never ever quit. #girlpower

The third person I tweeted was Dorothy Crenshaw who describes herself as “CrenshawComm.com  #PR. Word nerd. Fiction fan. Adoptive mom. Fitness buff. PR,communications, social TV, marketing, tech, media, politics, popculture”

I asked her: @dorocren I am a PR major at TXState & I was wondering: What do you think the are the most important qualities of a PR pro?

She replied: @brittaniii Writing/content skills, verbal comms, media sensibility, renaissance knowledge (knowing re many things), intellectual curiosity

I was EXTREMELY surprised that every person I tweeted, tweeted me back. Everyone gave me great advice. This assignment has showed me how helpful Twitter can be, and how I need to keep tweeting and stop resisting Twitter.

I’ve had a Twitter for awhile now, although I don’t really know why because I probably only average two tweets a year. It does seem like it’s pretty useful at spreading news around, because if one person tweets something important it can get retweeted and spread around pretty quickly. I’ve retweeted before so I didn’t have too much trouble with this assignment, except that my computer is slow and terrible and I want to throw coffee on it like that guy in the commercial that want’s to upgrade his P.C. The problem is I don’t like coffee, so don’t have any.

https://twitter.com/bacongrease55 There’s my twitter handle if you want to follow me… but remember you’ll have to wait another six months for my next post.