Click on image will redirect you to the UMASH main page and have access to all the pages!
Design Role: Web & Graphic Design Assistant
As the web & graphic design assistant at UMASH, I was mainly in charge of creating and maintaining pages for "Ag Health and Safety Spotlight", "UMASH In the Field", "Farm Safety Check", and more using WordPress. And also creating complementary graphics with Adobe Creative Suite.I have designed over 100 web pages ever since I joined the team in JUNE 2021. The purpose was to create engaging pages that deliver important and helpful information to the audiences with a consistent user-friendly style, in which I will be diving into more details below.
Pages from left to right: "Ag Health and Safety Spotlight", "UMASH In the Field"
'In the Field' Webpages
While both 'In the Field' and 'Spotlight' pages are featuring helpful and important messages to the audience, 'In the Field' has more of a general and wide-ranged information, whereas the 'Spotlight' pages highlight more specific stories. Below in the image are 3 examples of the 'In the Field' pages I have created. I have picked 3 examples from both 'In the Field' and 'Spotlight' in order to exhibit some of the web design skills I have utilized creating them.
All pages: In order to maintain a consistent and user-friendly style, I tend to use different sections/methods to break up the pages, so that the large amount of information would seem less overwhelming to the users, and also easier to navigate through the pages.
First page "Understanding hazards faced by manure applicators": Featuring images that are not only related to the topic but also consistent with each other. There are buttons such as the "Read the Article" right below the body texts so that the users can easily click on it for navigations. There are also text boxes for additional information such as bullet points, in order to break up the pages and help with an easier user experience.
Second page "Workforce wellness: Symposium sheds light on COVID-19": There are single grey lines for breaking up the pages into different sections of information. Besides, I have embedded YouTube videos onto the page below the descriptions for a better user flow and easier access.
Third page "A Communications Innovator in Agricultural Safety and Health": Another great way to draw attention is the direct quotes from highlighted persons, because these messages are well-informed but are not disruptive with other contents. When there are too many subtitles under the same topic, colored boxes with an even layout boost the efficiency for users, and of course they are also an appealing visual.
'In the Field' pages from left to right: "Understanding hazards faced by manure applicators", "Workforce wellness: Symposium sheds light on COVID-19", "A Communications Innovator in Agricultural Safety and Health"
'Spotlight' Webpages
With a similar style and purpose, 'Spotlight' pages tend to have an even bigger amount of information and content. Hence, there are more design methods I applied in order to keep the user flow smooth and balanced, while still maintaining the visuals.
The most used method is creating effective and interesting tabs: With the amount of content in these pages, it could be overwhelming scrolling down for a long time and still don't see an end. But with these well-designed tabs, the contents are organized in an engaging way. There are icons in each tab that are tightly related to the topics, which helps users identify the tabs quicker and easier. While users are in a certain tab, the much darker green indicates that there are other tabs that are interactive as well and tells users exactly which tab they are currently in, which are all for a better user experience.
'Spotlight' pages from left to right: "Protecting Agriculture’s Future during National Farm Safety and Health Week 2022", "Celebrating National Rural Health Day in the Classroom", "Indigenous Peoples’ Day"
'Spotlight' page: "Highly Pathogenic Avian Influenza (HPAI) is on the move"
Graphic Designs
Besides web pages, I also created a variety of graphic contents as a promotional/informative tool, and redesigned/expanded the brand's style guide, below are some of the examples:
Old Ver.
New Ver.
New Ver.
New Ver.
These graphics are mainly designed for the "Farm Safety Check". As I was creating websites for this category, I decided to create an original character that can be in a series of graphics as complementary visuals. I believed a cute/welcoming farmer character would be a perfect way to start, and these graphics would help users to quickly understand the main topic of the webpage. Not only do these graphics looks appealing, but also help users (a big portion are farmers as well) to feel connected and related to. There are also extended series for other purposes like holidays' promotional graphics and more.
There are also other graphics that I created such as Book Covers, Research Briefs, Posters, and more. The designs are well-balanced, effective, and consistent with the UMASH branding/style, while still being unique from each other based on their different purposes.
Promotional/Informative Graphic Design Examples
