Category Archives: Web

Chat Oct 29-Navigation Trends

disus

 

https://disqus.com/websites/

What is special about the navigation? Two kinds of navigation, paralax scrolling on individual pages as well as links from page to page
What is good about it? Changes from no background to colored background as you scroll down.

What is a possible drawback or caveat to using this navigation? Too much and confusing to have two types of navigation

bigspaceship bigspaceship-nav

http://www.bigspaceship.com/

What is special about the navigation? Navigation default state is hidden on left side (like mobile device)
What is good about it? Clean, simple

What is a possible drawback or caveat to using this navigation? Hidden. Hard to find unless user is tech savvy and is familiar with the icon that indicates “menu”. Also, each time you click, icon becomes hidden again.

data eyesdataeyes-nav

http://dataveyes.com/#!/en

What is special about the navigation? When user hovers on navigation link, the entire navigation shifts down. The active page is bold and has a bar above it to indicate the page the user is on.
What is good about it? Located at top. Easy to see

What is a possible drawback or caveat to using this navigation? The hover/shifting animation gets old quickly.

glossyrey glossyrey nav

 

http://www.glossyrey.com/#hello

What is special about the navigation? Social media looks like a nav bar top left instead of icons. Navigation is top right, starts with contact email and consists of 2 numbers. Once clicked, scrolls to location on same page.

What is good about it? Located at top; simple; parallax scrolling, clean

What is a possible drawback or caveat to using this navigation? Not what a user might expect. (Not intuitive).

wordspicturesideas wordspicturesideas nav

http://wordspicturesideas.com/

What is special about the navigation? One arrow below the hero image

What is good about it? Simple. The arrow indicates something will happen if you click the arrow. Parallax scrolling

What is a possible drawback or caveat to using this navigation? After the arrow is clicked and the page scrolls to the “about” section, there are no other navigation buttons or links available to move through the site.

equus-design nav equus-design

http://www.equus-design.com/

What is special about the navigation? Parallax scrolling vertically and horizontally

What is good about it? Located at top; simple; parallax scrolling, clean, intuitive

What is a possible drawback or caveat to using this navigation? Animation overkill

 

missjuliapiep missjuliapiep nav

http://www.missjuliapiep.com/

What is special about the navigation? Very simple, parallax animation

What is good about it? Starts below hero image on home page, moves to top after it is clicked simple; clean, intuitive

What is a possible drawback or caveat to using this navigation? Looks like the site uses parallax scrolling on the same page but it is actually a transition from page to page.

 

 

www.teehanlax.com/teehanlaxteehanlax nav

What is special about the navigation? Navigation default state is hidden on top right side (like mobile device). The word menu is to the left of the icon
What is good about it? Clean, simple, out of the way

What is a possible drawback or caveat to using this navigation? Hidden. Each time you click, icon becomes hidden again which can be annoying. Would be better if user has choice to keep it open.

 

daniellelaporte

daniellelaporte nav

http://www.daniellelaporte.com/

What is special about the navigation? Parallax scrolling vertically and horizontally

What is good about it? Located at top; parallax scrolling, clean, intuitive

What is a possible drawback or caveat to using this navigation? Confusing. On hover, more link options. User expects parallax scrolling on home page. Info on home page easily overlooked.

 

olympicstory.

olympicstory nav

http://www.olympicstory.com/

What is special about the navigation? Navigation default state is hidden on top left side (like mobile device).
What is good about it? Located at top. Out of way.

What is a possible drawback or caveat to using this navigation? Hidden. Hard to find unless user is tech savvy and is familiar with the icon that indicates “menu”. Also, each time you click, icon becomes hidden again. The animation gets old quickly.

 

Which navigation style or concept in the article would, in your opinion, work nicely for the http://ftwebdesign.com/ website? Punkave.com uses a nice clean navigation. It is intuitive and clean. On hover, there is a nice transition between buttons.

Oct. 19 & 21 — Amazon E-Commerce Lessons

What did you find important and interesting about the redesign discussion in the article? The article mentions how the redesigned Amazon site improved in three major areas: aesthetics, usability and merchandising. I found the comparison (before/after) helpful in understanding how the site was improved. The important lessons learned: clean is better than cluttered, highlight research, include a content slider, details make a difference, and merchandise serve as pointers for other retailers to consider when evaluating their own sites.

What article did you find that shed light on different things that Amazon does well?
In the article, “Amazon’s Performance Secrets,” author Bryan Eisenberg, talks about how Amazon was built on the four pillars of success:

  • Customer Centricity
  • Continuous Optimization
  • Culture of Innovation
  • Corporate Agility

From its earlier days in 1995, Amazon has always put the customer front and center. Even then, founder Jeff Bezos, “realized that the unique advantage of the Internet was the ability to programmatically learn more and more about your customer and personalize their experience.” As a result, Amazon is always trying to learn, measure, adapt and plan to optimize every aspect of their business.

http://www.bryaneisenberg.com/amazons-performance-secrets/

 

Provide the screen capture from the current Amazon site and explain some things you found. Is the site of today quite similar to the one that they had when our chat article was written? The current site is pretty much the same as it was when the article was written. How? And how different? The only big difference I found is that there is an area called “Related to Items You Viewed”

Amazon

Chat Oct. 4, 6, & 7 — Off the Grid!

  • What are the benefits of designing on a grid? Grids help establish guidelines for how elements should be positioned in a layout., create balanced layouts. Why is it so recommended for web design? Anchors elements to the screen. Why is it a good idea to line things up on a grid rather than placing each item without regard to the others? Grids aid in establishing order and hierarchy. It’s important to understand the grid before you break the rules.
  • “960.gs”  Which one is your favorite and why?

    NIck Fink
    NIck Finck

Of all the sites featured, it feels the least crowded. The white background

  • Choose 3 of these that you think are too much on the grid and provide a solution suggested by the article that would work well for making the site look less grid-locked. In your blog, provide a screen capture of each site you’re talking about. Be ready to share your thoughts at our chat!
  • VCU Qatar:  
    pop over the well-defined edge of the main frame of content

VCU Quatar
Solution: Remove the gray background and the background from behind the navigation bar so that the ribbon effect is more visible. This will add more white space and also make the layout seem less boxy.

 

  • Pulse App:
    pop over the well-defined edge of the main frame of content

Screen Shot 2014-10-14 at 1.25.21 AMSolution:  Move the middle image in the row of hero images down slightly so that it is not aligned with the other two at the bottom

 

 

 

 

 

  • Simplified Safety:
    Use a badge, sticker, banner or ribbon to break the grid

Screen Shot 2014-10-14 at 1.25.39 AMSolution: Un-crop the circle graphics behind the construction worker so that the break out of the box.

Sept. 27, 28, & 30 — Freelancing!

In the first article, describe a plan for yourself to improve for each of the 6 “secrets” of getting freelance work. Provide concrete details explaining what you already do and also what you can do to get better in those 6 areas.

  • Push yourself to get good
  • Be Likeable, Excited and Enthusiastic
  • Be Referrable!
  • Design the portfolio you think your clients want to see-The language you use on your portfolio site, the pieces you choose and the presentation should all be pitched at the clients you are trying to land. If you want to make things to please yourself, go be an artist.
  • Focus on Clients and Be Flexible-be a problem solver
  • Get a High Profile-position yourself as an expert-get portfolio in design galleries (behance)

In the 2nd article, what’s the most important takeaway from How to Get More Referrals? Be the opposite of :

  • You aren’t very good at what you do
  • You aren’t reliable
  • You are unpredictable
  • You aren’t very likable
  • You are overpriced

1000-Hour Head Start Article — Starter Theme Method

As the article states, a starter theme gives you a 1000-hour head start on every project by providing everything that you need to get started including lean well-commented HTML 5 templates, 5 sample css layouts, organized starter style.css, navigation.js to create a toggle dropdown menu for small screens to name a few.

My favorite features of _s Starter Theme is that you get:

  • well-organized, modular file structure
  • Built in SEO
  • Validated markup
  • Responsive styles

Also compare what your initial impressions of the starter theme method are vs. the conversion method. What would the advantages and disadvantages of each method be, do you think?

The obvious advantage of using a Starter Theme is that you don’t need to reinvent the wheel every time you create a new theme. Since it is open source and in continual development, it reflects all the newest techniques and best practices to date. Another advantage is that in its bare bones state, its validated and works at all screen sizes. A disadvantage, is the possibility of “breaking it” when trying to customize it to create a theme. Another disadvantage is the existence of a lot of extra files and code that you don’t need.

The obvious disadvantage of the “markup” method, is that you are starting from zero. With no starter files, you have to build and style all the theme template pages from scratch. This can be very time consuming. Responsive styles would need to be built in to the templates as well.

The advantage of the “markup” method is that the developer has more control over the theme. It only contains the files you need.

Chat 9-16 Career Advice for New Web Designers

In the first article, what are two pieces of advice that really resonate with you? Explain why they are meaningful to you.

Becoming a problem solver and challenging yourself. These are two things that I’ve practiced throughout my career that have contributed to my success. More than a designer, I consider myself a problem solver. As for the latter, I love a good challenge. Coming from the print world learning web development is definitely out of my comfort zone but something I feel is necessary to remain marketable.

In the 2nd article, what are some things that you feel you should really strive to do when you start your web career? Why?
Ask lots of questions and most of all never be afraid to ask questions. No question is a dumb question.
Check you work. It’s always better to take a little extra time to be sure something is correct than trying to turn something in quickly and have it come back with corrections. Accuracy over speed is always best.

 

Read the “Comments” at the end of the 2nd article. What is an issue that they kind of disagree about? I have to disagree with the 9 to 5 section. For the most part you would hope that that is true. But as a younger dev, going above and beyond while working, staying late to finish a solution, doesn’t equate to being noticed, or getting extra appreciation, as a young dev managers view that as something that can be ‘capitalized’ upon. As excellent of a culture some web work places can have, people can still equate to just a ‘resource’ to some.”

Yes and no.

What do YOU think about this issue?

 I think it depends on the company and the culture of the company where you work. Also I think the size of the company can make a difference. In larger companies, it’s easy to go unnoticed because there are so many people whereas in a small shop, everyone usually has to go the extra mile and it tends to happen as a group so it’s impossible to not get noticed. You will eventually be compensated for the extra work but if it isn’t offered, you can always leverage that in an annual review.

 

 What is the best thing you learned from the Comments at the end of the 2nd article? That a lot of people agreed that it was a good article and that everything the author touched on are true and very good advice.

 

Chat: Sept 9-Critique for Jessica Morgan

Overall, it is a clean simple design. Easy navigation at the top. The biggest area of that needs improvement is the home page. The banner image contains a lone logo. This area would be better utilized to feature big images of the cupcakes. The product, should be front and center. Show me cupcakes and I a likely to stop by for a visit. Also tell me if there are any specials or discounts? The home page in general needs to be more lively.

The menu page could also be improved by utilizing a gallery with images of the cupcakes instead of a list of links that open images. In terms of user experience, the list is less interesting. It also doesn’t really give the user a reason to click on the link. A gallery, on the other hand, can showcase all products and if a user wants to view a larger image then when they click on the image, a larger full-scale image appears.

Chat: Aug. 26 — Never Heard of It, Revisited

  1. The author mentions some terms you might not be familiar with… What do the following mean and how might you use them yourself?
  • SASS-Software as a Service: software that is delivered in the form of a subscription. There is no need to download software and instead use it as a web based service
  • Webkit-Layout engine software component for rendering web pages in web browsers. It powers Safari (Apple)
  • RSS feeds-(originally meant Rich Site Summary now dubbed Really Simple Syndication) format for delivering regularly changing web content. News sites, websites and online publishers syndicate their content as an RSS feed to anyone that wants it.
  • Feedly-Google’s news aggregator (similar to readit) where you can organize, read and share what you choose to share.
  1. How does this article affect your views on how you will learn after you have completed school? The author says, “That is, higher-level concepts: software architecture, the successful union of Responsive Web Design techniques, working on distributed teams, the application of design patterns, usability concerns—these are what web mastery are built from, and so these should be the linchpins of my own personal, continuing curriculum.” You have to decide for yourself, what your focus should be. In an industry that is changing constantly, it is important to keep informed but it can be difficult and overwhelming to figure out what is important and relevant and what is “noise”. For me, I choose to follow what interests me in terms of where I want to take my career. So my focus is on UX.
  1. What’s your impression of what it is like to work in this field? It’s hectic and every changing. It is challenging yet also rewarding. Have knowledge of all areas but become an expert or specialize in one (PHP, Java) for example.
  2. Find another article that you recommend reading that is related to this topic. Provide a link and tell your blog readers why they should read it.How to Stay Up to Date on Web Technology by Chris Croyier of Treehouse
    Offers great advice on how to keep up with web tech in this video talk. He actually suggests that you don’t need to be a web news junky. To stay in touch. A few conferences, a few headlines and a few blogs. You would be ok.
    http://css-tricks.com/video-screencasts/125-how-to-stay-up-to-date-with-web-technology/

 

July 15 — Practice Critique #2

Write 1 positive compliment and 2 critical questions/comments, according to the rules/setup you just re-read.

(+) Clean, easy to navigate

(-) Only 2 images in slide show. Need at least 3 to feel like a slide show. Transitions too quickly between the images. Gets old quickly and becomes a distraction. Should always provide a way to turn the slide-show off.

(-) Home page could use some variety. Images of artwork on the bottom are quick links to those pieces but having them seems a bit unnecessary since they could easily be included in the slide show. Or if they are meant to be featured pieces, then adding a label above that section called “Featured Work” would help identify the section and give it some meaning or reason.

(-) The blog link should open in a separate tab or page instead of in the same window. When you click on the logo, in the blog, you expect to return to the homepage of her website, but instead the logo links the blog.

(-) Shop link, also takes you offsite. Whenever possible, mask links to 3rd party sites with your website instead of using a subdomain.

kristy gamill site
kristy gamill site

 

 

 

 

 

 

kristy gamill site critique (click to download PDF)

 

Take aways from Chat

Is there enough time in a “live” chat format to get enough good info if you are the designer? Yes. With so many people participating, a lot good info can be obtained. Also, it makes it easier to identify areas that need attention if many people bring up the same points.

Was there anything said that would have hurt your feelings if you had been the designer? No

How would you deal with the comments that were made if you were the designer? Even though I may not agree with every comment, I would take everything said into consideration. It is always to separate yourself from your work. My rule of thumb is if I have to over explain a design, then clearly it not communicating the way it should and deserves to be reexamined.

June Chat — “Look and Feel” Critiques

What did you find interesting/important in the Podcast? 

When I’m not a student or running the Creative Department where I work, I teach graphic design to university students and online. I’m quite familiar with critiques and feedback since that comes with the territory. In spite of this experience, I did find the podcast interview with Adam Conner and Aaron Irizarry very interesting and did learn a some things that I hadn’t considered before:

  • There is a difference between critique, feedback and a design review. Feedback is a gut reaction. Critique is more specific and is a dialogue. It focuses on how a design is or isn’t achieving certain goals to help the designer understand the impact of design decision. Design review is about signoff and approval.
  • There 2 sides to a critique- giving and receiving
  • Giving critiques is about trying to understand what the designer was trying to do, how they tried to do it, and if it’s working or maybe if they have more to do to get there.
  • Receiving critique is about understanding the impact of the design decisions that a designer has made so far, and where they should focus efforts going forward.
  • Different types of critiques:

o   Standalone (informal/ impromptu)-getting input from peers to see if the design is headed in the right direction.

o   Collaborative

  • To have a good critiquing session, it is important to establish clear goals
  • After a critique the designer should continue to work on the design giving consideration to the information obtained from the critique
  • Good idea to review goals and objectives before starting a critique session

Do you think suggestions should be allowed? Personally, I think suggestions should be allowed only if the person suggesting gives a specific reason for it:

Suggestion: Changing the background color of a Spa Website from light gray to light green

Reason:  Consider trying a light green background in lieu of gray. While gray is neutral and stable, the color green is often associated with the feeling of freshness and renewal, communicating the spa experience to the intended audience).

 What rules should we agree to abide by in our critiques?

  • Be constructive
  • Be specific
  •  Be respectful and professional at all times
  • Do not be defensive
  • Do not take the critique personally
  • Be prepared to explain your design decisions work.
  • Be prepared to explain your concept

 

List the questions that you think we should use when we do a Look and Feel Critique.

  •  What is the focal point of the design?
  • Does the design style seem appropriate for the stated goal or purpose?
  • Does the concept match the content and intended audience?
  • Is the site effective in engaging the audience?
  • Is the website’s interface and navigation intuitive and effective?
  • Does the site use hierarchy to organize content?
  • Does the typographical choices reinforce the design theme and aesthetics?
  • Does the typography feel appropriate in tone?
  • Details: Is the use of these particular graphic elements consistent with the goals of the project? Why? Why not?
  • Problem areas: What things in this solution are not as effective as they could be? Why do you think that?
  • Appeal: Is this an effective and appealing design for the context it will live in? Why? Why not?

List the resources/website links that you used to arrive at your list.