WEB 200: student design resources

Design articles

10 Best Tools & Tips for Choosing a Website Color Scheme
I learn tips for choosing the perfect color scheme for my website in second article. there are few things to keep in mind when choosing a color scheme: Make designs friendlier for the color blind, think about your audience and find colors that represents the brand. Also this article provides best tools for choosing a color scheme: Adobe Color CC, Coolors, Colormind,Material Color Tool, Color Safe Paletton, Colordot, Colourcode,Palettr and Material Design Palette.

10 Tips On Typography in Web Design
The author highlights the importance of typography as “more than 95% percent of information on the web is in the form of written language.” He then emphasized 10 a set of do’s and dont’s rule to optimize the typography on the web. It’s a general introduction to the typography for me to demonstrate the web content in a more readable, accessible , and usable approaches.

23 steps to the perfect website layout
This site gives you a host of information on how to design a great website. And by ‘a host’, I mean 23 specific things that a person should do while designing a site. Some of the things to think about and do include: Define what success means. Think in motion, Prototype, prototype, prototype. Design for the best; prepare for the worst. Rethink the established. Obsess over the design until you hate it. And Refine every component. This is a more in-depth resource that covers the visual design of a website from start to finish. It touches on all aspects of designing a site. I, personally will benefit from it and highly suggest it to my fellow students.

50 of the best blogs for graphic design inspiration
This isn’t a specific article on web design but rather a list of 50 blogs that deal with it. This is a great resource because the blogs covers a myriad of design aspects, questions, examples, personal styles and so much more. It can be used to get inspiration if you’re running out of ideas or have hit a block. From this site I will be able to look up any questions I have about web design if I’m having a problem. I feel this resource it significant because the topics cover the entire spectrum of web design.

How to choose Color for your Website – Best Tools
In this short video, she shared a couple of resources on the topic of color theory and how to choose a proper color scheme for a website. As she said, the color in design is very subjective and might evoke various feelings to different users. Having said that, there is a standard rule and some free tools that help us figure out what color palette works the best for our users. Thus, this guideline video gives me a practical idea of selecting the colors my brand-new website.

How to Pick the Perfect Font Style Design for your Website
Typography is one of the tiny details that could potentially have a major positive impact on website and business branding. so I found the last article which also provides tips to pick the right font design. Tips are: pick a font that actually matches your message or brand identity, pick a font design that matches the type of audience or customer you want to attract, is the font design easily readable? and choose a font that is versatile. This article also provides what kind of font should avoid to use. There are: don’t use tacky fonts, don’t use messy fonts that’s hard to read, not giving your lines enough space, don’t use too many different font designs, don’t use too many font colors and don’t randomly pick font sizes.

Principle of consistency and standards
I liked to know the standards in layout some websites when Microsft and apple use the left side for the logo, and the right side is the search bar for the website.

having consistency design will help to improve the user experience

Understanding visual hierarchy
This is a great resource for understanding visual hierarchy. It begins with describing the earliest forms of visual hierarchy, early human cave paintings and fills you with information about size, color, contrast, alignment, repetition, proximity, density & white space, and style & texture. It also lets you know that hierarchy can be used for both good and evil, really, it says that, (Pop up ads are an evil, I agree).  I will use this resource to help me better understand visual hierarchy and it will be a big help toward re-designing Whisker City website.

Universal web design principles
This is a great article I found about web design principles that I feel should always be considered when designing a site. It covers topics such a visual hiearchy, proportions, and the rule of thirds. One piece of information in this article that I found very interesting is Hick’s Law. Hick’s law states that “every additional choice increases the time required to make a decision.” Basically the more choices you give people, the easier it is to choose nothing. I will definitely take this into account when designing sites. I personally like the feel of clean, easy to use, not over-complicated sites.

Use of Negative Spaces, Contrast, Dramatic Typography and Simplicity
I learn how importance of the minimalist approach to web design and how users are attracted to sites that have a clean design from this article. when we design our website consider the following important applications of minimalist web design to maximize the effectiveness of an interface there are.

Visual design and usability
As for number 1 when you look at the redesign they need for watchery.com

How busy it was and with the new design focus only on the watch without the distraction from advertisement or other information not related to the product

With the new design you can easily see the logo and the phone number and the navigation very clearly, the banner with simple design, then the main focus on the watch and with the option that you need form colors and shape but in perfect order

Also on the same website although The New York Times shows that even with to much text how it can be useful and make the reader can absorb the amount of text and also demonstrate excellent visual

Summary of resources linked here:

Design resources

Adobe design blog
Since getting Adobe Creative Suite last quarter, I’ve been getting periodic emails about general design, layouts, and UX. I can’t find the specific blog post that I wanted to share, but I’ve found reading through the Adobe guides pretty useful as a beginner to both Adobe products and web
design.

Awwards, Typography
I also found the site selections on Awwards to be very inspiring and interesting to review. In particular, I explored the nominees on the subject of Typography. I find that typography is a very subtle art and often I struggle to execute it as effectively as I would like. I hope that by exploring a wide range of sites that utilize type in unique ways, I will begin to develop a more keen eye for type design and will be able to expand my internal library of font types and how/when to use each one.

Color/Kuler (Adobe)
I recently learned about Adobe’s program Kuler and I think it seems to be a pretty good resource for color scheme development. I appreciate that such an expansive library of pre-arranged color palettes is available. While I hope to develop the skill to pick and arrange a color palette myself, I think that selecting from existing schemes will help me develop an understanding of how these are built and provide an ongoing resource as I continue to take on new projects. I think that I am likely to lean heavily on a palette from this resource for my current site and am looking forward to reaching the stage where these can be applied.

For someone who understands almost nothing about color selection and color theory, this feels like a great place to start. It provides hex and RGB values for colors, and allows the user to select complimentary colors and tints based on their initial selection. Other users can upload their color palettes as a good “starting point” and inspiration to develop your own. Kuler saves you previous work, so you can always return and adjust later.

This is a tool I just learned about this week and feel that it will come in very handy. Adobe kuler lets you create your own colors and will pick an entire theme for you based on which colors go well together. It will give you the hex and rgb values so it is easy to input them into your code. (Lifehacker how-to)

 

ColorHexa
This is a color picking website that I’ve found super helpful. You can type in whatever color you want (even just like, “blue green”) and it gives you a breakdown of that color’s codes (CMYK/RGB/hex etc), along with its similar and complementary colors. I like it because sometimes a color I want to use is too dark or too light for what I’m doing, and this site helps me stay close to it without having to change things up too drastically.

Colormind.io
Much like fontjoy, this is a great sandbox to experiment with different colors for your site. Where it really wins the day is that you can upload photos and the site using deep learning will match a color theme to work with the colors in your photograph.

Design Resources (look at domain name!)
This is really more of a library of resources, but I found it helpful in terms of accessibility resources and color pallette resources. I like that they list websites for inspiration and criticism.

Dribbble
While not entirely an educational resource, it seems to be another good place for inspiration. For someone that sometimes finds themselves in a creative rut (“writer’s block”), it’s good to escape my own head and look at other pages that work… or don’t. The website posts full pages, wireframes, and color palettes to look over in a pinterest

FontAwesome
This online library makes adding social media and brands logos so easy. I use it a lot especially to add icons like : settings, arrows and all custom shapes that deliver the information and makes my website fancier and better looking.

FontJoy
For someone who is fascinated by fonts but has no skill whatsoever in picking fonts, I really like this site because it does it for me. You can choose between the type of of contrast or balance you want and press ‘Generate’. Be sure to switch the background color to white if it makes sense for you.

Google Fonts
Fonts… fonts… and more fonts! Select a font, get a suggestion for a pairing. Or lose yourself in a “font-hole” and experience all different fonts by browsing for hours. I’ve loved exploring the library of fonts, especially after taking a typography course last quarter.

SkillShare
Even though Skillshare’s best classes are usually under their monthly paid subscription, there are still a lot of really interesting tutorials you can watch about web design, or design in general. I’ve watched a few videos about typography, and some tutorials on using design programs that I’m unfamiliar with. I also prefer the video format vs. blog posts, because it really helps me see how everything is meant to look and feel. Every now and then someone I follow on Youtube or Instagram will have a discount code for a free month, which helps a lot!

Tasty Tuts
Since most developers out there are terrible writers, I tend to go to youtube first when I have an issue I’m trying to trouble shoot or learn a new skill instead of going through a book. However, I’ve never thought about going to youtube for visual design. Found this series and I look forward to learning from it.

ThemeForest
It is an online market for WordPress themes, free and paid templates, videos, 3D files and more. Even if you want to design your website from scratch, it is very helpful to check some references and the most popular templates out there.

ThinkDesign
It is an all-around blog with articles, resources and freebies ready to be used.It offers design inspirations, pros and cons of a lot of the well known Technics in Web and Graphic design. I like this Design blog because it offers reviews and information about design related and trending web Technics.

UX Design Weekly
This is a site that has almost everything you could want on user experience. It has articles about how to focus on customers, how long your page content should be, and rules of design research. It also has tools and resources such as design tools for for adaptive layouts and code prototypes. I feel this site could be a valuable resource.

Use of Negative Spaces, Contrast, Dramatic Typography and Simplicity
I learn how importance of the minimalist approach to web design and how users are attracted to sites that have a clean design from this article. when we design our website consider the following important applications of minimalist web design to maximize the effectiveness of an interface there are.

Web Form Design
This e-book covers a collection of the insights and best practices for the good ideas to constitute a good form design, from registration forms to checkout forms. Since there are some forms design needed in my site, such as event/program registration form and contact form, it’s an useful guide to help me conduct with a more user-friendly design for the users. I would recommend to read Chapter 3 on the topic of Path to Completion which includes some interesting ideas and findings about the clear scan lines, minimal distractions, and progress indicators, and tabbing.

Webby Awards (2017)
I really enjoyed reviewing the winning sites in all sub-categories of web winners and also found useful insights in outer categories including Moblie Sites and Apps and Advertising and Media. It seems as if the sites that win Webby awards are really pushing the boundaries of what is possible with online design, media and interaction. It is also educational to review winners of past years, especially now that the archives expand back for 20 years.  I hope that I am able to utilize some of the concepts displayed by the winners and nominees to inform the final design of my site.

Web site examples

Amazon – Desktop site
I’ve selected Amazon’s desktop site as one of my future visual design reference due to its undeniable success in the e-commerce world. Visually, I like Amazon’s apparent search bar embedded within a dark background. The contrast really helps users to develop a habit of going to the search bar at the same general location. I also like the placement and sizing of the shopping cart. The icon designed with an items counter helps customers to quickly understand how many things they’ve put into their cart.

The banner ads right below the search bar area is great for the seller to advertise ongoing promotions and seasonal finds. This also can lessen clicks for users if the banners are timely and attractive enough for impulse-buy.

Beoplay
They have nice design can help me with how to have logo and navigation straightforward and easy, presenting the item with description and price this model will help me with the design of the desserts shop I will be redesigning it.

having two layouts for the content, it makes it modern and consistent oh the fonts and elements and colors make that very important for the eye of your user, also making the round preview for some of the items gives the design attraction to the other group of content

Walmart – Desktop Site
As one of the pioneers to sell produce online, Walmart’s design is also a good reference point for me. Upon landing, users are asked to enter their delivery zip code first. This allows Walmart to confirm whether this service can be offered to this potential customer, and pinpoint which store’s inventory should be on display. Also, its 8-2 split of screen allows cart content on display all the time. This is a brilliant design as it mimics the shopping experience in real life.

I also like the sticky options on top to remind customers of their pick-up location (should they choose to do that) and the freedom of changing it right away.

 

Walmart – Mobile
I like the mobile version of the desktop design as well. It is consistent with the desktop site, and the IA aligns well enough for customers to navigate comfortably between the two platforms. In addition to the number of items within the shopping cart like Amazon, Walmart mobile site also includes a subtotal price of everything within the cart. This definitely lends convenience to the price-conscious shoppers.

 

Resources from

  1. Chris
  2. Colin
  3. Elizabeth
  4. Ghada
  5. Jessica
  6. Ken
  7. Ling
  8. Lisa
  9. Mark
  10. Mariam (in PM)
  11. Shelly