Inspirational sites

  1. http://www.rleonardi.com/interactive-resume/
    -Interactive and fun resume that gives all of the needed information for a resume, but also puts you inside of it.
  2. https://www.studioairport.nl/work-overview/
    -Grid structure of portfolio pieces as well as the pull out side navigation
  3. http://www.ollygibbs.com
    -Scroll over on portfolio pieces(how they bounce/color scroll over)
  4. http://www.bleed.com/#akleiberg
    -The portfolio pieces are lower in opacity until you scroll over them-then they come to life. Also how the portfolio pieces are laid out when you click to enlarge them.
  5. http://fresh-design.com.ua/en -Software, Advertising Campaigns and Interface section is simplistic and minimal until you scroll over that section, it then reveals more information about that specific section.  Also the background interacts with the mouse, it moves depending on where you have the mouse.
  6. http://nicolasborreil.fr
    -I really love the layout and also how the work can be viewed at the bottom of the page.  This site is clean but also very interesting.
  7. http://castirondesign.com
    Amazing and eye catching website that is not overwhelming. I also like how that information is displayed when you click to enlarge the thumbnail.  The design is very clean and yet very appealing.
  8. http://www.fortyonetwenty.com
    -This design is very clean with subtle textures applied to the background.
  9. http://alisdesign.prosite.com
    -I really like the navigation bar that moves down when scroll over, I also really like how the icons that change color at the bottom.  This site has a real style to it and feels original.
  10. http://www.justinmaller.com
    -His amazing work is very vivid in color, which he balances out nicely by a simple black and white color scheme.
Advertisements

Design Concepts

One of the main goals in the article was to be user-centric and in order to do this the author strongly advices that the developer creates a design brief for whatever project is about to be created.  Within this brief three questions need to be answered specifically focusing on the viewer:
1-who are they
2-what are they doing on your site?
3-what are the feelings that you want them to have when they visit or leave?

White space is very important to the design as we all know, but it is important to remember to make the white space feel balanced. Also remembering that every design has a problem so before creating the website create multiple sketches and really think about what the reason for the site is.

http://www.creativebloq.com/web-design/10-design-concepts-web-developers-need-know-11135255

Design principles

First off, it is important to do research on websites in order to figure out where certain items should go. For example, the logo should always go in the top left. Why? Well because that is the first place that people look and the user needs to know what site they are looking at.

Line spacing is also very important when treating text on a website, you do not want the user to get lost while reading.  White space is a good way to create balance, contrast and proportion.

Also it is very important to keep website standards in mind. An example of this would be having an underlined word on the page that is not a link-this is very frustrating to the viewer!

http://design.tutsplus.com/tutorials/9-essential-principles-for-good-web-design–psd-56

Web Typography

So what exactly are some of the basics of responsive web typography?  Like in any design, it is important to establish a hierarchy so that your title stands out.  It is important to “show,don’t tell” make your site be able to speak for itself!  One of the examples in this article mentioned about expressive details and making the website look like a magazine article.  It is also important to  create expressive subheads!

http://www.smashingmagazine.com/2015/05/benton-modern-typography-case-study/

Typographic Patterns in HTML

The author of this article decided to take research at three different widths full width desktop,mid-died and small. One of the studies he did was to find out Serif or Sans-Serif?  As to be expected, most sites had a serif typeface as a heading and sans-serif for the body copy.  Thankfully Times New Roman was not popular!  Of course, reading distance is key when considering what font size to use!  The average ration of line height was around 1.5 times the size of the body copy, which is what it should be.

http://www.smashingmagazine.com/2015/08/typographic-patterns-in-html-newsletter-email-design/

What did I learn from Web 1?

For the most part I did not have any real major problems with my website.  My only real problem came when I tried to add it last minute to the server.  When i did that I ended up having missed links, and my fancy box had not worked.  I then had to go backwards to find out what pieces of my project had not transferred to the server.  Also i found out that adding even a .3px of tracking to my portfolio page, made a huge difference.  For web 2, I will begin working on the server much sooner.

E-commerce design

On the main page think about adding a sign-up screen, so that returning customers are able to log in and skip most of the content they have already seen.  Also it is very important to include header and footer shortcuts to your website, for easy navigation.  Some of the best e-commerce websites include an inlined carousel slide,much like Netflix it focuses on different groups of people.  For example, “Trending Now” or “Sunday Brunch” this is an easy way to direct new customers on where to go.

http://www.smashingmagazine.com/2015/08/responsive-upscaling-large-screen-e-commerce-design/

Keep your App from sinking

When making an app it is important to test early on in the design process, as well as test often because early tweaking makes a huge difference.  Making multiple testing prototypes, even minimal and cheap are important.  The group that worked on designing an app for this blog, made multiple sketches, some on sticky notes.  It is also important to be aware of the communication between the executive manager and other members in your design team when creating this app.  Also make sure to get a lot of feedback about your app from multiple people, before releasing.

http://www.smashingmagazine.com/2015/09/lean-mobile-ux-lessons/