About Design https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/861596446%3Fsecret_token%3Ds-16JsBPAB8bp&color=%233a3a3a&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=false&single_active=true#me-with-you Audio: Me With You. Composed by Henry Lee. Designing H/Report While designing H/Report, here are the few rules that I strictly follow: Designless Design In essence, a designless design tricks the viewer into thinking there’s not a design at all - the user experience is so natural to the viewer, the viewer doesn’t even notice, nor would have to learn how to use the interface before using it. https://1.bp.blogspot.com/DIzaCqUDyJyBT0yP9JMsDGj1a_k2uNz0hDbCT4pz98FyVs1NOnUu7APJ3WJZcqC1xMZOKVroLHeLvzGS7i2S1dsFgBfbBi_Ntogmz5C1tOhhLaXeCW12xcy19CWjxxIPF5-MiO39 An Early H/Report Design Draft Late June, 2020. H/Report Is Not a Regular Site Due to the story telling nature of H/Report, it's almost like a comic style webpage but fit in a web format, added with the latest web animation technologies. There are many design logics I had to think through while designing it (i.e. horizontal scrolling, vertical scrolling or a button for each screen? Real defined borders for each screen or ample of white space?) And I hope that the end result will fool most people feeling H/Report behaves just like any other websites - yet also very different but in a familiar way. https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg69magQO8-E3opLfc92QVGmgc4md2YucnG1nDXpu54ddcmNqnYxsu8rSgf249OlkGQxAJArZ8H5SoMRGqF7JaYLGg183kiXVSygM6EFDynsiGgV8z3i2xvW11F3W7_l_YPRgTHkzPPiq2p/s1600/iphone_white_side2.png H/Report on an iPhone 5 Smallest device supported. Screenshot taken Jul 26, 2020. Behavior Changes in a Designless Way H/Report has a much slower reading pace than a typical website or app. That’s why I have designed a few “speed bumps”: from the animation at the beginning of each page opening, to each chapter having its animation effect. The goal is so the viewer would slow down the viewing pace without even knowing it. Content First Design In essence, a content first design emphasis on content first, not design. A good design should be complementary to the content, and used to emphasize the content rather than compete with the content. https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-_ZfIuUpada9E9WMuQkIbN3-dy_KaE-akFLrQq8fPkRZd32s9CZl-3s9ANZL7mCLUs8HBJi6P4utZsjKkm3sABkgFAgaQilXKASzkFqU3ttuyIHQdCK1L8WwjVqkv1iEbaof0OAjZFh5T/s1600/iphonexspacegrey_landscape.png A H/Report Image on an iPhone X. Screenshot taken Jul 26, 2020. Take the Above Screenshot for Example When the viewer is using a mobile device viewing a large photo, H/Report will display the photo as big as it can while maintaining the intended details. Besides the screen number on the left top corner showing transparently, a content first design removes any designs that could distract the viewer from the original content. Responsive Web Design In essence, a responsive web design should anticipate the viewer's viewing device and respond responsively. A viewer’s page should look and feel almost identically regardless of the viewer’s device by having one single responsive design for all. Rather Than Designing a Mobile-Specific Website H/Report will adapt automatically to screen size from devices as small as the iPhone 5. This enables the viewer to have the same immersive experience regardless of the device. There are many small design details to make that happen, from limiting the maximum width of content for larger devices to automatically adjust image height to fit smaller devices. https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYC54MqdkwROLAZGASJL6_zQGPQSe_nm8jH97neyEUHllhLS3dlalEjot6iEbq5a-OyIiwAURhUGq2ucaKmzvKfMkdshwdhKocpAjpMhhnTAaVrHZQOIasNFR5pG3KcCEFvoTie4oRpSb1/s1600/microsoft-surfacebook-front.png H/Report on a Laptop Screenshot taken Jul 26, 2020. And… That’s It :) This page would be updated periodically as H/Report gets more mature. Stay tuned. To learn more about each H/Report updates, click the version number on the bottom of this site for development updates.