Donate For AAD Members Search

American Academy of Dermatology Logo
Welcome!

Images


Images from UX perspective

  • Research has proven that images work better for recall than text. Images on the page will also be noticed first. They have a very important role in the website for drawing attention to the most important content on the pages and making the overall experience more enjoyable.

  • Always ask “what?” and “why?” Carefully think through the content: What is the content’s main message?

  • Public and members have very different expectations and different motivations to be on our site: Know your audience and their goals.

  • What are the thoughts and emotions we want to evoke? How do we awaken those emotions with our visuals?

Hero images for landing page templates

The hero images for home landing page template as well as the section landing page are exactly 600px X 400px. In assets: https://assets.aad.org/html/Components/heroBlock.html


Card images

The most important thing about card images to know is that they have to be all cropped to have the same ratio of 3 X 2. There is no resolution limits, but you should make sure that the image is high resolution enough to look good even when taking up the entire screen (mobile view). The CMS optimizes the images automatically, so even if you enter a very large image file, the system will shrink the file size and thus deteriorate the resolution to a certain degree.

Card image sample

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Hendrerit dolor magna eget est. Sagittis purus sit amet volutpat consequat. Sit amet mauris commodo quis imperdiet.

Card image and text should line up: Do not enter so much text that it runs past the image height as this leaves an awkward space under the image. Keep in mind that the cards are there just to give a very brief introduction to the content: Keep the text section very short.


Image block

Assets: https://assets.aad.org/html/Components/imageBlocks.html

doctor with mortar and pestle

What is compounding

Compounding is when a dermatologist combines, mixes, or alters ingredients of a drug to create a medication tailored to the needs of an individual patient.

  • The purpose of the image block is to a.) draw attention to specific content b.) guaranteeing a good mobile view of the image.

  • Often used instead of inline image with a caption. 

  • Stay consistent with your color choice for image blocks for that section. Most blocks are either light gray or white.

  • Use title and description.

  • Stay consistent with the image ratio: 3 X 2

Example: https://sitegenerator.aad.org/aadmain/previewpage/1D63n9K68Z9NHI3mYRUiO3 


Inline image

Assets: https://assets.aad.org/html/Components/imageWithCaption.html

  • Use for images with short captions. If caption is longer, use an image block. 

Example: https://www.aad.org/public/diseases/skin-cancer/types/common


Images with lightbox

Assets: https://assets.aad.org/html/Components/imageWithCaption.html#_

Content development process
The lightbox is used for showing a larger version of an image. This could be an infographic or other detailed image that cannot be displayed at full size on the web page. The user can tell that the image has a lightbox by placing the curser over the image: It displays a magnifying glass with a plus sign instead of the default pointer. The lightbox is not available for card images, promo or image blocks. It's available when placing image just as a plain assets or image with captions.


Promo block

Assets:  https://assets.aad.org/html/Components/promotionalBlock.html

Artificial nails

are not recommended if you have problems with your nails. Covering up brittle, soft, or damaged nails can worsen existing nail problems.

Promo block is a nice way to break up a very text-heavy page and highlight something important.

  • Intended for short, one sentence messages. The text should not go past the image.

  • Grey box is recommended, but use your best judgement and take other elements on the page into consideration.

  • Must include a title.

  • Image placement: be consistent with other pages in the section. 

  • Stay consistent with image ratio: 3 X 2

Example:

https://www.aad.org/baths-showers

https://www.aad.org/burnout/recharge/subtle-signals


Slideshow



Media carousel

Media carousel uses the image block or video block component: It chains a group of blocks into a carousel. The interaction is not automated but relies on the user to click on the arrows on both sides of the image. The perfect use case for this component would be for example, a situation where the topic keeps changing from month to month but the older posts also need to live on the page. Or if the topics that are further down the carousel, are something that don't necessarily demand the user's immediate attention, but need to be available on the page.

Do not use this component expecting the users to always click through the carousel: If all topics/videos are important to be visible and readily available, do not use this component: SImply use the image or promo blocks or cards.




Featured image in navigation

The image size for the navigation "featured" image is 268px X 179px.



Images for member section

AAD members come from very different backgrounds: Solo practices, small practices, large medical groups, hospitals and research: It isn’t easy to always find photography that will represent them all accurately. This is why we have chosen to use illustrations on our landing pages and wherever else appropriate. In our user research, members preferred illustrations over photography. They found the illustrations to be less distracting and more neutral than photography. This kind of abstraction of the subject matter makes it easier to let the users focus on the content rather than getting distracted by the inaccuracies of stock photos. This doesn't mean that we should always steer away from using photos: They should be used when more appropriate. A good example of that would be meeting and education related imagery: Having authentic photos from the actual events is naturally a better choice.

As a general guideline, the images are most often placed on the left side of the page.


Images for public section

Public has a very different relationship with our website. They very rarely enter the site through the home page or landing pages. They typically look for answers to their skin problems with Google searches and end up reading specific articles. It is important to show the public the images that they need, but we should avoid showing images of very severe cases. Explaining things visually with infographics and data visualization when possible, would be also ideal. Using imagery and videos to help with learning is important for the public section.


Image placement in Public section:

Align images to the right when possible. Video component is an exception because it only allows you place the image in the left. (Image alignment is flexible in the member section. Align the images where they look best.)

Image credit placement

- Immediately under content;
- separate with hr.
- Image title: bold body font .
- break after title, then list credits separate by p. 

Example: https://www.aad.org/public/diseases/a-z/impetigo-symptoms 

 

 

 

 

Advanced search
Advanced search