JCI Marketing (www.jcimarketing.com) had the opportunity to redesign Pilla Sport’s website - a company that creates top of the line lenses for elite sporting professionals.
The document discusses embracing flexibility on the web unlike the constraints of print. It recommends designing for different screen sizes from widescreen desktops to mobile phones. Elements should resize and simplify for lower bandwidth mobile devices. Non-essential elements should be hidden on smaller screens and interfaces adapted with larger touch targets. The design should detect and respond to mobile features like location.
This document outlines the redesign of the Web-Abacus website. It notes that the current site only works on Internet Explorer which is being replaced, and that the design is outdated. The goals of the redesign are to achieve browser compatibility, a modern responsive design, and an improved user experience. So far the application has been redesigned, a survey conducted, and designs drafted. The next steps are to agree on a final design and implement the new design.
The document summarizes the process of designing a product for a class project. It discusses developing individual ideas, collaborating to choose a name and logo design, creating product and advertising designs, and reflecting on strengths and areas for improvement. The group worked well together but could improve on time management, file sharing, and content organization for future projects.
This document summarizes a presentation by Joshua Petryk and Maurice Alexander of Trophy Consulting on branding SharePoint sites. The presentation advises attendees to first consider using themes and logos to brand sites before fully customizing master pages, as themes are quicker and easier. It also recommends only branding publishing portals, simply theming collaboration sites, and avoiding customizing MySites. The presentation stresses planning branding efforts to save time and money.
Factors Your Website Needs to Be Effective at Generating New Business - CoI...Derek Key
The document discusses factors that a website needs to be effective at generating new business. It covers evaluating current site performance, search engine optimization (SEO), things that can be done now like setting goals for what visitors should do on the site. It also discusses tools like Google Analytics for analyzing traffic, alternatives for driving traffic, making calls to action effective through contrast, incentives and direction. Other tips include using strong headlines, photos, validation, telling a story, making the product the focus, and optimizing for mobile and ease of contact.
SharePoint Branding - Not look like SharePointHải Trần
The document summarizes Event 1 of the Vietnam SharePoint User Group. It discusses branding a SharePoint site by applying a company's identity through techniques like incorporating corporate colors, fonts, and designs into master pages and page layouts. It also mentions the importance of user experience design principles like putting the user at the center of all design decisions. Finally, it concludes with a demo and question/answer portion.
The document discusses six design principles - balance, emphasis, rhythm, scale and proportion, simplicity, and unity - as exhibited on various websites. It provides examples of how the Apple, Jing, Pittstate, Maccosmetics, Google, Pearsonified, and Apple websites respectively demonstrate balance, emphasis, rhythm, scale and proportion, simplicity, unity, and variety through their use of colors, spacing, sizing of elements, and organization of content.
The document outlines planned modifications to the website of a compost company. It details changes to color scheme and layout across various pages, including the home page, inner pages, and specific section pages like About Us, Products, Career, News, Gallery, FAQs, and Contact Us. Key changes include using shades of green as the dominant color, adding photo slideshows and banners to pages, grouping products by category, and standardizing short banners and removing borders from inner pages.
The document discusses embracing flexibility on the web unlike the constraints of print. It recommends designing for different screen sizes from widescreen desktops to mobile phones. Elements should resize and simplify for lower bandwidth mobile devices. Non-essential elements should be hidden on smaller screens and interfaces adapted with larger touch targets. The design should detect and respond to mobile features like location.
This document outlines the redesign of the Web-Abacus website. It notes that the current site only works on Internet Explorer which is being replaced, and that the design is outdated. The goals of the redesign are to achieve browser compatibility, a modern responsive design, and an improved user experience. So far the application has been redesigned, a survey conducted, and designs drafted. The next steps are to agree on a final design and implement the new design.
The document summarizes the process of designing a product for a class project. It discusses developing individual ideas, collaborating to choose a name and logo design, creating product and advertising designs, and reflecting on strengths and areas for improvement. The group worked well together but could improve on time management, file sharing, and content organization for future projects.
This document summarizes a presentation by Joshua Petryk and Maurice Alexander of Trophy Consulting on branding SharePoint sites. The presentation advises attendees to first consider using themes and logos to brand sites before fully customizing master pages, as themes are quicker and easier. It also recommends only branding publishing portals, simply theming collaboration sites, and avoiding customizing MySites. The presentation stresses planning branding efforts to save time and money.
Factors Your Website Needs to Be Effective at Generating New Business - CoI...Derek Key
The document discusses factors that a website needs to be effective at generating new business. It covers evaluating current site performance, search engine optimization (SEO), things that can be done now like setting goals for what visitors should do on the site. It also discusses tools like Google Analytics for analyzing traffic, alternatives for driving traffic, making calls to action effective through contrast, incentives and direction. Other tips include using strong headlines, photos, validation, telling a story, making the product the focus, and optimizing for mobile and ease of contact.
SharePoint Branding - Not look like SharePointHải Trần
The document summarizes Event 1 of the Vietnam SharePoint User Group. It discusses branding a SharePoint site by applying a company's identity through techniques like incorporating corporate colors, fonts, and designs into master pages and page layouts. It also mentions the importance of user experience design principles like putting the user at the center of all design decisions. Finally, it concludes with a demo and question/answer portion.
The document discusses six design principles - balance, emphasis, rhythm, scale and proportion, simplicity, and unity - as exhibited on various websites. It provides examples of how the Apple, Jing, Pittstate, Maccosmetics, Google, Pearsonified, and Apple websites respectively demonstrate balance, emphasis, rhythm, scale and proportion, simplicity, unity, and variety through their use of colors, spacing, sizing of elements, and organization of content.
The document outlines planned modifications to the website of a compost company. It details changes to color scheme and layout across various pages, including the home page, inner pages, and specific section pages like About Us, Products, Career, News, Gallery, FAQs, and Contact Us. Key changes include using shades of green as the dominant color, adding photo slideshows and banners to pages, grouping products by category, and standardizing short banners and removing borders from inner pages.
The document provides guidance for account executives on their role in web development projects and effective communication between clients and development teams. It covers the importance of design, using photos and colors properly, discussing projects with clients, and demonstrating good design principles with examples to help clients understand the benefits.
Sj-saphi responsive multi-purpose virtue mart joomla templateNETBASE CMSMART
SJ Saphi - Responsive Multi-Purpose eCommerce Template with Virtuemart component, which has an up-to-date design with cleanly flat design, neat typography, smooth navigation and well-structured layout...
http://cmsmart.net/virtuemart-templates/sj-saphi-responsive-multi-purpose-virttuemart-joomla-template
This document summarizes the features of the SJ Saphi template for Joomla Virtuemart websites. It has a responsive design that adapts to different screen sizes. Features include a homepage slideshow, quick view functionality, load more products button, mini cart, blog support, multiple languages and currencies, detailed product pages with zoom and pop-up images, and bonus pages for FAQs, galleries, portfolios and more. Color schemes and the mega menu can be customized extensively.
The document describes a redesign of Sephora's website to improve the user experience. Key changes include cleaning up the homepage to reduce clutter, reorganizing pages like Favorites and Quizzes/Guides to be more visually pleasing on desktop and mobile, and redesigning the Product Details page to minimize scrolling by placing images and specifications side-by-side. Consistency was maintained across views through recurring design elements, typography, and color choices inspired by the original site. The redesign underwent iterations with user feedback incorporated.
The document provides a critique of several virtual office and serviced office websites in Singapore, including Regus, Virtual Office Singapore, Servcorp Singapore, and Central Offices. It analyzes the objectives, target audiences, design strengths and weaknesses of each site. Elements that provide good design practices, such as clear navigation, professional aesthetics, and comprehensive information are identified from the better-designed sites to include in the student's own website.
SJ Saphi - Responsive Multi-Purpose eCommerce Template with Virtuemart 3 component, which has an up-to-date design with cleanly flat design, neat typography, smooth navigation and well-structured layout.
Every year, new styles and elements in web design emerge. Some elements when incorporated carefully and thoughtfully can help in storytelling and explain the idea to visitors. Other elements work to enhance how content appears on a particular device. While it is not at all necessary to include every new trend in web design, many of them have great potential to improve the experience of the visitors.
Every year, new styles and elements in web design emerge. Some elements when incorporated carefully and thoughtfully can help in storytelling and explain the idea to visitors. Other elements work to enhance how content appears on a particular device. While it is not at all necessary to include every new trend in web design, many of them have great potential to improve the experience of the visitors.
This document discusses the building blocks of visual hierarchy in web design, including size, color, layout, spacing, and style. It provides tips for using each element to create a visual hierarchy that guides users' attention and influences their flow through a design. Size is one of the most important factors, as bigger elements are more noticeable, but subtlety is important. Contrast is also key, as is balancing minimalism with emphasis on primary elements. Color, layout, spacing, and style each influence the visual prominence of elements as well.
Tackling Umbraco: Case Study on NFL Ops Site Designmcampolongo
This document provides an overview of the design process for a new website created for the NFL Football Operations division. Key points include:
- The site was designed to differentiate itself from NFL.com and honor the history of football while showcasing innovation.
- An extensive design process included style tiles, mood boards, typography and photography tests to establish visual identity.
- The navigation drew inspiration from other NFL properties but was tested in various formats to create a flexible design optimized for different devices.
- Templates and content blocks were created to structure information in a logical and manageable way for both users and future editors.
- The Archetype package was leveraged to create reusable content modules that
This document contains a graphic designer's resume. It summarizes the designer's 2 years of professional experience as a graphic designer and UI/UX designer at Unplugged India, as well as internship experiences. It also lists the designer's educational background, including a Bachelor's degree in Graphic Design and a Master's degree from Florence Design Academy. Key skills such as Adobe software, visual communication, and problem solving are highlighted. Samples of work include designs for interfaces of a home automation app and website, identity design for various clients, and a playing cards design inspired by Leonardo Da Vinci's works.
Plan and drafts for website alfie laughton latest!!!rockinmole
The document discusses plans for a website homepage layout and content. It recommends including tabs across the top for key sections like Videos, Images, How to Help, About Us, Stay Informed. It also suggests adding the company logo and slogan to help promote what they are about. A search bar is recommended to allow users to easily find specific information within the site. The homepage title should be in bold, large font to summarize what they are doing, and use a color scheme that makes the text stand out.
Tools to Create Eye-Catching Infographics for Your WebsiteHTS Hosting
Looking for an efficient tool to design infographics for your website? Then this blog is a must-read for you as it provides you the most user-friendly tools to design you infographics as well as social media posts for your business.
It has Modern UI /UX Design Process. Like from
- Hand-holding customers for every feature
- Identifying the key design challenge
- Stepping into the shoes of the user
- Designing the Information Architecture and wireframing
- Nailing the visual design
This document provides recommendations for improving the technical aspects, security, performance, and user experience of an e-commerce website built on Magento. It suggests optimizing inline CSS and classes to reduce page load times, making menu links and redirects dynamic, fully implementing firewalls and security patches, removing unnecessary files to declutter code, and revamping the homepage, catalog, and product pages with new interactive features and layout improvements. Overall refactoring the site to follow Magento best practices and rebuilding it are recommended to enhance code quality, speed, and the development process.
The document provides design documentation for redesigning the Crayola website. It discusses usability issues with the previous site that caused a disconnect between the main site and online store. The redesign aims to improve usability by integrating the online store directly into the main site. It also increases interactivity with animated elements and an interactive slideshow. The navigation was simplified into three high-level categories: play, discover, and shop to make the site more intuitive for users.
This document outlines the design process for a personal website, including paper prototypes, wireframes, and design guidelines. It presents prototypes and wireframes for desktop, tablet, and mobile versions. Key elements include a homepage for introduction and resume download, a projects page to showcase work, a skills page using infographics, and a contact page. Design principles like proximity, similarity, symmetry and metaphors are applied. A 12-column grid system is used for responsive design.
RPWORLD offers custom injection molding service to help customers develop products ramping up from prototypeing to end-use production. We can deliver your on-demand parts in as fast as 7 days.
The document provides guidance for account executives on their role in web development projects and effective communication between clients and development teams. It covers the importance of design, using photos and colors properly, discussing projects with clients, and demonstrating good design principles with examples to help clients understand the benefits.
Sj-saphi responsive multi-purpose virtue mart joomla templateNETBASE CMSMART
SJ Saphi - Responsive Multi-Purpose eCommerce Template with Virtuemart component, which has an up-to-date design with cleanly flat design, neat typography, smooth navigation and well-structured layout...
http://cmsmart.net/virtuemart-templates/sj-saphi-responsive-multi-purpose-virttuemart-joomla-template
This document summarizes the features of the SJ Saphi template for Joomla Virtuemart websites. It has a responsive design that adapts to different screen sizes. Features include a homepage slideshow, quick view functionality, load more products button, mini cart, blog support, multiple languages and currencies, detailed product pages with zoom and pop-up images, and bonus pages for FAQs, galleries, portfolios and more. Color schemes and the mega menu can be customized extensively.
The document describes a redesign of Sephora's website to improve the user experience. Key changes include cleaning up the homepage to reduce clutter, reorganizing pages like Favorites and Quizzes/Guides to be more visually pleasing on desktop and mobile, and redesigning the Product Details page to minimize scrolling by placing images and specifications side-by-side. Consistency was maintained across views through recurring design elements, typography, and color choices inspired by the original site. The redesign underwent iterations with user feedback incorporated.
The document provides a critique of several virtual office and serviced office websites in Singapore, including Regus, Virtual Office Singapore, Servcorp Singapore, and Central Offices. It analyzes the objectives, target audiences, design strengths and weaknesses of each site. Elements that provide good design practices, such as clear navigation, professional aesthetics, and comprehensive information are identified from the better-designed sites to include in the student's own website.
SJ Saphi - Responsive Multi-Purpose eCommerce Template with Virtuemart 3 component, which has an up-to-date design with cleanly flat design, neat typography, smooth navigation and well-structured layout.
Every year, new styles and elements in web design emerge. Some elements when incorporated carefully and thoughtfully can help in storytelling and explain the idea to visitors. Other elements work to enhance how content appears on a particular device. While it is not at all necessary to include every new trend in web design, many of them have great potential to improve the experience of the visitors.
Every year, new styles and elements in web design emerge. Some elements when incorporated carefully and thoughtfully can help in storytelling and explain the idea to visitors. Other elements work to enhance how content appears on a particular device. While it is not at all necessary to include every new trend in web design, many of them have great potential to improve the experience of the visitors.
This document discusses the building blocks of visual hierarchy in web design, including size, color, layout, spacing, and style. It provides tips for using each element to create a visual hierarchy that guides users' attention and influences their flow through a design. Size is one of the most important factors, as bigger elements are more noticeable, but subtlety is important. Contrast is also key, as is balancing minimalism with emphasis on primary elements. Color, layout, spacing, and style each influence the visual prominence of elements as well.
Tackling Umbraco: Case Study on NFL Ops Site Designmcampolongo
This document provides an overview of the design process for a new website created for the NFL Football Operations division. Key points include:
- The site was designed to differentiate itself from NFL.com and honor the history of football while showcasing innovation.
- An extensive design process included style tiles, mood boards, typography and photography tests to establish visual identity.
- The navigation drew inspiration from other NFL properties but was tested in various formats to create a flexible design optimized for different devices.
- Templates and content blocks were created to structure information in a logical and manageable way for both users and future editors.
- The Archetype package was leveraged to create reusable content modules that
This document contains a graphic designer's resume. It summarizes the designer's 2 years of professional experience as a graphic designer and UI/UX designer at Unplugged India, as well as internship experiences. It also lists the designer's educational background, including a Bachelor's degree in Graphic Design and a Master's degree from Florence Design Academy. Key skills such as Adobe software, visual communication, and problem solving are highlighted. Samples of work include designs for interfaces of a home automation app and website, identity design for various clients, and a playing cards design inspired by Leonardo Da Vinci's works.
Plan and drafts for website alfie laughton latest!!!rockinmole
The document discusses plans for a website homepage layout and content. It recommends including tabs across the top for key sections like Videos, Images, How to Help, About Us, Stay Informed. It also suggests adding the company logo and slogan to help promote what they are about. A search bar is recommended to allow users to easily find specific information within the site. The homepage title should be in bold, large font to summarize what they are doing, and use a color scheme that makes the text stand out.
Tools to Create Eye-Catching Infographics for Your WebsiteHTS Hosting
Looking for an efficient tool to design infographics for your website? Then this blog is a must-read for you as it provides you the most user-friendly tools to design you infographics as well as social media posts for your business.
It has Modern UI /UX Design Process. Like from
- Hand-holding customers for every feature
- Identifying the key design challenge
- Stepping into the shoes of the user
- Designing the Information Architecture and wireframing
- Nailing the visual design
This document provides recommendations for improving the technical aspects, security, performance, and user experience of an e-commerce website built on Magento. It suggests optimizing inline CSS and classes to reduce page load times, making menu links and redirects dynamic, fully implementing firewalls and security patches, removing unnecessary files to declutter code, and revamping the homepage, catalog, and product pages with new interactive features and layout improvements. Overall refactoring the site to follow Magento best practices and rebuilding it are recommended to enhance code quality, speed, and the development process.
The document provides design documentation for redesigning the Crayola website. It discusses usability issues with the previous site that caused a disconnect between the main site and online store. The redesign aims to improve usability by integrating the online store directly into the main site. It also increases interactivity with animated elements and an interactive slideshow. The navigation was simplified into three high-level categories: play, discover, and shop to make the site more intuitive for users.
This document outlines the design process for a personal website, including paper prototypes, wireframes, and design guidelines. It presents prototypes and wireframes for desktop, tablet, and mobile versions. Key elements include a homepage for introduction and resume download, a projects page to showcase work, a skills page using infographics, and a contact page. Design principles like proximity, similarity, symmetry and metaphors are applied. A 12-column grid system is used for responsive design.
Similar to Website Design Case Study: Pilla Sport (20)
RPWORLD offers custom injection molding service to help customers develop products ramping up from prototypeing to end-use production. We can deliver your on-demand parts in as fast as 7 days.
Rethinking Kållered │ From Big Box to a Reuse Hub: A Transformation Journey ...SirmaDuztepeliler
"Rethinking Kållered │ From Big Box to a Reuse Hub: A Transformation Journey Toward Sustainability"
The booklet of my master’s thesis at the Department of Architecture and Civil Engineering at Chalmers University of Technology. (Gothenburg, Sweden)
This thesis explores the transformation of the vacated (2023) IKEA store in Kållered, Sweden, into a "Reuse Hub" addressing various user types. The project aims to create a model for circular and sustainable economic practices that promote resource efficiency, waste reduction, and a shift in societal overconsumption patterns.
Reuse, though crucial in the circular economy, is one of the least studied areas. Most materials with reuse potential, especially in the construction sector, are recycled (downcycled), causing a greater loss of resources and energy. My project addresses barriers to reuse, such as difficult access to materials, storage, and logistics issues.
Aims:
• Enhancing Access to Reclaimed Materials: Creating a hub for reclaimed construction materials for both institutional and individual needs.
• Promoting Circular Economy: Showcasing the potential and variety of reusable materials and how they can drive a circular economy.
• Fostering Community Engagement: Developing spaces for social interaction around reuse-focused stores and workshops.
• Raising Awareness: Transforming a former consumerist symbol into a center for circular practices.
Highlights:
• The project emphasizes cross-sector collaboration with producers and wholesalers to repurpose surplus materials before they enter the recycling phase.
• This project can serve as a prototype for reusing many idle commercial buildings in different scales and sizes.
• The findings indicate that transforming large vacant properties can support sustainable practices and present an economically attractive business model with high social returns at the same time.
• It highlights the potential of how sustainable practices in the construction sector can drive societal change.
2. Here at JCI Marketing, we
love to take your website
to the next level…
3. JCI Marketing had the opportunity to redesign
Pilla Sport’s website - a company that creates top of
the line lenses for elite sporting professionals.
6. *We determined there was too much going on above the fold with bits of information
scattered everywhere. The eye has a hard time landing somewhere.
7. Let’s take a look at the homepage (above the fold)
after…
8.
9. *Lots of white space so the eye is drawn to the product and clear messaging.
10. Old Pilla Banner Images
On Pilla’s old site, they made use of sliding banner images to display different messages and
images on the homepage. This is a common feature used to highlight different products and
messages as well as provide some movement on your site.
11. Color Configurator
JCI implemented a color configurator that acted as a creative visual feature. Every time the
page loaded or refreshed, the color elements and messaging changed based on the color of
lens displayed. This was a creative way to display different lenses and taglines, without having
to do a normal rotating image gallery.
12. Homepage (Below the Fold)
We created a grid menu below the main
banner image to navigate to different
pages on the site. The client wanted a
“dashboard” feel on the homepage, a
highly visual overview of what the site
entailed. We went a step further and
added interactive elements, so when you
hover over a block, a video or simulation
plays. The blocks of color correspond to
the lenses displayed in the banner on
that page.
13. Subpage Layout
The subpages contained a lot of content
that needed good organization. In order
to conserve space throughout the site we
developed index pages that allowed for
horizontal scrolling. We did this so you
could find relevant content faster by not
having to scroll for a long time on each
page. We also broke up and delineated
sections by using different background
colors (white & light gray).
14. Subpages - Images
Cutout images against a lot of white
space, juxtaposed against solid blocks of
color or square images gave the
subpages a nice layout flow and enabled
the sections to breath more. Cutout
images of the glasses helped display the
products in a clean, attractive way.
15. White Space And Pops Of Color
Pilla's overall brand is very black and white. Intentional white space was used to enable the lens colors
and other bits of color on the page to pop.
16. Let’s take a look at the homepage (mobile view)
before…
17. Responsive Web Design
At JCI Marketing, we keep responsive
design in mind. Responsive web design
is the practice of designing a web page
for different device sizes. It ensures
elements on a page (images, text, cta’s,
etc) all “respond” or correctly display on
desktop, mobile and tablet devices.
Pilla’s old website was not responsive, as
you can see. The image at the top and
the footer site map is cut off from view,
as well as the top navigation, making it
impossible to navigate around on the
site.
18. Let’s take a look at the homepage (mobile view)
after…
19. New Mobile View
Content (both text and images) were laid
out with responsive design in mind. This
mobile view of Pilla’s New Product page
gives you an idea of what someone
would see when viewing the website on
their mobile device. Text is readable and
images are positioned at the top of each
section of written content. The
hamburger menu located at the top left of
the page enables the user to easily
navigate around the website.
20. Conclusion:
The client was happy with the final product and felt
the design executed what they were going for in the redesign. The
additional features and interactive elements really gave Pilla Sport
the pop and cutting edge they were hoping for - as it conveyed who
they were as a company.
22. Interested in hearing more?
Check out our website at jcimarketing.com. We would also love to offer you our free
Ebook: 25 Website Must-Haves. Get the Ebook by clicking on the link below!