Daily Donut Responsive Website

Daily Donuts for All Screens

The Daily Donut is the definitive source for vegan mini-donuts and other amusements. The editorial team needed a fast-loading, responsive website for their daily feed of donut illustrations.

My Role

User Experience Design

User Interface Design

Visual Design

Interaction Design

Web Development

Daily Donut responsive site
Daily Donut responsive site
Daily Donut responsive site
Daily Donut responsive site
Daily Donut responsive site
Daily Donut responsive site
website construction
web design strategy
user journey
mobile wireframes

The Site Design Process

The purpose of this site is to deliver daily content in an easily scannable format. This is a presentational website, so most of the design and development work will be on the presentation layer, in CSS. The interactive components should be minimal so as not to distract from the content. There is a script that updates the current date on the site, other than that the JavaScript is minimal.

I sketched some wireframes to test out different site layouts. The easiest, most intuitive layout for browsing is a vertical scroll with the branding and global navigation at the top. This also scales well for mobile browsers. I started developing the site right away because I prefer to prototype directly in the browser. I can resize the browser window to prototype for different screen sizes.

Performance is important. For the fastest loading time possible, I saved all of the vector images as compressed svg. I configured the htaccess file on my web server to decompress the svg files correctly. The file sizes are even smaller with compression, and they look sharp on retina screens of all sizes.

Successes and Achievements

I built this website in a few days. It's easy to maintain because of the modular CSS architecture. Without a database, it is portable to any web server in case I want to switch hosts.

Lessons Learned

The best way to optimize a website is to use it every single day. Pain points emerge, and solutions are quickly implemented.

gallery next