26 March 2015 Comments Off on Web Design Concepts That Should Be Important To Your Business IXD
Author: Celestia Garner
Web design is a very important part of our business. Although it takes a team of many individuals to make a great site, even with impeccable code, what people notice most are the user interface (UI) and User Experience (UX), both are components of design. This is what affects people the most who use the system; what they see and how they interact, make a huge impact on the success of web software or websites.
At STG we specialize primarily in custom web software for corporations. Often we create internal systems for companies, but we also create public facing websites and systems. We build software for all types of companies and industries, which does expose a large variety of design elements, depending on the company and the purpose of the software; such as internal vs public; for profit vs non-profit; B2B vs B2C; etc.
Because of our diverse clientele, we have to assess each project to determine the best web design practices for the system, its users, and the company. STG prides itself on hiring top talent who can determine what is best for different businesses and demographics. Good web design not only looks good for our clients, but also reflects well on our company.
So, what are some key web design concepts that are important to our business? Following is a list of key concepts and elements to consider for good web design, along with some links and references for further research, if desired.
Responsive Web Design
Responsive Web Design, (RWD) is a key concept used in our industry and is becoming an industry standard for new web sites and systems. According to Nick Pettit:
“Responsive web design is a technique for building websites that work on mobile devices, tablets, and desktop screen. Not long ago, websites were typically designed specifically for laptop and desktop screen resolutions. This worked fine until the advent of web capable smart phones and tablets. Web designers approached the new challenge with a myriad of solutions, but the clear winner was Ethan Marcotte’s seminal article on Responsive Web Design back in May of 2010.” (Pettit, 2014)
There are three main principles of RWD, including fluid grids, fluid images, and media queries including breakpoints. Fluid grids change the layout from focusing on the pixels to using percentages of screen usage. Fluid images are different sizes of the same image that are optimized for the breakpoint they appear in, preventing stretching or unproportioned images.
Media Queries allow CSS to be applied when certain conditions are met, such as the browser screen shrinking to a specific size. Break points are the point at which the content no longer fits the browser size and ‘breaks’; sites define these in the Media Queries of the CSS to adjust to a smaller view, allowing a site to still look good regardless of the screen size the browser is being viewed from.
When designing a new system or website, it’s beneficial to determine the need for RWD early in the design phase. Putting the framework in place from the beginning, will make it much simpler to apply RWD later on, if needed; even if the system will not be responsive right away.
Basic Web Design Principles
Another important design concept is applying basic web design principles, which apply to any site. Some important design principles to consider include proximity, alignment, repetition, and contract. The University of Albany posted the following as key principles to consider:
Proximity
Proximity refers to the distance between elements on a Web page and how the elements relate to one another. These elements include text, navigation, headings, and so on. Generally speaking, elements that are close together appear to have a stronger relationship than elements that are farther apart.
Alignment
One of the most critical principles of design is alignment. Like proximity, alignment can enhance or detract from the appearance of a Web page. But in addition, it can significantly affect the readability of material on a page.
On most printed pages in Western culture, the text is aligned left and reads from left to right. This provides a consistent starting point for each new line. The eye of the reader becomes used to easily finding the beginning of a new line.
Repetition
Repetition is not only saying the same thing several times to get a point across, it is also the use of a consistent theme throughout a Web site. While all the pages on a Web site do not have to be exactly the same, there should be enough similarities to create a consistent look and feel to the site.
Contrast
Contrast works in several different ways. Perhaps the most obvious example of contrast is the color of text against a background. It is much easier to read text that contrasts highly with the background.
However, contrast can also include all sorts of differences between elements. Under some circumstances, contrast is used to make something different so that it stands out. This helps to indicate what is important.
(N.D., 2015)
10 Design Concepts Web Developers Need to Know
Web developers and designers must consider many design concepts when creating a site. An article by Kyle Fieldler outlines 10 important design concepts web developers need to know. Below is a list, but for details on each, follow the link at the end to read the full article.
- Design isn’t just visual
- Be user-centric
- Design is in detail
- When designing, sketch often
- Use white space06. Grids aren’t just CSS frameworks
- Grids aren’t just CSS frameworks
- When everything has emphasis, nothing does
- Keep an inspiration folder
- Design is all about problem solving
- Know how to talk about and critique design
Fieldler, (2013)
That’s a wrap
Thank you for taking the time to read this blog post, hopefully it has been helpful in describing important web design concepts in our industry and how they may be applied. One last gem to share, is an article, written by Cameron Chapman, called, “Best Practices in Modern Web Design: The Ultimate Round-Up”. In this article he covers 100 different best practices and concepts relating to web design and is a great reference for further exploration on this topic. Remember, the success of a good system or website relies on good design.
References
Pettit, Nick, (2014), “The 2014 Guide to Responsive Web Design” Website:
http://blog.teamtreehouse.com/modern-field-guide-responsive-web-design
N.D., (2015), “Basic Web Design Concepts”, Website:
http://library.albany.edu/imc/webdesign/page2a.html
Chapman, Cameron, (2010), “Best Practices In Modern Web Design: The Ultimate Round-Up”, Website:
http://www.smashingmagazine.com/2010/03/23/best-practices-in-modern-web-design-the-ultimate-round-up/
Fieldler, Kyle, (2013), “10 Design Concepts Web Developers Need to Know,” Website:
http://www.creativebloq.com/web-design/10-design-concepts-web-developers-need-know-11135255
Author: Celestia Garner
Tags:
