SlideShare a Scribd company logo
Octopus 3.0 look and feel
Why change?
• Apps become dated – a refresh is always nice
• Fix nagging inconsistencies/limits in current design
• No real usability changes just yet – only “look and feel”
• New setup videos etc. for 3.0 - don’t want to record them twice
• Yes I’ve heard of 99designs
• Historically not much luck working with graphic designers
Why not just…
Big, dark navbar draws the eye
Fixed footer, let’s get rid of this
Borders, borders, borders!
Feels battleship grey/Windows 95
Bootstrap 2 and gradients make it feel dated
Project logo quite small
Vertical tabs, space wasted
We like to keep content on a white
background, so we use tabs
Tabs make “create” screens inconsistent
Tabs within tabs break everything
Original 3.0 design idea
Logo colours + flat look:
Problem:
Doesn’t translate nicely to the app
New 3.0 design
Rule: keep ‘chrome’ white/grey/soft
Only important info/call to actions should draw the eye
- Main content is *always* on white background
- Pages that might normally be split in vertical tabs will have a sidebar instead
Dashboard, project list,
environments
Project, library Script module, step
templates
Rule: consistent layouts (no vertical tabs)
Task output (or we
might use a sidebar
there too)
After days and days of hard, meticulous
work…
I gave up and searched WrapBootstrap
I found a great theme!
I found a great theme!
Sidebar can have more interesting content
than tabs
Things we’ll use
• Bootstrap 3
• No more images – Font Awesome/custom icon fonts
• LESS
• Selectize.js

More Related Content

Similar to 3.0 look and feel

Early prevention of accessibility issues with mockup & wireframe reviews
Early prevention of accessibility issues with mockup & wireframe reviewsEarly prevention of accessibility issues with mockup & wireframe reviews
Early prevention of accessibility issues with mockup & wireframe reviews
Aidan Tierney
 
Portfolio idea 8_Redesign of efhseasia.com
Portfolio idea 8_Redesign of efhseasia.comPortfolio idea 8_Redesign of efhseasia.com
Portfolio idea 8_Redesign of efhseasia.com
hsuanie7
 
OOTB Presentation
OOTB PresentationOOTB Presentation
OOTB Presentation
vedawms
 
UI-UX Practical Talking - Mohamed Shehata
UI-UX Practical Talking - Mohamed ShehataUI-UX Practical Talking - Mohamed Shehata
UI-UX Practical Talking - Mohamed Shehata
Mohamed Shehata
 
James Walsh - Drink Digital -30/11/17 - Productivity Tools
James Walsh - Drink Digital -30/11/17 - Productivity ToolsJames Walsh - Drink Digital -30/11/17 - Productivity Tools
James Walsh - Drink Digital -30/11/17 - Productivity Tools
James Walsh
 
Crabrill
CrabrillCrabrill
Crabrill
PhoenixFIFI
 
Plone 5 theming unleashed
Plone 5 theming unleashedPlone 5 theming unleashed
Plone 5 theming unleashed
sneridagh
 
Media Port 2012, Session 5: iPad App of "Lebensmittel Zeitung"
Media Port 2012, Session 5: iPad App of "Lebensmittel Zeitung"Media Port 2012, Session 5: iPad App of "Lebensmittel Zeitung"
Media Port 2012, Session 5: iPad App of "Lebensmittel Zeitung"
WAN-IFRA
 
University of Portsmouth Library: A practical approach to Responsive Design
University of Portsmouth Library: A practical approach to Responsive Design University of Portsmouth Library: A practical approach to Responsive Design
University of Portsmouth Library: A practical approach to Responsive Design
Terminalfour
 
Pro forma
Pro formaPro forma
Pro forma
ZkyQatDalyani
 
Web 2.0 style guide
Web 2.0 style guideWeb 2.0 style guide
Web 2.0 style guide
ananda gunadharma
 
Pro forma
Pro formaPro forma
Pro forma
ZkyQatDalyani
 
Pro forma
Pro formaPro forma
Pro forma
ZkyQatDalyani
 
MICROSOFT WORD 2007.pptx
MICROSOFT WORD 2007.pptxMICROSOFT WORD 2007.pptx
MICROSOFT WORD 2007.pptx
GauravPlays
 
Pro forma
Pro formaPro forma
Pro forma
ZkyQatDalyani
 
Good Website Design vs Bad Website Design
Good Website Design vs Bad Website DesignGood Website Design vs Bad Website Design
Good Website Design vs Bad Website Design
Sikander Nazir
 
CIDA Unit 01 - Website Walk through
CIDA  Unit 01 - Website Walk throughCIDA  Unit 01 - Website Walk through
CIDA Unit 01 - Website Walk through
Lance Challenor
 
Webdesign New
Webdesign NewWebdesign New
Webdesign New
lyngdoh
 
Marketo's New UI
Marketo's New UIMarketo's New UI
Marketo's New UI
Jessica Kao
 
Canvas Integration
Canvas IntegrationCanvas Integration
Canvas Integration
Rauenzahner
 

Similar to 3.0 look and feel (20)

Early prevention of accessibility issues with mockup & wireframe reviews
Early prevention of accessibility issues with mockup & wireframe reviewsEarly prevention of accessibility issues with mockup & wireframe reviews
Early prevention of accessibility issues with mockup & wireframe reviews
 
Portfolio idea 8_Redesign of efhseasia.com
Portfolio idea 8_Redesign of efhseasia.comPortfolio idea 8_Redesign of efhseasia.com
Portfolio idea 8_Redesign of efhseasia.com
 
OOTB Presentation
OOTB PresentationOOTB Presentation
OOTB Presentation
 
UI-UX Practical Talking - Mohamed Shehata
UI-UX Practical Talking - Mohamed ShehataUI-UX Practical Talking - Mohamed Shehata
UI-UX Practical Talking - Mohamed Shehata
 
James Walsh - Drink Digital -30/11/17 - Productivity Tools
James Walsh - Drink Digital -30/11/17 - Productivity ToolsJames Walsh - Drink Digital -30/11/17 - Productivity Tools
James Walsh - Drink Digital -30/11/17 - Productivity Tools
 
Crabrill
CrabrillCrabrill
Crabrill
 
Plone 5 theming unleashed
Plone 5 theming unleashedPlone 5 theming unleashed
Plone 5 theming unleashed
 
Media Port 2012, Session 5: iPad App of "Lebensmittel Zeitung"
Media Port 2012, Session 5: iPad App of "Lebensmittel Zeitung"Media Port 2012, Session 5: iPad App of "Lebensmittel Zeitung"
Media Port 2012, Session 5: iPad App of "Lebensmittel Zeitung"
 
University of Portsmouth Library: A practical approach to Responsive Design
University of Portsmouth Library: A practical approach to Responsive Design University of Portsmouth Library: A practical approach to Responsive Design
University of Portsmouth Library: A practical approach to Responsive Design
 
Pro forma
Pro formaPro forma
Pro forma
 
Web 2.0 style guide
Web 2.0 style guideWeb 2.0 style guide
Web 2.0 style guide
 
Pro forma
Pro formaPro forma
Pro forma
 
Pro forma
Pro formaPro forma
Pro forma
 
MICROSOFT WORD 2007.pptx
MICROSOFT WORD 2007.pptxMICROSOFT WORD 2007.pptx
MICROSOFT WORD 2007.pptx
 
Pro forma
Pro formaPro forma
Pro forma
 
Good Website Design vs Bad Website Design
Good Website Design vs Bad Website DesignGood Website Design vs Bad Website Design
Good Website Design vs Bad Website Design
 
CIDA Unit 01 - Website Walk through
CIDA  Unit 01 - Website Walk throughCIDA  Unit 01 - Website Walk through
CIDA Unit 01 - Website Walk through
 
Webdesign New
Webdesign NewWebdesign New
Webdesign New
 
Marketo's New UI
Marketo's New UIMarketo's New UI
Marketo's New UI
 
Canvas Integration
Canvas IntegrationCanvas Integration
Canvas Integration
 

Recently uploaded

Unveiling the Advantages of Agile Software Development.pdf
Unveiling the Advantages of Agile Software Development.pdfUnveiling the Advantages of Agile Software Development.pdf
Unveiling the Advantages of Agile Software Development.pdf
brainerhub1
 
J-Spring 2024 - Going serverless with Quarkus, GraalVM native images and AWS ...
J-Spring 2024 - Going serverless with Quarkus, GraalVM native images and AWS ...J-Spring 2024 - Going serverless with Quarkus, GraalVM native images and AWS ...
J-Spring 2024 - Going serverless with Quarkus, GraalVM native images and AWS ...
Bert Jan Schrijver
 
UI5con 2024 - Bring Your Own Design System
UI5con 2024 - Bring Your Own Design SystemUI5con 2024 - Bring Your Own Design System
UI5con 2024 - Bring Your Own Design System
Peter Muessig
 
Mobile App Development Company In Noida | Drona Infotech
Mobile App Development Company In Noida | Drona InfotechMobile App Development Company In Noida | Drona Infotech
Mobile App Development Company In Noida | Drona Infotech
Drona Infotech
 
在线购买加拿大英属哥伦比亚大学毕业证本科学位证书原版一模一样
在线购买加拿大英属哥伦比亚大学毕业证本科学位证书原版一模一样在线购买加拿大英属哥伦比亚大学毕业证本科学位证书原版一模一样
在线购买加拿大英属哥伦比亚大学毕业证本科学位证书原版一模一样
mz5nrf0n
 
YAML crash COURSE how to write yaml file for adding configuring details
YAML crash COURSE how to write yaml file for adding configuring detailsYAML crash COURSE how to write yaml file for adding configuring details
YAML crash COURSE how to write yaml file for adding configuring details
NishanthaBulumulla1
 
Project Management: The Role of Project Dashboards.pdf
Project Management: The Role of Project Dashboards.pdfProject Management: The Role of Project Dashboards.pdf
Project Management: The Role of Project Dashboards.pdf
Karya Keeper
 
Preparing Non - Technical Founders for Engaging a Tech Agency
Preparing Non - Technical Founders for Engaging  a  Tech AgencyPreparing Non - Technical Founders for Engaging  a  Tech Agency
Preparing Non - Technical Founders for Engaging a Tech Agency
ISH Technologies
 
Hand Rolled Applicative User Validation Code Kata
Hand Rolled Applicative User ValidationCode KataHand Rolled Applicative User ValidationCode Kata
Hand Rolled Applicative User Validation Code Kata
Philip Schwarz
 
Modelling Up - DDDEurope 2024 - Amsterdam
Modelling Up - DDDEurope 2024 - AmsterdamModelling Up - DDDEurope 2024 - Amsterdam
Modelling Up - DDDEurope 2024 - Amsterdam
Alberto Brandolini
 
All you need to know about Spring Boot and GraalVM
All you need to know about Spring Boot and GraalVMAll you need to know about Spring Boot and GraalVM
All you need to know about Spring Boot and GraalVM
Alina Yurenko
 
UI5con 2024 - Boost Your Development Experience with UI5 Tooling Extensions
UI5con 2024 - Boost Your Development Experience with UI5 Tooling ExtensionsUI5con 2024 - Boost Your Development Experience with UI5 Tooling Extensions
UI5con 2024 - Boost Your Development Experience with UI5 Tooling Extensions
Peter Muessig
 
Safelyio Toolbox Talk Softwate & App (How To Digitize Safety Meetings)
Safelyio Toolbox Talk Softwate & App (How To Digitize Safety Meetings)Safelyio Toolbox Talk Softwate & App (How To Digitize Safety Meetings)
Safelyio Toolbox Talk Softwate & App (How To Digitize Safety Meetings)
safelyiotech
 
原版定制美国纽约州立大学奥尔巴尼分校毕业证学位证书原版一模一样
原版定制美国纽约州立大学奥尔巴尼分校毕业证学位证书原版一模一样原版定制美国纽约州立大学奥尔巴尼分校毕业证学位证书原版一模一样
原版定制美国纽约州立大学奥尔巴尼分校毕业证学位证书原版一模一样
mz5nrf0n
 
Measures in SQL (SIGMOD 2024, Santiago, Chile)
Measures in SQL (SIGMOD 2024, Santiago, Chile)Measures in SQL (SIGMOD 2024, Santiago, Chile)
Measures in SQL (SIGMOD 2024, Santiago, Chile)
Julian Hyde
 
How to write a program in any programming language
How to write a program in any programming languageHow to write a program in any programming language
How to write a program in any programming language
Rakesh Kumar R
 
Fundamentals of Programming and Language Processors
Fundamentals of Programming and Language ProcessorsFundamentals of Programming and Language Processors
Fundamentals of Programming and Language Processors
Rakesh Kumar R
 
Liberarsi dai framework con i Web Component.pptx
Liberarsi dai framework con i Web Component.pptxLiberarsi dai framework con i Web Component.pptx
Liberarsi dai framework con i Web Component.pptx
Massimo Artizzu
 
zOS Mainframe JES2-JES3 JCL-JECL Differences
zOS Mainframe JES2-JES3 JCL-JECL DifferenceszOS Mainframe JES2-JES3 JCL-JECL Differences
zOS Mainframe JES2-JES3 JCL-JECL Differences
YousufSait3
 
E-Invoicing Implementation: A Step-by-Step Guide for Saudi Arabian Companies
E-Invoicing Implementation: A Step-by-Step Guide for Saudi Arabian CompaniesE-Invoicing Implementation: A Step-by-Step Guide for Saudi Arabian Companies
E-Invoicing Implementation: A Step-by-Step Guide for Saudi Arabian Companies
Quickdice ERP
 

Recently uploaded (20)

Unveiling the Advantages of Agile Software Development.pdf
Unveiling the Advantages of Agile Software Development.pdfUnveiling the Advantages of Agile Software Development.pdf
Unveiling the Advantages of Agile Software Development.pdf
 
J-Spring 2024 - Going serverless with Quarkus, GraalVM native images and AWS ...
J-Spring 2024 - Going serverless with Quarkus, GraalVM native images and AWS ...J-Spring 2024 - Going serverless with Quarkus, GraalVM native images and AWS ...
J-Spring 2024 - Going serverless with Quarkus, GraalVM native images and AWS ...
 
UI5con 2024 - Bring Your Own Design System
UI5con 2024 - Bring Your Own Design SystemUI5con 2024 - Bring Your Own Design System
UI5con 2024 - Bring Your Own Design System
 
Mobile App Development Company In Noida | Drona Infotech
Mobile App Development Company In Noida | Drona InfotechMobile App Development Company In Noida | Drona Infotech
Mobile App Development Company In Noida | Drona Infotech
 
在线购买加拿大英属哥伦比亚大学毕业证本科学位证书原版一模一样
在线购买加拿大英属哥伦比亚大学毕业证本科学位证书原版一模一样在线购买加拿大英属哥伦比亚大学毕业证本科学位证书原版一模一样
在线购买加拿大英属哥伦比亚大学毕业证本科学位证书原版一模一样
 
YAML crash COURSE how to write yaml file for adding configuring details
YAML crash COURSE how to write yaml file for adding configuring detailsYAML crash COURSE how to write yaml file for adding configuring details
YAML crash COURSE how to write yaml file for adding configuring details
 
Project Management: The Role of Project Dashboards.pdf
Project Management: The Role of Project Dashboards.pdfProject Management: The Role of Project Dashboards.pdf
Project Management: The Role of Project Dashboards.pdf
 
Preparing Non - Technical Founders for Engaging a Tech Agency
Preparing Non - Technical Founders for Engaging  a  Tech AgencyPreparing Non - Technical Founders for Engaging  a  Tech Agency
Preparing Non - Technical Founders for Engaging a Tech Agency
 
Hand Rolled Applicative User Validation Code Kata
Hand Rolled Applicative User ValidationCode KataHand Rolled Applicative User ValidationCode Kata
Hand Rolled Applicative User Validation Code Kata
 
Modelling Up - DDDEurope 2024 - Amsterdam
Modelling Up - DDDEurope 2024 - AmsterdamModelling Up - DDDEurope 2024 - Amsterdam
Modelling Up - DDDEurope 2024 - Amsterdam
 
All you need to know about Spring Boot and GraalVM
All you need to know about Spring Boot and GraalVMAll you need to know about Spring Boot and GraalVM
All you need to know about Spring Boot and GraalVM
 
UI5con 2024 - Boost Your Development Experience with UI5 Tooling Extensions
UI5con 2024 - Boost Your Development Experience with UI5 Tooling ExtensionsUI5con 2024 - Boost Your Development Experience with UI5 Tooling Extensions
UI5con 2024 - Boost Your Development Experience with UI5 Tooling Extensions
 
Safelyio Toolbox Talk Softwate & App (How To Digitize Safety Meetings)
Safelyio Toolbox Talk Softwate & App (How To Digitize Safety Meetings)Safelyio Toolbox Talk Softwate & App (How To Digitize Safety Meetings)
Safelyio Toolbox Talk Softwate & App (How To Digitize Safety Meetings)
 
原版定制美国纽约州立大学奥尔巴尼分校毕业证学位证书原版一模一样
原版定制美国纽约州立大学奥尔巴尼分校毕业证学位证书原版一模一样原版定制美国纽约州立大学奥尔巴尼分校毕业证学位证书原版一模一样
原版定制美国纽约州立大学奥尔巴尼分校毕业证学位证书原版一模一样
 
Measures in SQL (SIGMOD 2024, Santiago, Chile)
Measures in SQL (SIGMOD 2024, Santiago, Chile)Measures in SQL (SIGMOD 2024, Santiago, Chile)
Measures in SQL (SIGMOD 2024, Santiago, Chile)
 
How to write a program in any programming language
How to write a program in any programming languageHow to write a program in any programming language
How to write a program in any programming language
 
Fundamentals of Programming and Language Processors
Fundamentals of Programming and Language ProcessorsFundamentals of Programming and Language Processors
Fundamentals of Programming and Language Processors
 
Liberarsi dai framework con i Web Component.pptx
Liberarsi dai framework con i Web Component.pptxLiberarsi dai framework con i Web Component.pptx
Liberarsi dai framework con i Web Component.pptx
 
zOS Mainframe JES2-JES3 JCL-JECL Differences
zOS Mainframe JES2-JES3 JCL-JECL DifferenceszOS Mainframe JES2-JES3 JCL-JECL Differences
zOS Mainframe JES2-JES3 JCL-JECL Differences
 
E-Invoicing Implementation: A Step-by-Step Guide for Saudi Arabian Companies
E-Invoicing Implementation: A Step-by-Step Guide for Saudi Arabian CompaniesE-Invoicing Implementation: A Step-by-Step Guide for Saudi Arabian Companies
E-Invoicing Implementation: A Step-by-Step Guide for Saudi Arabian Companies
 

3.0 look and feel