design-ethos.html

---
layout: lesson
title: Design Ethos
summary: Develop a particular ethical and creative stance to use in design decisions.
---
<p>By “Design Ethos,” we mean design ethics, the guiding principles of design, and what questions to consider when designing. We believe that designers have an ethical responsibility to “do no harm,” and our stance is guided by questions that Nidhip Mehta has raised when writing about design and ethics. How, he asks, can we <a href=https://medium.com/@nidhipmehta/social-justice-the-importance-of-ethos-in-design-abb34d4b1bce>“use design as a vehicle to aid and assist humanity, decrease oppression, and promote good will?”</a> After all, while design may seem like a purely aesthetic matter, how something is made and what it looks like—its colors, structures, images, and shapes—can have ethical, social, and political effects. A website that chooses to use photographs of human suffering in its design in order to convey a point about global poverty, for example, takes on a very different ethical position from a website that refuses to replicate those photos in its layouts. To that end, then, while we invite you to delve into the fun and playful realm of web design, we also want to encourage you to be intentional about how your website looks, so we have offered some exercises below that will help you flesh out what that intentionality might look like in the practice of designing your own personal website. </p>

<h2> On “Professionalism” </h2>

<p> As graduate students, we are often told that it is our responsibility to convey a certain type of “professionalism” which usually means to simplify our individual personalities and our work to comply with the unattainable, “Ivory Tower'' standard, to strip away or hide any aspects of ourselves not legible or useful to the academy. Much of the advice found online about building academic portfolio sites demands that we <a href="https://labandfield.wordpress.com/2013/06/19/personal-academic-websites-for-faculty-grad-students-the-why-what-and-how/">“keep it professional”</a>, that information about our lives outside of our institutional affiliation and publications is inappropriate to include.</p>

	Our project centers the critique of professionalization as theorized in <i>The Undercommons</i>, </p>

<blockquote cite="https://www.minorcompositions.info/wp-content/uploads/2013/04/undercommons-web.pdf">
	<p>"Maroon communities of composition teachers, mentorless graduate students, adjunct Marxist historians, out or queer management professors, state college ethnic studies departments, closed-down film programs, visa expired Yemeni student newspaper editors, historically black college sociologists, and feminist engineers. And what will the university say of them? It will say they are unprofessional. This is not an arbitrary charge. It is the charge against the more than professional. How do those who exceed the profession, who exceed and by exceeding escape, how do those maroons problematize themselves, problematize the university, force the university to consider them a problem, a danger?" (30)</p>
</blockquote>

<p>The advice columns about building academic portfolio sites are a glaring example of Moten and Harney’s critique, as they seek to create fear in young and early career academics about appearing unprofessional online, <a href="https://townsendcenter.berkeley.edu/blog/personal-academic-webpages-how-tos-and-tips-better-site">giving suggestions like</a>: “It has become increasingly common to include more ‘personal’ content…the earlier you are in your career, the more conservative you should be."</p>

<p>This idea of professionalism severely limits design possibilities. Common pieces of advice from these articles include: “use simple typography,” “limit use of color,” “choose white or neutral background, a black or charcoal font color,” “empty space is your friend,” “for academic websites, a good layout is one that goes unnoticed,” “neutral tones (or your university’s color scheme) are safe bets.” Some of these pieces of advice are good design rules for accessibility, but we disagree with framing them as more “professional” than other design choices.</p>

<p><b class="site-title">[Your Name Here]</b> questions what the institution deems “professional.” We argue that you can and should move outside these constraints and bring your full self into your site’s design and content. Through design, we can let more aspects of our personalities and whole selves shine, while still forefronting our contributions to the field and ultimately creating a more expansive idea of what being professional can look like.</p>

<h2> Audience </h2>

<p>Google yields plenty of advice for successfully designing a site for a 'target audience.' Prompting questions like "What drives your audience? What are their beliefs and values? Who are they? What products do they use?" Some sites even suggest giving your target audience a 'real identity' by cutting out a picture of someone in a magazine and placing their image near your workspace. Manifestation, or just creepy?</p>

<p>While these can be useful questions to help think about potential visitors to your site, and who you may want to design it for, we want to emphasize that there is no one perfect audience member. We think that designing for a single, ideal spectator can lead to many potential pitfalls, including issues with accessibility and inclusion or projecting your personal beliefs onto that “ideal standard.” Instead, we offer other questions and suggestions for thinking about the audience in a way that opens up the potential of your site. As Jutta Treviranus, Director of the Inclusive Design Research Centre at Ontario College of Art & Design University, writes, <a href="https://medium.com/fwd50/the-three-dimensions-of-inclusive-design-part-one-103cad1ffdc2">“design with human uniqueness and variability.”</a></p>

<p>Accessibility and inclusion is a crucial consideration for your design audience. Having access to online information is a basic, human right. Treviranus writes:</p>

<blockquote cite="https://medium.com/fwd50/the-three-dimensions-of-inclusive-design-part-one-103cad1ffdc2"><p>"Including difference is how we evolve as a human society. Inclusive design is about far more than addressing disability. But disability has been called our last frontier. It is the human difference that our social structures have not yet integrated. This is paradoxical because disability is a potential state we can all find ourselves in. If we reject and exclude individuals who experience disabilities, we reject and exclude our future selves and our loved ones."</p></blockquote>

<p>We have taken the framework laid out by Treviranus to help guide our design practice and we hope it can help guide yours as well. </p>

<ol>
	<li>Recognize, respect, and design with human uniqueness and variability.</li>
	<li>Use inclusive, open & transparent processes, and co-design with people who have a diversity of perspectives, including people that can’t use or have difficulty using the current designs.</li>
	<li>Realize that you are designing in a complex adaptive system.</li>
</ol>

<p>In the prompts below, we point you to some available tools to help make sure your site meets accessibility standards.</p>

<h2>Multiplicity</h2>

<p>We use the term “multiplicity” to refer to the various ways that design can take form. Perhaps similar to humanities scholarship, there is not one, objective solution to how we should employ and use design. Instead, design is multiplicitous. Chimero writes, “The success of one design… does not suggest that the others are less useful or not as good. Design can have diversity in its solutions to problems without compromising the success of any of them.”</p>

<p>The ideal design achieves a balance between individuality and solidarity. Treviranus frames her work on design accessibility in this anarchist spirit, writing that accessibility work must involve “respecting the inherent value of both the individual and society.” This balance can be accomplished through embracing multiplicity.</p>

<p>In the prompts below, we ask you to take a capacious perspective and consider different ways that your site could be designed. For example, using multiple style sheets is one of Treviranus' suggestions for making the web more accessible. As you become <a href="https://brackets.scholarslab.org/tutorial/">more comfortable with CSS</a>, you can create multiple stylesheets for your site and/or use the technique of commenting out code to try different style elements.</p>

<h2>Design Prompts</h2>

<h3>Accessibility</h3>
<p>The most important way to practice solidarity in the design of your site is to make sure it conforms to accessibility standards. Here, we point you to existing tutorials created by disability advocates to check the accessibility of your site’s design.</p>
<p>W3C provides a <a href="https://www.w3.org/WAI/test-evaluate/preliminary/">“First Review of Web Accessibility”</a> that covers some of the biggest concerns for the more simple websites that can be created through our tutorial. It is important to make sure that page titles are marked up accurately and clearly, that images are given alt text, that the colors are high contrast, and that the page can be navigated using the keyboard, among other concerns. This is an important final step to take once your site has been completed.</p>
<p>Treviranus has written that simply meeting Web Content Accessibility guidelines does not ensure sites are truly accessible. She gives an anecdote about a school that proudly advertised accessible standardized exams, but each exam question required the student “to make up to 30 selections on the onscreen keyboard...Consequently, the process of operating the exam involved far more cognitive load than knowing the answers to the exam questions.” This is why using the site yourself with these technologies rather than just running an accessibility audit is an important step, and one that is very doable with a simple portfolio site. </p>
<h4>Prompts</h4>
<p>Following the prompts on W3C, read your site using a screen reader, using the keyboard, and increasing the text size to make sure the site functions for folks who use these tools when accessing the web.</p>

<h3>What You Do and Don't Like</h3>
<i>Courtesy Jeremy Boggs</i>
<p>A good first step when beginning to think about a personal site is to become mindful of design in your everyday life and collect inspiration. Take screenshots of websites, photos of signs, advertisements, book covers, art, and save these images in a folder. These sources will help determine the font, layout, and color palettes for your site.</p>
<p>It can be just as helpful to know what you don’t like. As part of this process of accumulating inspiration material, consider collecting images of design that you absolutely cannot stand. The exercise here is to note what specific aspects of the design that you hate (colors, font, images, etc.) and then articulate in as much detail as possible why you don't like it. Sometimes, this can result in reevaluating previous assumptions, for example we thought that sites with black text on a white background were uninteresting or too traditional until we saw <a href="http://zairelove.com/">Zaire Love</a> and <a href="https://laurencgarcia.com/">Lauren Garcia’s</a> websites. This will help you refine your own design ideas and determine what you want to avoid in your site’s design.</p>
<h4>Prompts</h4>
<p>Using your browser's web developer tools, specifically the inspect element technique, is a good way to understand how the websites that inspire you use HTML and CSS to achieve their design. In Google Chrome, you can access these tools by clicking on "view," "developer," and selecting "developer tools." This will open a panel in the browser that allows you to see the code underlying the styling of a website. You can use this method to mimick styling techniques that appeal to you. We discuss this process a little more in-depth in <a href="https://brackets.scholarslab.org/tutorial/">our tutorial</a>. </p>


<h3>Color/Delight</h3>
<p>Frank Chimero writes that design is “a way of thinking and moving that we use to enhance life,” a way of reaching “toward a desirable future” with “lightness and joy.” We tried (and didn’t always succeed, being happy is hard work!) to center joy and creativity throughout our praxis journey and in our project. Creating the design for your site should be an exercise that sparks joy and captures your free personality. We see a joyful experimentation with web design in an academic portfolio site as part of Moten and Harney call “the undercommon refusal of academic misery” (118).</p>
<p>One design exercise we found delightful was choosing our favorite color palettes using <a href="https://coolors.co/">the color picker <i>Coolors</i>.</a> This site allows users to explore existing palettes or generate their own, which can be saved by creating an account. Users can also upload an image and <i>Coloors</i> will extract a palette from that image. The generator outputs the code from the palette to enter in a style sheet, making it easy to create multiple palette options for your site. This way you can experiment with a variety of palettes to find what colors reflect your free personality. We suggest creating a few different palettes and adding them to the style sheet so you can see what your site looks like in various color schemes.</p>
<h4>Prompts</h4>
<p>Here are few suggestions for ways to play with color in your site:</p>
<ul>
	<li>Try making one palette the ideal you had been imagining, built riffing on your favorite colors.</li>
	<li>One "wild card" palette built with colors that surprised and delighted you.</li>
	<li>One based on the colors in your headshot, or another image you use in your site.</li>
	<li>Try creating a palette around a color or colors that you hate. After you apply it to your site, see if you still hate it, and if so try to articulate why.</li>
</ul>

<h3>Font</h3>
<p> <a href="https://fonts.google.com/">Google Fonts</a> is a great resource to browse, choose, and implement a font, easily providing the code you need to use in your style sheet.</p>
<p>Accessibility is an important concern when choosing a font. The more clear and legible, the better. Some people argue that sans-serif fonts are more accessible, but there are many serif fonts that are considered to be accessible so we don’t recommend limiting your choices to sans-serif. Commonly used fonts like Helvetica, Times New Roman, Arial, and Calibri are all safe choices.</p>
<h4>Prompts</h4>
<p>Here are a couple of exercises we did to choose fonts for <b class="site-title">[Your Name Here]</b> and for our personal sites:</p>
<ul>
	<li>We collected our favorite websites (see prompt 2) and copied their style choices, including font, using the developer tools inspect element technique.</li>
	<li>We brainstormed words to describe the mood and aesthetic we envisioned for the site ("minimalist with pop" was our phrase for <b class="site-title">[Your Name Here]</b>), then browsed Google Fonts for an option that we felt encapsulated that aesthetic.</li>
</ul>

<h3>Living Document</h3>
<p>Treviranus emphasizes that “incompleteness”, “imperfection,” and “impermanence” are crucial aspects of an accessible design process that stand counter to the dominant values of our society (and academia) that privilege perfection and completion. We spent time thinking about what it means to create a “living document,” and invite you to consider similar framing for your website. This will help you to be in solidarity with disabled users of your site, as well as allow the work to change as you do. Websites must be regularly updated as technology changes, but we think these updates should go further to reflect not just what’s necessary to keep the site working, but also the shifts that occur in your life and personality.</p>
<h4>Prompts</h4>
<p>We encourage you to make updating your website part of your routine in a way that feels natural. When you decide to update your site, go through all of the content to see if it still reflects your personality. Think about how your site can reflect the changes in your professional and personal life that have occurred since your last update. Does your headshot still feel like it reflects who you are? Is all of the writing still accurate and fresh? Have you begun a hobby or project that has impacted you? We recognize that this can be easier said than done, we intended <a href="http://praxis.scholarslab.org/charter/charter-2021-2022/">our praxis charter</a> to be a living document and never ended up updating it. </p>
<p>Consider setting yourself a reminder to update your site:</p>
<ul>
	<li>Once a semester</li>
	<li>Once a season</li>
	<li>The same time that you update your CV</li>
	<li>After accomplishing a personal or professional goal</li>
	<li>After having a photo taken that resonates with you</li>
</ul>

<h3>Open Access</h3>
<p>Whether you are creating a portfolio website about your research or creating a website for a large research project, consider how open access fits into your website’s design. Part of what keeps academic elitism in place are various access charges that one must pay in order to access crucial research materials—charges that often do not go back to the scholar who produced that research, but to the publishing company that distributes it. These paywalls can act as barriers for the most precarious populations in academia, such as independent scholars, graduate students from underfunded colleges and universities, and adjunct faculty. We wrote more about open access in our <a href="https://brackets.scholarslab.org/individuality-solidarity/">solidarity prompts.</a></p>

<h3>Multi-Lingual</h3>
<p>If you are able to read and write in a language other than English, consider creating a bilingual or multilingual version of your website so that it can speak to a larger, non-Anglophone audience. After all, the internet is a global place: there is no reason why English should be the only, or most important, language online. (Moreover, if you are learning a second or third language at the moment, this exercise might also be especially useful for practicing your foreign language skills!)</p>
<h3>The Politics of the Image</h3>
<p>One of the most important components of a website’s design are its images. When selecting what kinds of images or photographs to use for your website, however, remember that images are not neutral objects. Critics like Susan Sontag and Saidiya Hartman, for example, have shown how the repeated display of images that depict human suffering and pain often risks reinscribing a fetishistic gaze. So, be intentional when you’re choosing images for your website, whether it is part of the layout or in a blog post.</p>
<h4>Prompts</h4>
<p>Consider the following questions when choosing an image for your site:</p>
<ul>
	<li>Why are you picking this particular image?</li>
	<li>What kind of gaze does the image invite?</li>
	<li>How might your audience interpret the image differently than you do?</li>
	<li>If there is a person in the image that you've used, how might that subject feel about being displayed on your website?</li>
</ul>