Joonas Sandell @joonassandell Twitter profile

Pinned Tweet

Joonas Sandell

@joonassandell

1 year

I didn't think this day would ever come true, but it did. I launched my portfolio! Take a peek 👀

Joonas Sandell — Designer & Developer

Portfolio of Joonas Sandell, UI/UX Designer and creative Front-end Developer based in Helsinki, Finland.

joonassandell.com

23

7

116

Last Seen Profiles

@koeshen

@goodsuguru

@Kingsford

@i__am___hikari

@Viiina_DL

@Loserman30

@raam_siin

@HunterGemsBSC

@goods_f_akane

@0Xxiizz

@YT_CityGirl

@erednimras

@wvu_URA

@timtam_ov

@qnyn158937

@stw_pdg

@VitticusR

@GaroLoDa

@OxDevStud

@alabyh5

@GracieKerr16

@cyberr_j

@devykr

@Lenosallose

@KanesCabDriv3r

@bokeplokalmalam

@tis_mae

@king__steele

@FrankDaBankTv

@amagami_koko

@wiw3_community

@EnergyUnit

@amadeorossi

@MarrakechFilm

@real_Donna_Ida

Joonas Sandell

@joonassandell

9 months

Couple of initial homepage sketches for an animal welfare organisation. This got rejected by the client though 🥲

5

2

36

Joonas Sandell

@joonassandell

9 months

Mobile views of the Hukka project. If I remember correctly, according to the analytics, majority of the users reported their food waste in mobile.

0

33

Joonas Sandell

@joonassandell

9 months

When I worked at Mediasignal, I was responsible for refreshing our brand including logomark design, brand book, website renewal etc. See more:

0

27

Joonas Sandell

@joonassandell

9 months

Hukka was a food waste measurement app designed for households to measure their daily waste. ”Hukka” means ”loss” in finnish. 97% of the users rated the UI as very easy to use. 💪🏻

0

23

Joonas Sandell

@joonassandell

8 months

I love to build these type of microsites that I made to Omoroi. Fun to design, you get to be a bit more creative and they’re usually fast to develop and ship.

2

22

Joonas Sandell

@joonassandell

1 year

@lmatteis This is (almost) the same way I handled default page transitions (back/forward etc.) in my portfolio

Joonas Sandell — Designer & Developer

Portfolio of Joonas Sandell, UI/UX Designer and creative Front-end Developer based in Helsinki, Finland.

joonassandell.com

4

0

23

Joonas Sandell

@joonassandell

9 months

Hero carousel transition for a sports goods company. I’m glad carousels are no longer a thing though (they should’ve never been!)

0

1

21

Joonas Sandell

@joonassandell

6 years

Have been coding a while w/ TypeScript/React/Mobx + @Firebase stack which is awesome!

1

19

Joonas Sandell

@joonassandell

3 years

@github

0

18

Joonas Sandell

@joonassandell

8 months

Mobile views of the 2021 website project

0

16

Joonas Sandell

@joonassandell

9 months

At one point I was really into Mondrianizm and wanted to try it out in web design, so I converted one of my client projects into this style. Not very usable I guess but it was fun to make.

1

0

15

Joonas Sandell

@joonassandell

10 months

I was playing around with bunch of available assets during the Oras project and created this 404 page animation

2

0

14

Joonas Sandell

@joonassandell

9 months

Website renewal for Hankkija, a company developing feed innovations.

0

14

Joonas Sandell

@joonassandell

9 months

Couple of variations of the mondrianizm piece

0

10

Joonas Sandell

@joonassandell

8 months

This is how looked before our latest redesign. It was nice but I’d say it gave too much ”consulting-vibed” feelings rather than promoting SaaS app.

1

12

Joonas Sandell

@joonassandell

10 months

Building the Oras website almost a decade ago was one of the biggest projects I've been part of. This animation was demonstrating what types of transitions could be used in the site. See more:

1

0

11

Joonas Sandell

@joonassandell

9 months

This was initial website sketch for a client helping children to get a better future.

0

11

Joonas Sandell

@joonassandell

10 months

This was a hero transition sketch for a company providing virtual reality simulation solutions. Site was launched but the transition didn't end up in production. I think this was my first time testing Flinto.

0

10

Joonas Sandell

@joonassandell

10 months

I unsubscribed from @dribbble ! To celebrate that I'll be doing a throwback December by posting some oldies. To start things off, here's "Rubik", a PIM which helped clients to manage and share their product portfolios. I did the design and was partially involved in the development

1

0

10

Joonas Sandell

@joonassandell

8 months

Here’s the full homepage.

0

1

10

Joonas Sandell

@joonassandell

8 months

Here’s how the scrolling and navigation behave

0

1

10

Joonas Sandell

@joonassandell

10 months

I did some acoustic treatment for the office with these wooden acoustic panels. I think I never tweeted about this. Some additional images found in replies. #workspace #studio

2

0

9

Joonas Sandell

@joonassandell

10 months

Hero transition idea for a school's website where I actually used to study as well. I think these hexagon cta's did end up in production but the animations didn't.

0

9

Joonas Sandell

@joonassandell

10 months

This is what I've been working on mostly this year. We made a brand renewal for Biocode () which started with dark themed vibes, and at the end, light mode came along (designed in the browser btw). Also, our design system is finally stable!

0

9

Joonas Sandell

@joonassandell

8 months

Mobile views of the Omoroi project 📱

0

9

Joonas Sandell

@joonassandell

9 months

Couple of additional views of the sporting goods project.

0

8

Joonas Sandell

@joonassandell

1 year

@tannerlinsley @nozzleio I’m happy that you shared this. I’ve felt being alone with this approach for same reasons. Not choosing the headless/modern JS solution for a project made me feel like a ”boomer dev” but what I’ve won is countless dev hours because so many essential features are already built-in.

0

6

Joonas Sandell

@joonassandell

2 years

0

6

Joonas Sandell

@joonassandell

10 months

Applied shadow tokens (variables) to shadow effect styles in Biocode's #figma DS. No more unnecessary theme overrides! (Didn't apply shadow offsets or blurs though because I'm not really sure if they're even needed)

0

6

Joonas Sandell

@joonassandell

7 years

I love this offline message. At first I always assume that the prob is w/ my connection.

0

1

3

Joonas Sandell

@joonassandell

10 months

@jaukia I’m using Figma nowdays but what I miss about Sketch is the superior performance vs Figma which is often incredibly slow and buggy.

0

5

Joonas Sandell

@joonassandell

5 years

@brijanp My thoughts exactly after everyone started talking about design systems all of a sudden. Usually the result is customized documentation of some framework with changed variables. Yeah, that should be a part of it but I’d also prefer theoretical approach (e.g. answers to ”why?”)

0

5

Joonas Sandell

@joonassandell

8 years

I just designed a new icon for Photoshop

0

5

Joonas Sandell

@joonassandell

10 months

Throwback continues: this was the initial sketch for the Rubik PIM project I posted yesterday. Also, this was my very first dribbble shot!

0

5

Joonas Sandell

@joonassandell

10 months

Updating the X logo to bunch of services feels disgusting every time.

0

4

Joonas Sandell

@joonassandell

10 months

Pheew, finally did some Christmas cleaning for my @NotionHQ workspace. I find this tool essential in everything I do in life, from tracking baby's daily routines to collecting TS libraries. But it really needs to be organised well or otherwise it'll lose its meaning.

0

4

Joonas Sandell

@joonassandell

10 months

@wesbos Our website was kind of like this style until we did a brand renewal this year

0

3

Joonas Sandell

@joonassandell

1 year

@Resoundsound Kiitti Ilpo!

0

1

Joonas Sandell

@joonassandell

7 years

Why is it so hard to record screen in macOS (without cursor). Do I really have to buy a software for that?

1

0

3

Joonas Sandell

@joonassandell

3 years

Does anyone know if animating clip-path is a bad thing perfomance-wise? #javascript #css

0

1

Joonas Sandell

@joonassandell

10 months

@puruvjdev I like it! I noticed couple of issues. Overflow seems to scroll on top the ”Back to main menu” and ”On this page” overlay should probably be behind that select (?). Using Brave and iOS.

1

0

2

Joonas Sandell

@joonassandell

3 years

@AdhamDannaway There is nothing wrong in using placeholders, it's common convention. It doesn't disappear in focus, it disappears after adding value. You can add more contrast to a placeholder in focus state. It's good to add label but hint text can be displayed during reactive validation. 👀

1

3

Joonas Sandell

@joonassandell

2 years

@t3dotgg @Calylivin I think we have a carbrain here

0

3

Joonas Sandell

@joonassandell

8 years

Seriously these Photoshop character styles are a fucking joke. Sometimes I have no clue how to apply them and they're pain to maintain.

0

2

Joonas Sandell

@joonassandell

3 years

@JoshWComeau For me this is too much unnecessary line breaks and time consuming grouping, I’ll just go alphabetical and keep things simple 👍🏻

1

0

3

Joonas Sandell

@joonassandell

3 years

@adamwathan Tailwind is fine for building symmetrical ”basic” components like this but when it comes to building interesting and more complex layouts, utility classes like these are useless. In other words, TW would limit my creative design process in the browser. 🤷🏻‍♂️

1

0

3

Joonas Sandell

@joonassandell

6 years

Someone just asked us if we have a React developer w/ 9—13 years of experience. 🤭

0

3

Joonas Sandell

@joonassandell

10 months

I think I'm going to unsubscribe from dribbble, it's pointless to pay for that service anymore. Do you think it makes sense to post "shots" here to X instead? 🤔 #dribbble

1

0

3

Joonas Sandell

@joonassandell

10 years

The "Lobotomized owl" selector w/ m-top creates double linebreaks with <br> tags in @Firefox Fixed it: * + br {margin-top: 0} #CSS

0

3

Joonas Sandell

@joonassandell

9 months

@ersadwork @alignui I think it’s great, easy to select and keep spacing consistent

3

0

3

Joonas Sandell

@joonassandell

9 months

@plantseeds_ If someone can’t take constructive feedback that is usually a sign of inexperience. 🤷

0

1

Joonas Sandell

@joonassandell

10 months

@ay0n_b Yeah, you can pretty much do everything with it. Side note: Those parallax effects (e.g moving images) are made with locomotive-scroll (by @LocomotiveMTL ) to save some development time but they could've been done with framer-motion as well.

1

0

2

Joonas Sandell

@joonassandell

7 years

I'm in @dribbble finally! Follow me and see some of my sketches and shots from the past. #ui #ux

0

2

Joonas Sandell

@joonassandell

4 years

Pre-orders are available for my new EP with @spacemotion on board as our fine remixer.⁣ ⁣ Here's "Ohana". Check it out @ ⁣ ⁣ #progressivehouse #melodichouseandtechno #dancemusic …

0

1

2

Joonas Sandell

@joonassandell

10 months

@natkohasic @dashkitHQ Both 🌞🌚? Let the user/system decide. It’s also good for accessibility.

1

0

2

Joonas Sandell

@joonassandell

2 years

@wesbos Perfect example of useless/unhealthy stuff people buy in NA 🤦🏻‍♂️

1

0

2

Joonas Sandell

@joonassandell

6 months

@EmyLascan @friendthita I don’t want to sound like a dick but the first one is actually better. Latter is way too distracting; too much effects etc. and it’s hard to focus to the content that matters the most.

0

2

Joonas Sandell

@joonassandell

11 years

CSS3 paperplane animation :D http://t.co/tiAV21SjFQ

0

1

2

Joonas Sandell

@joonassandell

1 year

@DanKulkov Although I agree that these numbers should be taken with a grain of salt, you should still optimize for speed etc. It’s basic web dev and not that hard if you know what you’re doing.

1

0

2

Joonas Sandell

@joonassandell

7 years

Sometimes when designing forms gets boring, this might happen

0

2

Joonas Sandell

@joonassandell

9 months

@natkohasic Thanks for the feedback! Yeaah, luckily during this project I learned to read clients a bit better, like who would appreciate unique look and who just wants ”basic stuff”. Sometimes I wish people would look things from brand perspective rather than personal.

1

0

1

Joonas Sandell

@joonassandell

6 years

Have you noticed this phenomena online when people communicate that some are too lazy to write correctly or use just one word in a sentence and expect you to understand the entire context? I think that is impolite because then you don’t care about the recipients time at all.

1

0

2

Joonas Sandell

@joonassandell

7 years

@MikaelJungner 🤦‍

0

2

Joonas Sandell

@joonassandell

10 months

@ay0n_b Thanks @ay0n_b for the feedback! I coded this (Next.js app) but I did use animation library made by Framer called "framer-motion" :)

1

0

2

Joonas Sandell

@joonassandell

1 year

@lmatteis Thank you @_tonygaeta @denniskrb_ and @_philNelson :)

0

2

Joonas Sandell

@joonassandell

8 months

@adrianpop_ Thanks! Built with next.js, react and framer-motion :)

1

0

2

Joonas Sandell

@joonassandell

2 years

@hbomax Can’t see any light because your entire stream looks like a clickers face. You have one job and that is to provide a stable connection for every user but apparently you’re not able to accomplish that 🫤

1

0

2

Joonas Sandell

@joonassandell

9 years

#uxdesign

0

2

Joonas Sandell

@joonassandell

7 years

@vj_andrei @sketchapp @uxpowertools That is probably stacked group from Auto Layout?

2

0

2

Joonas Sandell

@joonassandell

6 years

Well this got me interested in how these companies are paying salaries if not in numbers 🤭 @MeetFrankApp

2

0

2

Joonas Sandell

@joonassandell

9 months

@mespiat Thanks for the feedback @mespiat 🙏

0

2

Joonas Sandell

@joonassandell

10 months

Started converting my portfolio to @nextjs app router from pages router until I noticed that many people had issues with page transitions and also beforePopState is missing. So I just deleted the branch; maybe later 😅

How to animate route transitions in `app` directory? · vercel next.js · Discussion #42658

Hey there! I was wondering, how to go about animating route transitions in app directory? The docs mention that using the template.js file (instead of layout.js) is required but I'd like to lea...

github.com

0

2

Joonas Sandell

@joonassandell

2 years

I don't get it, I have paid @SoundCloud PRO plan and I'm still being forced to listen to ads. To me, PRO/paid plan sounds like it shouldn't have ads😕

0

2

Joonas Sandell

@joonassandell

6 years

PREVIEW 2 // Mode Apart - Days (Original Mix) I’m pleased to share a preview of ’Days’ the second track taken from the EP which is out now from Capital Heaven. Release date: 25.03.2019…

0

2

Joonas Sandell

@joonassandell

7 years

:----D

0

1

Joonas Sandell

@joonassandell

11 years

@lehtuska Foundation is a pleasure indeed. I've been recently exploring http://t.co/JmhIlgx7r7 which seems to be a promising site generator

0

1

Joonas Sandell

@joonassandell

3 years

@rauschma I just call them ”containers” or ”container components” :)

0

1

Joonas Sandell

@joonassandell

8 years

"...In those cases, cases where Angular, React, and so forth are overkill" — @tjvantoll My thoughts exactly!

0

1

Joonas Sandell

@joonassandell

3 years

@AdhamDannaway Also, there are many ways to design inputs. Sometimes placeholders could be very necessary. For example Twitter (iOS app) password prompt has placeholders to locate the inputs themselves. Would you move those simple self-explanatory placeholders as hints to another row?

0

1

Joonas Sandell

@joonassandell

13 years

Omg! Adobe shadow is wonderful (and a bit nerd). Really loving it http://t.co/a2zNLsXs

0

Joonas Sandell

@joonassandell

7 years

@h23agency Onks siellä yksi musta lammas?

0

1

Joonas Sandell

@joonassandell

9 years

Phew, I finally bought Dash!

0

1

Joonas Sandell

@joonassandell

11 years

Saw this already? http://t.co/B6wVLPWS4z

0

1

Joonas Sandell

@joonassandell

10 months

@colourfulchris One flight would probably double the CO2 in the atmosphere

0

1

Joonas Sandell

@joonassandell

7 years

Pikkulenkin saldoa #mural #sporanvihre ää @ Arabia

0

1

Joonas Sandell

@joonassandell

3 years

@AdhamDannaway On focus state, there is a caret which helps to understand that nothing is typed. I made an example in which there is a placeholder as initial hint with accessible contrast and it displays error text (hint) if the validation condition is not met.

🏁React Final Form - Material-UI Example (forked) - CodeSandbox

Demonstrates how to use Material-UI form controls.

codesandbox.io

1

0

1

Joonas Sandell

@joonassandell

2 years

@KassandraSanch @SavvasStephnds Don’t do this, please. Look how your design behaves and add mq’s based on that behavior.

1

0

1

Joonas Sandell

@joonassandell

13 years

Nice presentation by @LeaVerou Lot's of stuff I've seen and been doing but haven't really looked so deeply into. #DDayConf

0

1

Joonas Sandell

@joonassandell

3 years

Google Analytics: Still the most confusing UI I've ever used. How the fuck do I delete a "feature" and wtf that first "feature" is and where the fuck I can find the only thing I want: tracking code. Ctrl+w big time 🖕

0

1

Joonas Sandell

@joonassandell

10 years

Some new toys to play with #peltilelu #koulukunta #moto360 #oneplusone http://t.co/U4Ni8TOpwn

0

1

Joonas Sandell

@joonassandell

12 years

Adobe Shadow w/ LiveReload2. Bye bye refresh button! I could only use livereload but I think shadow reloads bit faster than mobile safari

0

1

Joonas Sandell

@joonassandell

7 years

This is exactly how I've been doing it as well

nicole

@sodevious

7 years

when i'm coding - i think about design when i'm designing - i think about code that was my mindset when i learned 10 years ago & still is

7

107

428

0

1

Joonas Sandell

@joonassandell

11 years

@smashingmag symlinking ST to @Dropbox is a great alternative

0

1

Joonas Sandell

@joonassandell

9 months

@ersadwork @alignui One more point but this is opinionated: I like to keep these variables slightly abstract and not give them ”magic numbers”. So, e.g. instead of space-4 I’d rather add space-xs; if you ever change it, you only have to change the value which kind of follows good coding convention.

1

0

1

Joonas Sandell

@joonassandell

11 years

"Save for Web Ain't Got Shit On Me" should be ImageAlpha's tagline. (Had 2.5mb png, now 150kt \o/) #imageAlpha

0

1

Joonas Sandell

@joonassandell

7 months

@fazurrehman Your’e comparing primitive vs. semantic tokens. Usually semantic tokens inherit primitives. This has nothing to do with the level of experience. But this is probably attention post anyways; I don’t know why I replied.

0

1

Joonas Sandell

@joonassandell

4 years

I can't remember who tweeted this before, but this is a neat non-hacky way to remove those annoying scroll gaps which might happen in one pagers etc. #css

0

1

Joonas Sandell

@joonassandell

10 years

Ylläriruokahommia #safka #viimeksk öksäntunnilla http://t.co/hBbPaqI3EW

0

Joonas Sandell

@joonassandell

8 months

@bami_codes I did the design and code :)

2

0

1