Before I became a Branding Motion Graphics Designer and Video Editor in 2004, I started with Information and Graphic Design in Stockholm, Sweden where I was heavily influenced by Scandinavian Design’s Form and Function. I started my journey by studying Information and Graphic Design that led me to Web Design.
Early in Web Design, I was fortunate to have studied many of Web’s User-Centric methodologies such as Information Architecture, Site Mapping, WireFrame, Usability Design, User Persona, UI (User Interface) Design that evolved into UX (User Experience) Design.
I attended numerous top notch Web Design Training & UI/UX conferences, such as W3 Consortium in Paris, France, UI/UX Conferences held by NNGroup in London and San Francisco, the first Information Architecture Conference in Boston, and one of the first eCommerce Conference in Chicago. I have also attended Flash Forward in NY for many years as I used Flash for web video delivery.
Web Design
I was heavily influenced by these conferences and learned some of the most important principles of Web/UI/UX design directly from industry leaders.
In my own journey, learning Web Design principles allowed me to strategize, design and build websites from the core with UI/UX principles in mind. I have hand-coded XHTML/CSS to create unique UI/UX (see below). To showcase my Motion Graphics videos, I used Flash as my main UI and web video format..
Unfortunately my Flash UI webpages are no longer accessible on the web due to Flash being discontinued.
After many years not designing websites since early 2007, I recently helped a friend create her first website for her Golf Pro Coaching business (see below). This experience helped renew my passion in digital media and web design again…
(I created this portfolio mcr-portfolio.com website in 3 days!)
My new portfolio website built in Three days!
Design Tool: Squarespace
Click on this Image to the main page of this portfolio website. I had built this website in 3 days using modern web design tool, Squarespace.
Problem: I needed to document my creative communications design work and thought the best way is to create a website so I can easily share videos, images and text.
Solution: I have used Squarespace once last year to help build my golf pro friend’s website (see project below). Yesterday, I was able to quickly purchase a new domain (mcr-portfolio.com) on Squarespace, followed by starting a new website. I used a Squarespace template for interior design because it had clean colors and design layout, which is the look and feel that I’d wanted. From there, I strategized on the sitemap and content for content category, then was able to easily build this website!
Ideation, Web Design using Squarespace (2024) by Mary Rye
Style: Started with Squarespace template then personalized for my own use
Credits
Egan Middle School
Design Tool: XHTML/CSS Hand-Code
the official school website for 5 years from 2007-2013
Click on the Image to see the now-unofficial site that was a test site I had used before going live in Fall 2007. In 2013, LASD school district implemented a new web standard platform, requiring all schools in the district to use the new web standard template.
Problem: In spring of 2007, the Principal and the President of PTA asked if I can help maintain and update their old middle school website. When I took a look at the old website, there were only 4 navigation categories throughout the website, however, the information they needed to update for the #1 Middle School in California at the time, had so many more information categories. So I suggested the viable way forward is to design a new school website from the ground up! They were very happy I volunteered as a parent of the school.
Solution: I created wireframes/sitemaps to incorporate the many categories for their needs. Once we got the site content organized, I ideated and designed the site’s look and feel, then hand-coded the website in XHTML/CSS2.
I was strongly inspired by a well regarded web designer in UK, Elliot Jay Stocks based in London, England at the time. You can read about my inspiration in designing the Egan website,
Credits
Art Direction, Ideation, Web Design (hand-code XHTML/CSS) & Execution (2007) by Mary Rye.
Site requirement and content provided by: Egan Faculty, Staff, PTA President, Parent volunteers and student feedback
Casey Hall Golf Academy
New Website & Branding
Design Tool: Squarespace
Click on the Image to visit the live website.
Problem: In spring of 2023, Casey was in the middle of changing her Golf coaching business from one golf course to another, as well as her role as a Golf Pro. She started creating her website using Squarespace, but found it difficult to think through how to design a website with the amount of information she wanted to convey. She also needed to re-brand her Golf Pro Coaching business for the new venue. After struggling with an overwhelming amount of information and not sure how to organize it for her website, she asked me for help.
Solution: The first thing we did was to organize all her information that was relevant for her new business. I taught her how to do “discount usability” using flashcards to organize her information into different categories. Next, we looked at what she wanted for her “new” brand look and feel. Casey had already decided on the colors for her website as well as the font style in Squarespace. Next we focused on the look and feel of the website (positive and fun) to convey her brand..
Once all the categories were determined, I created wireframes for each category’s webpage and sub-webpages for her to “drop” in her text content. From there, I was able to use Squarespace to quickly create the look and feel with an emphasis on using fun, lively and engaging design elements to create a natural visual flow on each webpage as well as the website structure from our website strategy.
Credits
Website architecture, Web strategy and branding, Web Design (Squarespace) & Execution (2023) by Mary Rye
Site style (color and font) chosen by Casey Hall