Scrapbook 10: Tables & Forms

Google Analytics uses tables and forms in a way that establishes an over view in every aspect. For example, YouTube might have a general demography but Google Analytics goes further than just a simple table. Provided below are elements that Google uses to measure traffic. Within these areas is very simple and organized layouts but describes every aspect involved in measuring traffic.

Real-Time

• Overview
• Locations
• Traffic SourcesContent
• Events                                                                                                                                                                         
• Conversions

Audience

• Overview
• Demographics
  • Overview
  • Age
  • Gender
• Interests
• Geo
• Behavior
• Technology
• Mobile
• Custom
• Visitors Flow

Scrapbook 9: Grid vs. Non-Grid Design

Two websites that are similar in nature is Crush Soda and Coca-Cola. Coca-Cola typically represents a grid system known these days as a common formula of professionalism. However, Crush Soda does not represent a grid system and has a fun experience for the target audience. Crush Soda has various flavored drinks and are all represented on the home page in addition to nutritional facts. Coca-Cola has a more vague vibe in terms of current products they offer. Crush Soda has a fun slogan which automatically achieves an understanding of the content being presented in comparison to Coca-Cola which only has a common logo on the upper left (boring). In addition, Crush Soda is much more engaging in terms of their graphics and classy vibe. All in all, Crush Soda has a “wow factor” in terms of Graphics Design and Layout. In addition, I would give Crush Soda a thumbs up.

 

Project 4, Part 3: Local Business Website Site Maps & Wireframes Instructions

Original Wireframe and Sitemap concepts

 

•  Updated Sitemap 1 for client

 

• Home (index.html): Logo and Introductory text. Contains social media links and highlights of current projects. In addition, a description of the company overview leading the target audience to the service page.
• Service (service.html): Contains company overview and mission statement. In addition, the services are listed in videos from previous and current projects.
• Video (video.html): Contains videos on people confirming what their experience was. In addition, social media links to LinkedIn etc. may be present for written testimonials.
• Contact Us (contactus.html): Contains Maps, contact form, Skype, appointment scheduling.

Updated Sitemap 2 for client

 

 

• Home (index.html): Logo and Introductory text. Contains social media links and highlighted current projects. In addition, a music player is available; However, the player settings are not set to auto play.
• Service (service.html): Contains company overview and mission statement. The services are listed in videos from current projects. In addition, this page contains written testimonials and external links to testimonial videos.
• Contact Us (contactus.html): Contains Maps, contact form, appointment scheduling.

Updated Wireframe 1

Updated Wireframe 2 

 

Scrapbook 8: Multi-Column Website Research & Analysis

The multi Column layout incorporated into hotwheels.com is a very interesting experience. In addition to their main navigation, they have a sub navigation located in the middle of the page for each genre of game, cars, video, and shopping. Very organized, and an enjoyable experience. However, an issue remains in regards to consistency. For example, the games and video sections scroll down as long as their content is; in addition, a few lists say, “You have reached the end of the list”. At the end of a shopping page list, there is numbers located on the bottom right to continue the list by page number. Basically, I would obtain the page by number rule for each page. All in all, I had a very easy time navigating through this website.

Project 4, Part 2: Local Business Website Analysis & Concept Refinement Instructions

1. Personal Analysis

• Demi Game Studios has various employees that collaborate accordingly in each division such as music, motion graphics, 3d design, and video. Our production also provides a division for a team to promote all our current news, music, and projects to various social platforms.
• In terms of design, the contrast can be more profound to the true meaning and vibe that the website is trying to say. In addition the images can be more clear on what the services are being offered. It’s still a little vague as to what the true meaning is on the website. Although the main focus is music, the video incorporating throughout the website can be out of place in areas.

Services Offered:

• Music
• Multimedia (motion graphics etc.)
• 3D Design
• Video
• Appointment scheduling with vCita
• Skype
•  In regards to redesign; the layout, graphical elements, and text can be improved. I would simply change the layout to achieve a much more engaging vibe. For instance, I could have a simple animated background. My experience with other music promotion websites is to establish a fun experience while exploring every element. In addition, this site strictly serves a purpose towards advertising and collecting revenue from Performing Rights Organizations (PRO). In regards to layout, graphical elements, and text; this site can achieve a different layout as well as the logo accompanying the main focus of what my website means.

Requirements:  

• 2. Layout
• 3. Graphical Elements such as pictures accompanying the purpose of my website
• 4. Consistency in text etc. (Logo)
• 5. Color / Contrast
• 6. Explore every element easily

Websites related to my website:

• http://www.markallanwolfe.com/#sthash.P6S2xt9w.dpbs (example of a multi-column layout)
• http://www.dembiakmusic.com

Sketches of Designs and Sitemaps

Website Design 1

 

 

 

Website Design 2

 

 

Sitemap 1

 

 

Sitemap 2 

 

 

2.  “Partnered” Analysis

• I met with my client and discussed ideas in regards to design, layout etc.. As a result, he wanted to achieve drop down sub menus to the navigation as decided on a mutual agreement. As a reminder, I made it well known of my current skill level which is basic HTML and CSS. He discussed 3D elements that were an interest to him. In addition, I took those ideas into consideration for future web design skill goals.
• It was discussed that personality in pictures and graphics mean everything to the target and general audience. As a result, the design sketches above were changed and integrated as an over view of our mutual agreement towards Demi Game Studios. He had various good and bad feedback which made me grew as an individual.
• I brought up meaningful elements geared towards the layout. Currently, I had the client provide pictures, graphical items, and all other media to me to get a better vibe. At a later time; if needed, I will elaborate in a graphics program such as Illustrator, Photoshop, etc.. In addition, the client agreed to leaving the text exclusively to him. Then, I will incorporate it in the website. I came prepared with a open mind whether good or bad. All in all, we grew a stronger relationship. In addition, I left with confidence that I will meet the client’s criteria.
• I made it very clear about the specified deadlines which is realistically towards the end of April.

Project 4, Part 1

Demi Game Studios

On a marketing stand-point; my website can simply be redesigned in various areas. This is thought of as the layout, graphical elements, and text. I would simply change the layout to achieve a much more engaging vibe. For instance, I could have a simple animated background. My experience with other music promotion websites is to establish a fun experience while exploring every element. In addition, this site strictly serves a purpose towards advertising and collecting revenue from Performing Rights Organizations (PRO). In regards to layout, graphical elements, and text; this site can achieve a different layout as well as the logo accompanying the main focus of what my website means. All in all, my website needs a redesign in various areas as well as some polishing.

Currently, my website has eight pages that were designed by me. However, I did not code one bit of it because It was done on a site builder. As I continue through this class, I gain more knowledge and insight in regards to contrast and the “dos and don’t s” in web design.

Requirements:

1.(Main Focus) Home Page and Sub-Page

2. Layout

3. Graphical Elements

4. Consistency in text etc. (Logo)

5. Color

6. Easy to explore every element

Website: 

http://www.demigamestudios.com

Mission Statement:

demigamestudios.com is an online website that promotes motion graphics, 3d design, & video services in addition to composing music for publishing and licensing to various tv, film, and game companies. Unlike other websites that promote services, demigamestudios.com establishes an expedient approach to fit any genre from Electronica to Orchestrations to Rock and Rap including music videos of any form.

Word Map:

Project 3, Part3

Military Brat (subculture)

1. Sketches

2. Concept Statement:

• “Military Brats are thought of as stronger individual’s from childhood to grown adults. Currently, in this generation; every kid should go through this as a sign of discipline in addition to growing as a mature person and not taking the simple things in life for granite. What doesn’t kill you will make you stronger.”

3. Military Brat home page and subpage 

Military Brat home page

Military Brat subpage

Project 3, Part 2: Deconstructing a Subculture Site Maps & Wireframes

Military Brat Site Map Version 1

 

Military Brat wireframe version 1

• Home (index.html): Welcome and Introductory text. Contains social media links. Contains external links to downloadable documents. These documents contain Terms and Conditions.
• Benefits (benefits.html): Contains information on future education and external links. Contains photos and government application sites.
• Join the Military (jointhemilitary.html): Information on how to apply. Contains external links and photos of application websites. This page accompanies some info on the “Benefits” Page.
• Veteran Jobs (veteranjobs.html): Various Information of current jobs. (Includes video, Pictures, description, etc.)
• Contact (contact.html): Contains Google Maps of drafting locations in addition to the address’s, phone numbers, email, etc.

Military Brat Site Map Version 2

Military Brat wireframe version 2

• Home (index.html): Welcome and Introductory text. Contains social media buttons. Contains external links. This particular version has a blog spot to get the community more involved.
• Benefits (benefits.html): Contains information on future education and contains photo hyperlinks. Describes ways the military helps towards discounts.
• Off Duty (offduty.html): Information on what it’s like as an off duty soldier. This is described as not being as bad as anyone would think. In addition, there is a gallery of various photos.
• Veteran Jobs (veteranjobs.html): Various Information of current jobs. (Includes video, Pictures, description, etc.) Provides resources for any individual and contains sub drop down menus on this page organizing the various types of jobs.
• Contact (contact.html): Contains Google Maps of drafting locations in addition to the address’s, phone numbers, email, etc.

Military Brat Site Map Version 3

• Home (index.html): Welcome and Introductory text. Contains social media links. Contains external links to downloadable documents. These documents contain Terms and Conditions.
• Benefits (benefits.html): Contains information on future education and external links. Contains photos and government application sites.
• Off Duty (offduty.html): Information on what it’s like as an off duty soldier. This is described as not being as bad as anyone would think. In addition, there is a gallery of various photos.
• Join (join.html): Information on how to apply. Contains external links and photos of application websites. This page accompanies some info on the “Benefits” Page.
• Contact (contact.html): Contains Google Maps of drafting locations in addition to the address’s, phone numbers, email, etc.

Scrapbook 7: Color

http://www.musiciansfriend.com

http://www.guitarcenter.com

Musician’s Friend and Guitar Center’s website are very similar in terms of contrast between colors. Yet, very simple but engaging and easy to explore every element involved on each page. The main focus is geared towards selling product, navigation and is direct and straight to the point. In regards to Guitar Center, they make it obvious in red where the strong areas are to be focused on. Every element in terms of color has it’s purpose; and both, establish a simple grey and white contrast background to accommodate each product as a result of every element balancing out. With that being said, both Musician’s Friend and Guitar Center have the same goal of engaging musicians from all over the world. As a musician, once you see the main products, you get sucked in like a black hole and become addicted. In addition, if a musician come’s across these websites, it can result in returning customers. If I were to redesign the color, I would accomplish a black transparent background including a current famous musician in the back. In addition, the pictures will need to accomplish a lighter color to accommodate for the black transparent background.  All in all, Musician’s Friend and Guitar Center use the same approach in terms of background color and product introduction.

Scrapbook 6: Small Business Website Research & Analysis

L.A. Ornamental Corp on a marketing stand-point provides a great approach in terms of selling every product known-to-man for any type of gate. This site exists to simply sell various products to fit every gate application for the consumer; In addition, this site strictly serves a purpose towards advertising, selling  and collecting revenue from customer’s. In regards to layout etc. this site can tone down the graphics, eliminate unnecessary design items, make the text readable, and cut down the file size of the page. My first reaction is “Where’s the focus?” My eyes are immediately drawn toward the large picture of a welder which would be marginally ok if this was a welding website. My eyes are then drawn toward the garish red navigation buttons. Next, I look for the logo and I don’t find a “real” logo, but some text saying “Welcome To Gates N Fences.” I mouse over the two pictures at the top of the page and I see text that’s impossible to read. All in all, L.A. Ornamental Corp did a good job for the most part in terms of products they sell but various elements need some polishing.

http://www.gatesnfences.com/index.html