Digital Design Guidelines
SAVE PDF

Digital Design Guidelines

Web Design Concept

Viewports

Large Viewport

Medium Viewport

Small Viewport

Images

Video

Paddings & Margins

Responsive

Components

Natural sorting rule

Typography

Website Estimation

Natural Sorting

Natural ordering is a kind of alphanumerical sort which seems natural to humans.
In a classical alphanumerical sort we will have something like :

1 10 11 12 2 20 21 3 4 5 6 7

1 2 3 4 5 6 7 10 11 12 20 21

We will use this rule for the transform the responsive from Desktop to Mobile

Typography

We will require to the consistancy for the whole page.

Headers: h1, h2, h3, h4 etc.

Contents: p tag

For example

LARGE VIEWPORT (Design widths 1440px)

DESKTOP

<-- Width - 1440px -->

MEDIUM VIEWPORT (Design widths 1064px)

TABLET & SMALL SCREEN

<-- Width - 1064px -->

SMALL VIEWPORT (Design widths 767px)

MOBILE & SMALL SCREEN

<-- Width - 767px -->

1) Images

Assets all text in the files lowercase such as jpgs, pngs and svgs.

Images - check export sizing and if compression is required.

For example: 10mb image export is no Bueno.

ImageOptim Tool for optimising images.


Download: ImageOptim.app.zip

Instruction
1. Open image in photoshop
For image full width will be 2400px and reduce image ratio as match as possible as per the original design.
2. Export as web asset
- To save the image for web go to File > Export > Save for Web (Legacy). Under preset make sure the image is JPEG
and change quality to 72 then click Save. For the keyboard shortcut to bring up this menu put in Alt+Shft+Ctrl+S.
3. Install ImageOptim into Applications folder.
4. Open ImageOptim App and drag images into the App.
5. Pack images into the zip file and send to developer team for
implementation.


2) Icons

Check exports. SVGs don’t like strokes or multiple shapes (union shapes together) and no padding or spacing around the icon.

For example - 40px


3) Image requirements


File types Save images in .jpg, .gif, or .png format only.

Favicons
Ensure a favicon that the image is saved as an .ico or a .png file.


File name
Only use letters, numbers, underscores, and hyphens in file names. Other characters (like question marks, percent signs, and ampersands) may upload incorrectly or cause unexpected behavior in galleries.


Resolution
There is an image resolution limit of 60 MP (megapixels).


Color mode
Save images in RGB color mode. Print mode (CMYK) won't render in most browsers.


Animated .gifs
The formatting animated .gifs in size you want them to display on your site.


4) Image best practices


File size
Recommend using image files of less than 500 KB for best results, though the limit for an individual image upload is 20 MB.


*Please do not use an odd number on the image dimension.


Full Width Images
Recommend 2400x1600px, jpeg, saved for web, and optimized.
These areas can be hero images, full-screen slideshows, banner images and ensure that your full width images look good the recommended size is 2400x1600px.


Notes:
- The devices have different ratio and it is possible your images will be cropped when viewed on web.
- Please ensure the image width size is 2400px, and the height will be different following the design but will require to keep the ratio as the original.


Image width
The dimensions of the original image you upload to your site can have a big impact on how it displays. We recommend using images that are between 1500 and 2500 pixels wide.


Images smaller than 1500 pixels may appear blurry or pixelated when they stretch to fill containers, such as banners.


In most cases, Squarespace will reformat large images to a maximum width of 2500 pixels. However, images added through Site Styles (background images and site-wide banner images) load at their original dimensions. This can cause page loading issues if the image is over 2500 pixels along its longest edge.


Inside Content Images
Horizontal – max width 1500px, jpeg, saved for web, and optimized.
Vertical – max width 1000px, jpeg, saved for web, and optimized.


Sub image with full width container
Recommend: Width: 1200px



Aspect ratio
Ensure each image you’re using has the same aspect ratio (height:width) before uploading, as images are typically cropped based on their width and height. If all your images have the same aspect ratio, it will be easier to anticipate how they'll crop. Such as slideshow galleries.


DPI and PPI
If you're concerned about image resolution, focus on the image's dimensions and keeping file sizes under 500 KB, rather than DPI (dots per inch) or PPI (pixels per inch). DPI and PPI affect an image's print quality, but not its web display.


5) Image Retina screens


To render correctly on a retina device, an image needs to be twice as big as its final display dimensions.
For example, if you want to add a 500×250 pixel image to the page, the corresponding image file needs to be 1000×500 pixels.



Responsive png, gif, and jpg images
Sometimes you need to include a photo. PNG, GIF, and JPG images are “raster images”, meaning that they are defined pixel-by-pixel instead of with vectors. As a result, they are much more sensitive to screen resolution than SVGs.


Responsive SVG Images
Browsers automatically scale up SVGs for retina devices, so this 500×250 pixel SVG image will render crisply on both standard and retina devices.


Now, consider a smartphone with a retina screen. Smartphones are typically less than 400 pixels wide in portrait mode, which means that the corresponding retina-quality image would only need to be 800(ish) pixels wide.


Video

1) Optimal Video Dimensions

For the best image quality and playback, you should use width and height dimensions for your video that are multiples of 16; your next best choice is multiples of 8, and after that, multiples of 4.


The native encoding dimensions and the playback dimensions should be evenly divisible by the same number, ideally 16.


For example, if you encode your native file to use a frame dimension of 640×480, scale down to a size such as 320×240.


The following tables list a collection of width by height measurements by quality for 16:9 and 4:3 aspect ratios:


Recommended width and height for videos with 16:9 aspect ratios


Best Choice: Multiples of 16
2nd Best Choice: Multiples of 8
3rd Best Choice: Multiples of 4
1920 x 1080
1792 x 1008
1856 x 1044
1280 x 720
1152 x 648
1216 x 684
1024 x 576
896 x 504
1088 x 612
768 x 432
640 x 360
960 x 540
512 x 288
384 x 216
832 x 468
256 x 144
128 x 72
704 x 396
 
 
576 x 324
 
 
448 x 252
 
 
320 x 180
 
 
192 x 108


Recommended width and height for videos with 4:3 aspect ratios


Best Choice: Multiples of 16
2nd Best Choice: Multiples of 8
3rd Best Choice: Multiples of 4
640 x 480
608 x 456
624 x 468
576 x 432
544 x 408
592 x 444
512 x 384
480 x 360
560 x 420
448 x 336
416 x 312
528 x 396
384 x 288
352 x 264
496 x 372
320 x 240
288 x 216
464 x 348
256 x 192
224 x 168
432 x 324
192 x 144
160 x 120
400 x 300
128 x 96
 
368 x 276
 
 
336 x 252
 
 
304 x 228
 
 
272 x 204
 
 
240 x 180
 
 
208 x 156
 
 
176 x 132
 
 
144 x 108
 
 
112 x 84


2) Optimize HTML5 videos

The format to rule is either WebM (VP8) or MP4 (H264). These will load in most browsers.


The best ways to optimize videos for web design are compression and conversion, which will help to drastically improve page load times and playback performance and convert the video content to WebM before using it in the website design but also provide an MP4 alternative in the rare case that WebM isn’t supported, the MP4 version will load instead.


Paddings & Margins

The consistency design layout for the header, subheading, and title.
Please make sure that we do not use odd numbers because this will cause a responsive code.

We should use the consistency paddings and margins for the header which is the same design that will be easier to build as the template.



For example





Responsive

Responsive Web Design is about using HTML and CSS to automatically resize, hide, shrink, or enlarge, a website, to make it look good on all devices (desktops, tablets, and phones).


Example: Web page dimensions and scaling on the responsive layout.


1) Responsive Images

Responsive images are images that scale nicely to fit any browser size.


Using the width Property
If the CSS width property is set to 100%, the image can be scaled up to be larger than it's original size and follow the size of the browser window.


Using the max-width Property
If the max-width property is set to 100%, the image will scale down if it has to, but never scale up to be larger than it's original size



2) Responsive Text Size

The text size can be set with a "vw" unit, which means the "viewport width". That way the text size will follow the size of the browser window:


Example: When resizing the browser the text will scale follow the browser window size.


Large viewport:

Hello World

Medium viewport:

Hello World

Small viewport:

Hello World



3) Media Queries

In addition to resize text and images, it is also common to use media queries in responsive web pages. With media queries you can define completely different styles for different browser sizes.


Example:

resize the browser window to see that the three div elements below will display horizontally on large screens and stacked vertically on small screens:

Large viewport

Left

Main Content

Right

Medium viewport

Left

Main Content

Right

Small viewport

Left

Main Content

Right

Components

Utilise Figma Components or Sketch Symbols for consistency.
Will work well with the global stylesheet

Typography

Font-size in 3 different viewports

Button

Static state, Hover state, and active state

Link

Static state, Hover state, and active state

Colours

Provide the colours code

Sizing

Use round numbers (padding, font, images, icons, boxes etc…)

Groupings

Be tidy. Little details like checking for typos make a massive difference.

Naming

consistent naming convention (Component/State) and casing (’Title Casing’, ‘camelCasing’, ‘lower case’).

Website Estimation

1) Create the template
Description: Create the template from the CMS by HTML and CSS( Header section, Content section, Footer section)
Time: 8 hours




2) Create feature content section
Description: Create the feature from the CMS by HTML and CSS( Feature content section and element in the section)
Time: 1-2 hours per section and depends on the complexity of the content.




For example:
https://pensionboost.com.au/home
https://pensionboost.com.au/pension-loan-scheme

Estimate time:
5 sections for one page = 4 hours
5 sections x 2 pages = 8 hours