import { Split } from 'mdx-deck/layouts'; import { Image, Appear } from 'mdx-deck'; import { Box, Button, Flex } from '@puppies4life/lyca';
export { swiss as theme } from 'mdx-deck/themes';
https://admiring-wing-b7a0b9.netlify.com
Freelance Designer & Developer
- design: product & visual
- developer: UI development
.css {
position: var(--my-❤);
}- Geocities
"Less but better"
- Dieter Rams
- Easy to add
- Work and life
- Trust others
- Learning
- Life fun
- Profession always evolves
- Start with design > development
- Lots of these will be smaller pieces
- Main piece at end (Lyca)
- Encourage discussion
**Goals**
- Sketch
- Invision Studio
- Transitions
- Parallax
**Goals**
- Sketch
- Push Invision's animation capabilities
** Intro **
- Non-profit improve student outcomes though crowd sourcing data
** Goals **
- Improve the presentation and usefulness of their homepage
** Empathy **
- High school principles, community college administrators
- Short turnaround time, low resources and budget
** Problems **
- Visual design
- Tool finding
- Storytelling
- Limited resources and budget
** Results **
- Updated visual design based on logo
- Improved IA of navigation and tools
** Intro **
- Zipongo
- Healthy meal ordering app
** Goals **
- Orig - design meal first UX
** Empathy **
- Working parents
** Problems **
- Product direction based on assumptions
- Incredibly short turnaround time
** Direction **
- Rapid prototype
- User testing
** Outcome **
- Invalidated hypothesis
- Gained insight into new predictive personas
- Pivoted
** Intro **
- Leading gaming media and news site
- Joined 2013 during redesign
** Problems **
- Jumping into redesign, execute immediately
- Balance fun, unique designs with manageable code base
/* media.scss */
.media { ... }
.media-figure { ... }
.media-body { ... }
.media-title { ... }- Context: Modular CSS, SASS, Compass, Variation BEM methodology
<article class="media">
<figure class="media-figure">...</div>
<div class="media-body">
<div class="media-title">...</div>
...
</div>
</article>
- ** Intro **
- Explain what Lyca is
- ** Problems **
- Clients were React based
- CSS was a mess
- Design needs required something custom
- Friendly to developers who didn't use CSS
- Move fast
- Need constraints to future-proof
- Small and simple for high resusability because of its shared nature
- **Walkthrough**
- **Explain what I like and don't like**
- Design tokens become a first-class citizen
- Consistent props
- Not writing classnames
- Not writing CSS that is dependent on HTML
- Encapsulation of styling, no context switching or class hunting
- Composing is far easier, not writing new CSS