Chat Nov. 9 &11 — What Web Designers Can Learn from Disney

Choose your 3 favorite take-aways and write about why you find them so meaningful, personally.

It was hard to narrow it down to just three because he offered a lot of good advice and made several great points:

  • “Designers shouldn’t ever think they’re purely making art or aesthetics.”  Design is not art and this is where designers starting out run into trouble. Because they have a hard time separating themselves from their work.
  • Designers are problem solvers “attempting to make tasks easier through familiar patterns, intuitive experience, and invoking emotions in their operators. 
  • Curiosity enables growth
  • Design is a process, not a single mockup!  It takes time,  a lot of back and forth (conversation) and critique. This is another area where young designers run into problems. The first idea isn’t necessarily the best.  So it’s important to come up with several ideas and get feedback in order to come up with the best solution.
  • Be humble and embrace critique. Don’t take things personally.
  • Surround yourself with people that challenge you and push your designs to be better. Absolutely. You can’t grow if you don’t collaborate with others.

 

 

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

Creating and Editing Custom Themes

Chris Croyier makes creating a custom theme from scratch look so easy. His workflow is well organized. I especially appreciated his starter folder. This is how like to start all of my projects as well.

He demonstrated the advantage of writing the static HTML and CSS code and making sure it works before jumping into the CMS. While it’s tempting to jump in to the CMS right away, I can see the importance of concentrating on good markup first.

Word Press using PHP and MySQL to dynamically build the page. For example, index.php is composed of three main sections header, sidebar and footer. Three PHP lines get.header, get.sidebar, get.footer tell the database to grab the php files with those names and essentially display the information from each respective PHP file in spot where the “get” command is showing.

I found the introduction to custom fields very interesting. Custom fields allow you to store bits of data within in them and then apply them to template pages. Each product page for the sample company will have price, product code, & dimensions which are custom fields in the parent page that are applied to the child (product) page.

 

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/