Designbyte was created as for education purposes as a senior project for California Polytechnic University San Luis Obispo's Graphic Communication department. Inspired by a love of writing, passion for user experience design, and knowledge of web design I, Tracey Cardillo, sought to create a short and sweet design guide. Sometimes people like web developers are tasked with making design decisions, and I wanted to create a small set of principles to follow along with that can help non-designers confidently make such design decisions.
My hope is that this site can not only help with design decisions but form an interest in design in some who might not otherwise consider themselves designers.
Universal Principles of Design
A major inspiration for this project is the book Universal Principles of Design by William Lidwell, Kritina Holden, and Jill Butler. This book covers around 100 design concepts, with each pair of pages dedicated to one principle: one page for details on the principle and the other for some example photos. I love how clear and concise the material is and the content overall. If you are interested in design or looking for an excellent resource on it, you may find it on Amazon or other retailers.
A good amount of content is based upon sections of this book, but adapted for the needs of this project. The book covers many of these topics from different perspectives, ranging from product design to architecture, so I felt that it may be beneficial to adapt the content to fit the digital realm more specifically.
This project simply would not have been possible without this wonderful book.
Building the Site
The majority of this site was built from the ground up by me. I wrote most of the functions and the skeleton manually, save for a handful of functions I adapted from open source libraries and the like.
Things such as the menu function within the header were adapted from the w3 schools Mobile Navbar page, a guide on truncating multi-line elements on Medium, Meyer Web's CSS reset, and icons from Font Awesome. I am usually pretty diligent about citing sources on things I find from the internet in comments in the associated files (i.e. js or css).
Some sites I frequent when working on sites when it comes to flex objects: Mozilla's MDN Web Docs page on Flexbox, a guide on Flexbox from Interneting is Hard.
The following materials were consulted during the process of this project. Any other resources used, such as images or statistics, are cited in the content pages as necessary.
- Apple Inc. (2020). Apple Human Interface Guidelines. Retrieved from https://developer.apple.com/design/human-interface-guidelines/
- Ant Design. (Accessed November 10, 2020). Ant Design Guidelines and Resources. Retrieved from https://ant.design/docs/spec/introduce
- Bailey, Bob. (2006). Reading Onscreen: The Effects of Line Length on Performance. Retrieved from https://www.usability.gov/get-involved/blog/2006/08/line-length-and-onscreen-reading.html
- Google Inc. (Accessed November 10, 2020). Google Material Design Guidelines. Retrieved from https://material.io/design
- Lidwell, William, Holden, Kritina, & Butler, Jill. (2010). Universal Principles of Design, Revised and Updated. Osceola: Quarto Publishing Group USA.
- Mollerup, P. (2015). Simplicity: A matter of design. Amsterdam: BIS.
- Norman, Donald A, & Norman, Donald A. (2013). The design of everyday things (Revised and expanded ed.). New York: Basic Books.
- SAP SE. (Accessed November 10, 2020). SAP Fiori Design Guidelines. Retrieved from https://experience.sap.com/fiori-design-web/
- Tidwell, J. (2010). Designing interfaces: Patterns for effective interaction design (2nd ed.). Beijing ; Sebastopol, California: O'Reilly.
- U.S. Department of Health and Human Services. (August 15, 2006). Research-Based Web Design & Usability Guidelines. Retrieved from https://www.usability.gov/index.html
- Yamamoto, Sakae, & Mori, Hirohiko. (2020). Human Interface and the Management of Information. Designing Information. Cham: Springer International Publishing AG.