When presenting website designs, I’ve often found that the native behavior of the browser is forgotten. The two most common things I hear are that websites need to have their own back buttons, and that website breakpoints only need to be thought about in terms of screen size. Of course browsers have their own back buttons (and many other native features like printing, sharing, and in-page search), and windows can be resized to random breakpoints. But these things are easy to forget when a design is presented in isolation of the browser and even the user’s operating system.
So I created a little Sketch library that lets you put your designs into a Safari window on macOS. It’s about as pixel perfect as I could make it, using both the macOS Sketch library from Apple for some UI elements, and cross comparing the designs with screenshots.
In the library, I include examples using Sketch’s desktop artboard presets: 1024px and 1440px. Using artboard presets is helpful when creating prototypes in Sketch, so I tend to stick with those. The symbols are resizable, so you can use them with any screen size you’d like. Be sure to update the “macOS/Safari Toolbar” symbol with your URL.
Here’s how to setup the symbols:
🔄 macOS/Menu Bar
📂 Safari
🔄 macOS/Safari Toolbar
📂 macOS/Window Frame - Detach to Mask
Put your design here
⬆️ Mask
🔄 macOS/Wallpaper/1024px
I’d like to continue expanding this library to support iOS and watchOS Safari elements, in addition to light and dark appearances as websites begin to use the dark mode media query. I’d also like to add in aspects of the browser that are important to how people interact with websites, like file upload dialogs and JavaScript alerts.
Additional resources you might find useful: