NDSU Visual Arts Website
Last year, my university updated its CMS template. Most departments started to migrate their old website to the new template. At the same time, a new school, the School of Design, Architecture, and Art was being planned. The new school will include three current departments, Architecture, Landscape Architecture and Visual Arts. As a part of the merging, they wanted to rebuild the website. Previously, the Department of Visual Arts has one website; and the Department of Architecture and Landscape Architecture was sharing another one. In this project, we redesigned three websites and a portal website to connect them.
The design of the current website looked outdated. The navigation was confusing. Sometimes, finding useful information through it was not easy for new audiences.
Very soon, I started my work and designed a new home page for the website. When I started to implement the design on the CMS, I realize that my design might be too complex for it. The system predefined a style, and all the users cannot change it but follow it. I assume that the template was designed by the IT staff, without consulting a designer. Given the system styles, it is challenging to build a high-quality website. To implement my design on this CMS, I met some challenges. Among them are center-aligning headings, inserting videos to the header backgrounds, preventing blurring of texts in images.
The first thing I did is to request the features needed in my design. Since the IT department is managing the CMS, they allow users to request new features to them. If approved, they could be added to the system. We contacted that department and submitted the five features we wanted, which include text alignment, video background on headers, mouse hover effects, etc. However, they rejected all of our requests with a consideration of accessibility and mobile compatibility. So, we have to use what they provided.
Our department hired an advertising company to produce a promotional video. The outcome is fantastic. So, the school wants to insert the video, or just short footage of the video, into the home page header, which is not supported. The system only supports image format to be inserted into the header, such as jpg, gif, png, and SVG. Immediately I realized that we could convert the mp4 file to a .gif file. I ran an experiment. I imported the video to Adobe Premiere and made a short clip, then saved it as a gif image. After compressing the gif from 120MB to 6MB, I finally inserted a video into the header and made it work. However, in a later system update, the IT department disabled gif as a header background. So, we have to look for other solutions. Actually, we can embed gif image to an SVG then insert it into the header and that was what I did. In my XD file, I imported the gif image and converted it to SVG format. It worked well on our home page; and the loading time was reasonable.
Except that, there were more applications of SVG in this project.
SVG stands for Scalable Vector Graphics. It is widely used in vector graphics, such as icons or charts. The most significant benefit of this format is scalability. Since it never gets blurred, the developers can use it in any size with just one file. If they want to use bitmapped images like PNG or jpeg, they probably have to export multiple files with different sizes to reduce loading time and preventing the pictures from getting pixelated.