Ï
Donohue UX — UI Tab Design</tiotle>
<!-- Required meta tags -->
<meta name="description" content="Donohue UX crafts intuitive, user-centered experiences that drive engagement and innovation. Specializing in UX design, research, and strategy, I create seamless digital solutions for businesses and startups.">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Font Awesome -->
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="assets/css/bootstrap.min.css">
<!-- Fancy Box CSS -->
<link rel="stylesheet" href="assets/css/jquery.fancybox.min.css" />
<!-- Stylesheet CSS -->
<link rel="stylesheet" href="assets/css/main.css" />
</head>
<body>
<!-- navbar top (header) -->
<nav class="sticky-top">
<div class="container">
<div class="navbar__top">
<a href="https://donohueux.com/#header" class="navbar__top__logo">
<img src="assets/img/website-logo.png" alt="Donohue UX">
</a>
<ul class="navbar__menu__desktop">
<li class="navbar__menu__desktop__item">
<a aria-label="aboutSection" href="https://donohueux.com/#about" class="navbar__menu__desktop__link">About</a>
</li>
<li class="navbar__menu__desktop__item">
<span class="navbar__menu__desktop__seperator">•</span>
</li>
<li class="navbar__menu__desktop__item">
<a aria-label="resumeSection" href="https://donohueux.com/#resume" class="navbar__menu__desktop__link">Resume</a>
</li>
<li class="navbar__menu__desktop__item">
<span class="navbar__menu__desktop__seperator">•</span>
</li>
<li class="navbar__menu__desktop__item">
<a aria-label="workSection" href="https://donohueux.com/#work" class="navbar__menu__desktop__link">Work</a>
</li>
<li class="navbar__menu__desktop__item">
<span class="navbar__menu__desktop__seperator">•</span>
</li>
<li class="navbar__menu__desktop__item">
<a aria-label="contactSection" href="https://donohueux.com/#contact" class="navbar__menu__desktop__link">Contact</a>
</li>
</ul>
<div class="d-lg-none">
<div class="navbar__top__hamburger" id="hamburger">
<span></span>
<span></span>
<span></span>
</div>
</div>
</div>
</div>
<ul class="navbar__menu__mobile">
<li class="navbar__menu__mobile__item">
<a aria-label="aboutSection" href="https://donohueux.com/#about" class="navbar__menu__mobile__link">About</a>
</li>
<li class="navbar__menu__mobile__item">
<a aria-label="resumeSection" href="https://donohueux.com/#resume" class="navbar__menu__mobile__link">Resume</a>
</li>
<li class="navbar__menu__mobile__item">
<a aria-label="workSection" href="https://donohueux.com/#work" class="navbar__menu__mobile__link">Work</a>
</li>
<li class="navbar__menu__mobile__item">
<a aria-label="contactSection" href="https://donohueux.com/#contact" class="navbar__menu__mobile__link">Contact</a>
</li>
</ul>
<!-- sub menu -->
<div class="submenu">
<a href="index.html?id=1#work">
<i class="fa fa-arrow-left mr-13"></i>
<p>Back/Work</p>
</a>
<div class="submenu__seperator"></div>
<a href="UI-Deloitte-Style-Guide.html">
<p class="mr-13">Next/UI Design</p>
<i class="fa fa-arrow-right"></i>
</a>
</div>
</nav>
<!-- header section -->
<header class="header">
<div class="container">
<div class="row">
<div class="col-lg-10 mx-auto">
<div class="header__casestudy__img">
<div class="header__casestudy__img"> <img src="art/UI/Tabs/Tabs-Hero@4x.png" alt="" /> </div>
</div>
</div>
</div>
</div>
</header>
<!-- case study title banner -->
<div class="casestudy__banner">
<h1>
<span class="text__orange">UI Design:</span>
<span class="text__white">Tabs</span>
</h1>
</div>
<!-- case study about -->
<div class="container">
<div class="casestudy__about">
<div class="casestudy__about__left">
<h3 class=".casestudy__about__left__bold">My role as a UI designer</h3>
<ul>
<li>Apply the visual design to wireframes </li>
<li>Work closely with accessibility and content where necessary</li>
<li>Collaborate with the software developer to ensure a seamless handover</li>
<li>Validate the component against successive builds</li>
</ul>
</div>
<div class="casestudy__about__right">
<p class="casestudy__about__right__bold">Client </p>
<p>Wells Fargo, San Francisco CA</p>
<p class="casestudy__about__right__bold">My role </p>
<p>UI Designer </p>
<p class="casestudy__about__right__bold">Team </p>
<p>UX designer, developer, content strategist and accessibility. </p>
<p class="casestudy__about__right__bold">Tools </p>
<p>Adobe Illustrator </p>
<p class="casestudy__about__right__bold">Date </p>
<p>2015</p>
</div>
</div>
</div>
<!-- case study section title -->
<div class="container">
<div class="casestudy__section__title">
<h1 class="section__title">Tabs</h1>
<h6 class="section__subtitle mb-0">Wireframe • Anatomy • States • Specifications</h6>
</div>
</div>
<!-- case study section 2-column -->
<div class="portfolio__section">
<div class="container">
<div class="row">
<div class="col-lg-5">
<h1 class="portfolio__section__h1"><span class="casestudy__section__text">Wireframe</span></h1>
</div>
<div class="col-lg-7">
<div class="gallery__img">
<a href="art/UI/Tabs/Tabs-Wireframe@4x.png" data-fancybox="casestudy_album">
<div>
<img src="art/UI/Tabs/Tabs-Wireframe@4x.png" alt="" />
</div>
</a>
</div>
</div>
</div><hr class="mt-5">
</div>
</div>
<!-- case study section 2-column -->
<div class="portfolio__section">
<div class="container">
<div class="row">
<div class="col-lg-5">
<h1 class="portfolio__section__h1"><span class="casestudy__section__text">Anatomy — fixed tabs</span></h1>
<p><span class="casestudy__section__text">Fixed tabs display all tabs on one screen, with each tab at a fixed width. The width of each tab is determined by dividing the number of tabs by the screen width. They don’t scroll to reveal more tabs; the visible tab set represents the only tabs available.</span></p>
</div>
<div class="col-lg-7">
<div class="gallery__img">
<a href="art/UI/Tabs/Tabs-Anatomy-Fixed@4x.png" data-fancybox="casestudy_album">
<div>
<img src="art/UI/Tabs/Tabs-Anatomy-Fixed@4x.png" alt="" />
</div>
</a>
</div>
</div>
</div><hr class="mt-5">
</div>
</div>
<!-- case study section 2-column -->
<div class="portfolio__section">
<div class="container">
<div class="row">
<div class="col-lg-5">
<h1 class="portfolio__section__h1"><span class="casestudy__section__text">Anatomy — scrollable tabs</span></h1>
</div>
<div class="col-lg-7">
<div class="gallery__img">
<a href="art/UI/Tabs/Tabs-Specifications-scrollable@4x.png" data-fancybox="casestudy_album">
<div>
<img src="art/UI/Tabs/Tabs-Specifications-scrollable@4x.png" alt="" />
</div>
</a>
</div>
</div>
</div><hr class="mt-5">
</div>
</div>
<!-- case study section 2-column -->
<div class="portfolio__section">
<div class="container">
<div class="row">
<div class="col-lg-5">
<h1 class="portfolio__section__h1"><span class="casestudy__section__text">Specifications — fixed tabs</span></h1>
</div>
<div class="col-lg-7">
<div class="gallery__img">
<a href="art/UI/Tabs/Tabs-Specifications-2-Fixed@4x.png" data-fancybox="casestudy_album">
<div>
<img src="art/UI/Tabs/Tabs-Specifications-2-Fixed@4x.png" alt="" />
</div>
</a>
</div>
</div>
</div><hr class="mt-5">
</div>
</div>
<!-- case study section 2-column -->
<div class="portfolio__section">
<div class="container">
<div class="row">
<div class="col-lg-5">
<h1 class="portfolio__section__h1"><span class="casestudy__section__text">Specifications — scrollable tabs</span></h1>
</div>
<div class="col-lg-7">
<div class="gallery__img">
<a href="art/UI/Tabs/Tabs-Specifications-scrollable@4x.png" data-fancybox="casestudy_album">
<div>
<img src="art/UI/Tabs/Tabs-Specifications-scrollable@4x.png" alt="" />
</div>
</a>
</div>
</div>
</div>
</div>
</div>
<!-- footer/contact -->
<footer class="footer section" id="contactSection">
<div class="anchor" id="contact"> </div>
<div class="contact">
<div class="container">
<h1 class="section__title">Contact</h1>
<div class="footer__contact">
<a href="mailto:resume@donohueux.com" target="_blank" class="footer__contact__social">
<i class="far fa-envelope"></i>
<p>Resume@donohueux.com</p>
</a>
<a href="https://www.linkedin.com/in/jimdonohue" target="_blank" class="footer__contact__social">
<i class="fab fa-linkedin-in"></i>
<p>Linkedin.com/in/jimdonohue</p>
</a>
</div>
</div>
</div>
<div class="footer__sub">
<h6>©2025 Jim Donohue</h6>
</div>
</footer>
<!-- bootstrap first, jQuery, custom JS -->
<script src="assets/js/bootstrap.bundle.min.js"></script>
<script src="assets/js/jquery-3.5.1.min.js"></script>
<script src="assets/js/popper.min.js"></script>
<script src="assets/js/jquery.fancybox.min.js"></script>
<script src="assets/js/smoothscroll.js"></script>
<script src="assets/js/custom.js"></script>
<script src="https://kit.fontawesome.com/c76c39cb45.js" crossorigin="anonymous"></script>
</body>
</html>