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