Brighton Summer 2017 Sabrina Bezar Web Design Presentation

Brighton.com Template Library

Brighton Summer Internship 2017 - Web Design Intern Sabrina Bezar

Goal “To create an online library of key template examples used in different content areas of Brighton.com�

- Martha, Senior Digital Designer

The template library allows for quick access to multiple layouts, making it quicker and easier to compare formats and pull code for future pages and updates.

Brighton Summer Internship 2017 - Web Design Intern Sabrina Bezar

Content Requirements - Gather information about different content templates used across the site

- Scalable layout to allow for future expansion of library

- Gather design assets that compliment site UI

- Easy to maintain

- Must integrate with existing interface

Responsible web design/ - mobile-optimized.

Work with UX Lead to design an experience that is engaging for visualization of - existing page templates

- Design look, feel, and interaction of 3 visual design layouts that are responsive - Begin with wireframes and execute final HTML/CSS production-ready files Brighton Summer Internship 2017 - Web Design Intern Sabrina Bezar

Concept

Brighton Summer Internship 2017 - Web Design Intern Sabrina Bezar

Prototyping with AdobeXD Prototyping with AdobeXD allows for quick and navigatable wireframes for easy ideation.

Wireframes are “live� as if they were real webpages and click through to each other.

Brighton Summer Internship 2017 - Web Design Intern Sabrina Bezar

Final Prototypes

Approved by Martha

Brighton Summer Internship 2017 - Web Design Intern Sabrina Bezar

Final Website - Coded using Adobe Dreamweaver - Responsive and Mobile-Friendly - Organized for easy addition of new content

http://www.brighton.com/templates

Brighton Summer Internship 2017 - Web Design Intern Sabrina Bezar

Other Projects

-

The Edit 2017 Online Lookbook & Social Images Ferrara Web Ads Prefall 2017 Marketing Ads

- Recruitment Media and Social Media Guide - Why Brighton? Project Webpages Brighton Summer Internship 2017 - Web Design Intern Sabrina Bezar

The Edit Lookbook & Socials - 22 Images for The Edit Summer Prefall 2017 Lookbook including the creation of item mockups for 18/22 images - 22 Social Images created model imagery photos Link to Lookbook

Brighton Summer Internship 2017 - Web Design Intern Sabrina Bezar

Ferrara Web Ads

Brighton Summer Internship 2017 - Web Design Intern Sabrina Bezar

Order Tracking Ads

Brighton Summer Internship 2017 - Web Design Intern Sabrina Bezar

Recruitment Media -

Recruitment Flyer retouching Multiple size formats created Editable documents Social media images

Images for: -Facebook -LinkedIn -Instagram Brighton Summer Internship 2017 - Web Design Intern Sabrina Bezar

Social Media Guide

Easy to understand guide to help partners post images at the optimal sizes for various social media platforms.

Social Media Standards Guide This guide is intended for Brighton partners who are responsible for maintaining social media platforms. Contained is the minimum, optimal (best), and maximum sizes for images on specific websites as well as the tools you can use to crop and edit your own images. Please take these dimensions into account when posting to your social media pages and take care to crop and resize to fit the proper dimensions, or else a reduction of quality, cropping, or stretching of the intended image may occur automatically by the website.

What is a Pixel?

A pixel is a unit of measurement used by computers to determine the size of an image. When sizing your images for the web, make sure you know it’s size in pixels, not inches. The guide here uses WidthXHeight in pixels.

Types of Images There are different kinds of image files that can be uploaded to the internet. These types include JPEG (or JPG), PNG, and GIF. JPEG is the best for uploading to the internet because of it’s small file size, but PNG is also acceptable. GIFs are significantly larger in size compared to JPEGs or PNGs and are not reccommended for standard images. GIFs cannot be uploaded to many platforms.

For sizes with no maximum, an image with the same height to width ratio as the optimal size will be fine.

minimum size

optimal size

maximum size

Facebook Photo Sizes Cover photo

399x150

1200x675

Group Cover

400x150

1602x500

Profile Picture

170x170

340x340

Link Image

600x314

1200x628

Photo Post

476xvar^2

940x788 to 1200x1200

Continued

How can I know my photo’s size in pixels?

1. Open the file where the image is saved.

2. Place your cursor over the image icon, and right-click if you are using a PC or Ctrl-click if you are using a Mac. 4. Choose Properties.

5. Click the Details or More Info tab.

6. Scroll down to the Image section to view the image dimensions.

How do I resize a photo?

Mac/Apple Method

1000x425

Profile Avatar

4000x1700

Social Media Standards Guide Continued

My image isn’t the right size for my Facebook/LinkedIn Post, what can I do?

When resizing an image for Facebook or LinkedIn Posts, the Width is the most important factor. As long as the number is pixels is larger than the minimum for height and width, any height will be fine.

How do I resize a photo?

Windows/PC Method

LinkedIn Photo Sizes Profile Banner

Social Media Standards Guide

4000x4000

400x400

Update/Blog Post

600x314

1200x628

Company Cover

1192x220

1536x768

2MB

Company Logo

300x300

400x400

4MB

Profile Photo

110x110

180x180

Photo Post

1080x566

1080x1080

1. Right click on desired image file.

Select Preview (should be the default) 2. On the top right bar, click tools and then select Adjust Size 3. Making sure the measurement is set to Pixels, adjust the size of your image. Make sure “Scale Proportionally” is selected so your image does not become skewed or squished from it is resized. Press the OK button 4. Now that your image is resized, rename it and then save it. This will make sure that your original image is still on your computer along with your newly resized image.

1. Open the file in Microsoft Paint. Click File and then Select Open. Navigate to the file on your computer. If you are trying to resize a photo from Facebook or another online service, you will need to download it first.

2. Click the Resize button. In newer versions of Paint, the Resize button is located in the Home tab. In older versions of Paint, click the Image menu, and then select Resize/Skew.

3. Choose pixel size for your resize method.

Keep the “Maintain aspect ratio” box checked so both boxes will be filled in automatically when you enter one value, to keep the proportions the same.

4. Click OK. This will change the image to the size that you specified. If you are unhappy with the changes, press Ctrl and Z together to undo the changes.

5. Save the resized image. Once you are happy with the resize changes, click File and then select Save As. Rename the image so that you don’t overwrite the original and make sure to save as aPNG or JPG image file.

Instagram Photo Sizes 1080x1350

Brighton Summer Internship 2017 - Web Design Intern Sabrina Bezar

Why Brighton Webpages Produced webpages for the Why Brighton project, responsible for utilizing existing templates to create a new and engaging layout for testimonials and images.

Index Home Office Wholesale Retail Brighton Summer Internship 2017 - Web Design Intern Sabrina Bezar

Thank You Brighton Summer Internship 2017 - Web Design Intern Sabrina Bezar