Consider Design While You Build

5 Steps to leverage design practices and tools while you build websites

More than 4,000 scholars have signed a petition calling for an academic boycott of international conferences held in the US, to provide solidarity with those affected by Donald Trump’s ban on travellers from seven Muslim-majority countries.

The petition questions the “intellectual integrity” of international conferences in the country while the ban persists and “the dialogues they are designed to encourage while Muslim colleagues are explicitly excluded from them”.

It includes signatures from academics from across the world, including Europe, Asia, Australia, Canada, Latin America, Africa and the Middle East.

John Richardson, reader in critical discourse studies at Loughborough University, who signed the petition, told Times Higher Education that it is “important to signal publicly that the situation in America following Trump’s election is morally, politically and legally unacceptable”.

He added that his research is on racism and fascism and it would be “indefensible” for him to discuss his research findings “in a context where colleagues who are most directly affected, and can speak from personal experience, are not allowed to be present”.

But some have suggested that the boycott would unfairly harm US universities, while others have claimed that Mr Trump does not care enough about higher education to feel threatened by the ban.

Marina Costin Fuser, PhD candidate in film studies at University of Sussex, said “American universities” should not be “our target”.

“Let’s be supportive of US universities at times like this. Universities have the potential to encourage critical ideas and organise resistance,” she said.

“I don’t think Trump cares that much about higher education to actually feel threatened by this conference ban...unless applied hard scientists join in, we’ll be boycotting ourselves – that is, departments that lean to the left, such as arts and humanities.”

Wickham Clayton, lecturer in film production at the University for the Creative Arts in Farnham said that while it is “absolutely essential” to show solidarity with Muslims and US citizens affected by the ban, it is also important to show solidarity with the US academic community “under fire” from anti-intellectualism.

“Boycotting academic conferences may be leaving academic colleagues out to drift who desperately need support,” he said.

Instead, he suggested that scholars could support and attend academic conferences in the US “with the provision that each conference we support and attend sets aside time to plan or take action” to oppose the bans.

“I truly believe that any kind of boycott would be damaging to academic credibility in the US, and we should create solutions which show solidarity with them as well as the Muslim population targeted by these horrible and illegal orders,” he added.

“While the needs of marginalised Muslim people, and let’s face it, anyone not white, is more important than the needs of academics, I’d like to think we are smart, strong, and creative enough to generate solutions that help everyone.”

However, Dr Richardson said such a response “wouldn’t be public”, would only be possible for academics able to enter the US and “doesn’t cost academics anything personally”.

“We would still get a line on our CV saying that we had attended an international academic conference,” he said.

Louis Bayham, lecturer in film at the University of Southampton, added that “our first priority has to be with our persecuted colleagues in what is proving to be a perhaps pivotal moment for global humanity”.

Arshin Adib-Moghaddam, professor in global thought and comparative philosophies at Soas, University of London, told THE that he will cancel a lecture tour of the US about his forthcoming book on the current politics of xenophobia and division if “the current situation prevails”.

“I will not expose myself to a belligerent, xenophobic and uneducated political context in the United States. I think this executive order anti-cultural and discriminatory, bordering on racism,” he said.

By Ellie Bothwell

Step 1: Consider your users

Whatever you are setting out to build will be used by real people—a minimum of one (you) and a maximum of billions around the world! When you write the first few lines of code you should have an answer to the question - who is this website for? Is it just for you, your friend, a client, or a community of strangers? The answer will impact how you approach the design and development of the project. Just a note— if the answer is everyone, that can be ok but you’ve got your work cut out for you - that’s 10+ languages, support for disabilities, consideration of different needs across cultural norms in all 196 countries.

Exercise to get started:

Write some information on who you are making for. List out the following: Who they are (demographics, characteristics) Why they would use your site/ app What you want them to take away from using it

Step 2: Consider the environment

When you build a website or app it may live on a server but it will be accessed and used in a ton of different environments. Sure you may build it on a Macbook and test it in Chrome, but rest assured someone will load your site on an outdated version of Internet Explorer, mirror it to their living room flatscreen TV, or pull it up on a terrible 3G network in the woods. It’s your job to anticipate these different environments your website will be in and design it in a way that can adapt.

Exercise to get started:

Jot down some environmental considerations you’d like to include in your project—starters below: Will your project respond to browser size (work on mobile and big screens) What browsers do you want to ensure your site works on? To make this decision think about who you said you are making this for.

Step 3: Wireframing

Wireframes are the blueprint for what you are going to build. Much like an architect lays out the full plans and building structure before any cement is laid, you will want to plan out how your website or app will be structured before you begin coding. If you’re working with other people or a client this step is a critical communication vehicle to make sure everyone agrees on the general functionality and structure of the project before investing hour and hours building it.

Exercise to get started:

Before you start wireframing you should have an understanding of who will use the website, a list that describes the core features of your website (user stories) and any environmental considerations you’ve decided to factor in. If you did the 5 minute exercises for steps 1 and 2 they should accomplish this.

Ok ready set.. Wireframe! Websites are comprised of content arranged in different ways. Get a piece of paper and a pencil. Think about the following core elements of your site—grid, navigation, heading, footer, and main content areas like a hero image or gallery. Start sketching out different ways of laying out each page. Below are a few steps you can take.

Draw the base grid on each page. If you are using something like bootstrap this has a predefined grid you can use. If you’ve decided to build a responsive site each full page you wireframe should also have a mobile version.

Add the main content in blocked out containers. Images, text, movies, etc whatever the content is add general containers in places that match the user needs and stories you defined earlier. Add all main buttons and other UI (user interface) elements such as icons, dropdowns, input fields.

Step 4: UI & Visual Design

Before reading any of this you may have heard or thought ‘design just makes things pretty’ So far we’ve only been talking about the design behind the scenes—no pretty involved. This step is about designing the details of how people see and use your website or app. Now you’ll get to make things beautiful using CSS.

Example: Style Guide

The best way of showing you the different elements of visual design involved in building a website is to look at a few examples of open source website style guides. These encompass the core UI & Visual Design elements and usually give explanations about how and why the elements should be used. https://ux.mailchimp.com/patterns Exercise to get started: Read this great Medium article by Erik Kennedy. It’s a good overview of UI design. https://medium.com/@ erikdkennedy/7-rules-for-creating-gorgeous-ui-part1-559d4e805cda Then do the following: Find inspiration and creative direction from other sites. If it’s on a site, don’t forget you can find the fonts, colors, by looking at their code! Dribble amd SiteInspire are good places to start. Choose a typeface - if you need help, use google fonts. Choose a color theme - if you need help, use the adobe library When you are setting padding and margin, add more white space than you think you should.

Step 5: Testing and Iterating

As a site or app is being built it’s important to test and validate before you ship it. This can be as simple as asking a friend to use an early prototype and give feedback, or going to a coffee shop and buying strangers coffee in exchange for 10 minutes of their time while you ask them to use your site and give feedback. This step is an important tie back to all previous steps. You can ask the following questions:

Exercise to get started:

Find a few people who are willing to test your project (ideally 5) This can be as simple as taking your laptop with a local build of your website and going to a coffee shop. Read this example of coffee shop testing. Then ask people a few questions, and ask them to start using your website. You don’t need a script of questions, at it’s simplest form this activity is about you watching real people interact with your site—at a minimum as them to think out loud so you know what parts of your site are confusing. After you do this review your notes and decide what you’d like to change based on the feedback - maybe a button placement, a content area, or general navigation.