Social Cause: STEAM for Designers

Project

Creative Brief

Background Summary: There is a push to recognize the importance of art and design in STEM, or Science, Technology, Engineering, an Mathematics. Background Summary: There is a push to recognize the importance of art and design in STEM, or Science, Technology, Engineering, an Mathematics.

Overview: A website is needed to advocate for a social cause. The chosen cause is design in the STEM movement.

Drivers: There is a lack of appreciation and understanding from the general population as to what designers do. This undervaluing impacts designers income, disregards their expertise, and creates a culture of mediocrity.

Audience: Designers in general, graphic designers in particular.

Tone: It’s important to build emphasis on designers to approach STEAM in an engaging, but professional manner. The way to handle this approach should be to build importance, reaffirm that designers are professionals, and that what they do matters.

Message: Designers need to stand for something. They need to safeguard their profession by acknowledging their importance in the future of innovation. Design literacy is not only important for professionals but also for the average citizen.

Visuals: The images used will be ones that help to frame the art/design aspect of STEAM, and to help better define its importance to designers.

Details: The site must include the following: Links to other sites related to your topic. Images. These can be stock in necessary. Footer (with social media links, secondary nav, contact info, etc.) Site must be responsive. Site must be designed for any platform, any device.  The content must be divided into a minimum of four pages (including the index/home page). Landing pages are not allowed. All pages must deliver content.

Targeted Message: “What you do matters. Be a professional. Advocate for your profession. Don’t  just sit there and be a mouse jockey for someone. If you do, you might as well  work on Fiverr.”


Research

There is a movement to get more STEM professionals into political office. [1] There is a movement to get more STEM professionals into political office. source

Started by the Rhode Island School of Design, there is a movement to add art and design to the STEM acronym, to change it to STEAM: Science | Technology | Engineering | Art | Mathematics. Stemtosteam.org also advocates for employers to hire artists and designers, as the organization believes this will help drive innovation in the future. source

There’s a growing movement to support science through organization demonstrations. March for Science is one such organization. Every day, there are targeted activities someone can accomplish as they help to support science. source

This article examines how best to aggregate content to a website. As a potential aspect of the social cause website, I felt that it might be a good idea to include a news feed to articles related to STEAM and other articles based on how it applies to designers. When aggregating content, it’s important to keep in mind that you must add value to your content, link to original articles, be accurate (especially important for a site dedicated to STEAM and facts, choice good information, have opposing opinions, personalize the stories, organize the articles in a useful way, and use SEO. source

This article discusses the link between education and crime rates. It advocates for increasing education funding in order to reduce the burden of incarceration. Felt this was important as one way to advance STEAM in education. source

It’s important to advocate for the integration of art and design into STEM. Art and design makes sense as an addition as it leads to innovation and creates better form and function. source

There are a few things to keep in mind when designing for non-profits. This article speaks about the following; non-profits should highlight the work they’ve done, create a story that connects with the intended audience or in other words think about the key message and its impression, better understand the empathy you are trying to invoke, make the user feel apart of the cause, use visuals effectively and make it memorable, keep things adaptable and current, experiment. source

This article makes the following suggestions; the site should be designed to allow donors the most flexibility in giving, media needs to be optimized, users should be able to find volunteer information easily as well as signing up, the organization’s purpose should be easy to discern and as quickly as possible, the content needs to take the attention it deserves, all marketing materials should be consistent, know what the site’s purpose is from the start, and have a news section or blog. source

Innovation and design are synced together. Design has been driving innovation for the past few decades and innovation has become integrated into business. Design and innovation seek to create value in original concepts and processes. The article goes on to say that: “As culture and technology advance, the consumer landscape advances with it. Businesses that don’t adjust to this ever-evolving playing field will fail fast. For designers and innovation experts, this is a welcomed reality. It is a primary role of innovation and design experts to define the way forward in this chaotic environment.” source

We live in a world where a political culture exists where facts no longer matter. This is a phenomena where in political debate, either public or private, when presented with facts, that facts are ignored in favor of emotion. source


Inspiration

Greenpeace has a well designed website. Their homepage is clean and devoid of any thing that doesn’t relate to it’s targeted message of enviromentalism. The navigation is easy to use and is pretty simple. The donate box remains consistent throughout any page on their website. The fly out menu (pictured below) helps in find more specific areas of their website. Above/below the fold use is used effectively as well. Content is hinted at and beckons the user to scroll down to learn more. Their entire homepage is used as a pitch to anyone visiting their site within a short period of time.

DoSomething.org made it on my inspiration as I liked the grid layout on the homepage. It offers a quick glimpse into what the website has going on. The header isn’t that compelling however. At a glance, I’m not entirely sure what the site does. The category sorter is pretty neat. From the homepage, I can sort different volunteer opportunities.

Mother Jones is an interesting website. It offers a well laid out website page that makes for easy scanning of the content. Despite not having a very descriptive name, I get that it’s a news site. The navigation is laid out well and I can see what the site contains at a quick glance. I also find it interesting when a user scrolls down the page, the navigation bar remains persistent. Lastly the content in the bottom screen shot offers visual diversity.


Concepts & Sketches

Homepage:A major goal of this website is to provide information in a scannable manner. This website isn’t a complete resource on STEAM, but rather is a compendium to what’s out there. It’s meant to cater to designers and why they should care about the A in STEAM.

The main focus of the homepage is to give a quick glimpse into what the website does. The other pages will dive further into detail.

The homepage is simplistic. It offers a balanced amount of image and copy.

Looking down the page, there is the site’s logo at the top left corner of the site along with the navigation bar. As a user scrolls down the page, a menu locks to the top to offer persistent navigation.

A major concern is that content should always be strategically placed at the bottom of the above the fold region. This way it entices the user to scroll down the page.

Rest of the page has content broken down into boxes that aids the user to scan the page.

The footer contains social media links, copyright notice, navigation, and a place to sign up for a newsletter.

About STEAM: This page details what exactly STEAM is. It covers the history of STEM, how it developed into STEAM, and is a place to offer links to other organizations.

The page is broken into section that offers a balance of image and copy.

STEAM for Designers:This page deals with why STEAM is important for designers and how it can be used in their everyday work.

Connect:The connect page is more than just a contact page. Taking a more abstract approach to contact, we would see pictures from events hosted by the website, quotes from notable people, a blurb about those who run the website, social media links and content from those sources, and a Google map for the area the website serves.


Wireframes

Home: Carousel at the top provides sliding content. Middle section contains a brief summary of the site. Bottom houses a related image.

About STEAM: Basic overview of what STEAM is.

STEAM for Designers: This page describe how STEAM is relevant for designers.
Connect to STEAM for Designers: I wanted to go beyond a simple contact page. I wanted to have this page layout what the page is doing across the Internet as well as real life.

 

 

 


Final

Home: For my final design, I went through and added better defined headers. These headers help to break up the content into more sizable chunks.

I also added more content by adding a video, and a calender of events.

About STEAM

Half Column

Half Column

STEAM for Designers: I added a video that will help explain what data visualization is.

Connect to STEAM for Designers: I added a calendar of events to this page.

 

 

 

 

Skills:Web Design