Contact Stéphanie Walter

x Cancel
posted 1 year ago

iVélhope new version - route button feedback

Hi guys, I'm currently working on the redesign of the iVelhop application that needs a little refresh. It's an application that helps you to find "iVelhop" bike stations around your in Strasbourg.

I'm struggling with the "route button". It's the button on the right of each overview. It's function is to show the user the route from his current geographic location to the iVelhop station he selected.

The "old" button was a little flat, and I'm not quite sure it worked. I've made two version of the application, one without the label and on with the "itinéraire" label (which means "route" in French). I'm not quite sure either of them work well so I'm really open to feedback concerning this particular part of the application. The color code is the following :

  • purple = a boutique
  • green = they are bikes available on this station
  • orange = no bike available for this station

Thanks a lot :)

The version without the label :

The version with explicit label

Version 3 with a relooking of the icon

Another attempt at creating the icon

posted 2 years ago

Content is like water - feedback on typography

I'm teaching mobile optimization at the university and preparing some slides for the students. This one is a quote by Josh Clark about content : "Content is like water, Content’s going to take many forms". The original quote was from Bruce Lee, but I really like how Josh Clark put it into the "content strategy" context. I wanted to illustrate this in an image. I admit that I'm not if I should quote Josh Clark or Bruce Lee here.

I'm not quite good at typography, so you're feedbacks would be welcome on this little project :)

A little update after the first feedback :

After a little bit of rework and the help of a design friend

posted 3 years ago

CSS3 HTML5 double login/subscribe form using :target

I wanted to play around with CSS3 new pseudo class and was wondering what I could do with some :target when I tought it could be used to display/hide a form. The :target pseudo class is used with anchor urls, but with a little hack on it, it can be used to toogle the visibility of an element. I'll also add a nice bouncing effect on the transition between the two forms.
This is a screenshot in the browser (chrome) of the full CSS3 HTML5 form, I only used an iconic font and a little data-icon trick to display the icons.

It's the second version of the form, it used to be a drop down form, but having drop down + a double form animation was a little bit too much, so I made it all cleaner. I'm open for some changes and improvements, so feel free to give your feedbacks :)

I'll write a tutorial when the form will be finished to explain some of the tricks used here.

I wanted to play around with CSS3 new pseudo class and was wondering what I could do with some :target when I tought it could be used to display/hide a form. The :target pseudo class is used with anchor urls, but with a little hack on it, it can be used to toogle the visibility of an element. I'll also add a nice bouncing effect on the transition between the two forms. This is a screenshot in the browser (chrome) of the full CSS3 HTML5 form, I only used an iconic font and a little data-icon trick to display the icons.

It's the second version of the form, it used to be a drop down form, but having drop down + a double form animation was a little bit too much, so I made it all cleaner. I'm open for some changes and improvements, so feel free to give your feedbacks :)

I'll write a tutorial when the form will be finished to explain some of the tricks used here.

posted 3 years ago

Restaurant Picker : a JqueryMobile demo mini webapp

I've been playing around with <a href="http://jquerymobile.com/">JqueryMobile</a> for a while now, and a friend of mine who is an iOs developer said that he would never use non nativ apps like JqueryMobile, because they look totally ugly and incomplete. I tried to prove him wrong, creating a demo app for my students that did not look too much like the original JqueryMobile design. 
Here are the screenshots of the web-application in the browser. The user can choose a restaurant based on the food served, the town and other user ratings of the restaurant. 

So, do you also think that JqueryMobile app still look ugly ? Would (did) you use it for a project ?

<em>The demo app  is available as a tutorial <a href="http://www.noupe.com/tutorial/jquery-mobile-tutorial-creating-a-restaurant-picker-web-app.html"> on Noupe </a> you can see and download files from them </em> and the code<a href="https://github.com/inpixelitrust/Restaurant-Picker-jQueryMobile-demo"> on github</a>

I've been playing around with JqueryMobile for a while now, and a friend of mine who is an iOs developer said that he would never use non nativ apps like JqueryMobile, because they look totally ugly and incomplete. I tried to prove him wrong, creating a demo app for my students that did not look too much like the original JqueryMobile design. Here are the screenshots of the web-application in the browser. The user can choose a restaurant based on the food served, the town and other user ratings of the restaurant.

So, do you also think that JqueryMobile app still look ugly ? Would (did) you use it for a project ?

The demo app is available as a tutorial on Noupe you can see and download files from them and the code on github

posted 3 years ago

Pure html5 css3 contact form experiment, no image used.

The idea was pretty simple : I wanted to create a pure html5 / css3 contact form, without using any images, and here is the result. Go and take a look at <a href="http://www.inpixelitrust.fr/demos/html5-css3-contact-form/"> the demo </a> (with chrome, safari or firefox)

The trick : I used some gradients, some :before and :after pseudo-classes and an icon font to add the little pictos to the labels.  This is an experiment, it should not be used on live websites since it has some browser compatibility issues and uses code that's still in the W3C working draft. 

I also used some of the new html5 form goodness (placeholder, new input types like mail, etc).

I wrote a tutorial for onextrapixel explaining all the code of this form that will be published soon, so I'll give you the link if you are interrested.

Edit : the tutorial is out on <a href="http://www.onextrapixel.com/2012/01/23/full-css3-html5-contact-form-with-no-images/"> Onextrapixel </a> :)

ps : they are transitions on the pictos, but since I'm using a transition on a :before element, only Firefox 8+ will support it.

The idea was pretty simple : I wanted to create a pure html5 / css3 contact form, without using any images, and here is the result. Go and take a look at the demo (with chrome, safari or firefox)

The trick : I used some gradients, some :before and :after pseudo-classes and an icon font to add the little pictos to the labels. This is an experiment, it should not be used on live websites since it has some browser compatibility issues and uses code that's still in the W3C working draft.

I also used some of the new html5 form goodness (placeholder, new input types like mail, etc).

I wrote a tutorial for onextrapixel explaining all the code of this form that will be published soon, so I'll give you the link if you are interrested.

Edit : the tutorial is out on Onextrapixel :)

ps : they are transitions on the pictos, but since I'm using a transition on a :before element, only Firefox 8+ will support it.

posted 3 years ago

Social icon pack

This is a social icon pack I created for my personal use on my portfolio. The icons exist in 49×51 px, 77×80 px and 102 x 104px and I recently added the dribbble icon (did not need it before).

This is a work in progress, I'm not quite satisfied with the G+ icon, the red part looks like it's on top of the others, but I swear it is not in Photoshop. Any idea ?
I'd add some icons, but the big question is : what kind of icons would designers need then ? I was thinking of WordPress maybe, and behance, your opinion ?

Feel free to <a href="http://www.inpixelitrust.fr/blog/inpixelitrust-pack-gratuit-dicones-sociales-v2/" title="download stephanie walter's social icon pack">download it </a>.

This is a social icon pack I created for my personal use on my portfolio. The icons exist in 49×51 px, 77×80 px and 102 x 104px and I recently added the dribbble icon (did not need it before).

This is a work in progress, I'm not quite satisfied with the G+ icon, the red part looks like it's on top of the others, but I swear it is not in Photoshop. Any idea ? I'd add some icons, but the big question is : what kind of icons would designers need then ? I was thinking of WordPress maybe, and behance, your opinion ?

Feel free to download it .

posted 3 years ago

GUI icon pack created using Illustrator - 80 icons

This is my first attempt in creating an icon pack with so many icons. 

The pack was created for a client. The icons will be used in a CSS framework library as GUI elements for his end-users. Untill now, he was using icons from different packs gather on internet, but he wanted something with some unicity. 
The icons all have a 1px border with a 1px radius, in a darker color thant the one used for the middle. They also have a -45 ° gradient starting from top-left. The client needed them in 32 and 16px.
The php elephant in 16px was particularly hard one.


I saw many icon packs made using Photoshop, but I'm more comfortable using Illustrator with the pixel preview for such a job. Plus the icons are rescalable, in case the client will one day need a bigger version. Do you have any thoughts on using Illustrator or Photoshop for icon design ? What would be the best choice for you ? (and why ?)

Created for <a href="http://www.aenoa-systems.com">Aenoa Systems</a>

This is my first attempt in creating an icon pack with so many icons.

The pack was created for a client. The icons will be used in a CSS framework library as GUI elements for his end-users. Untill now, he was using icons from different packs gather on internet, but he wanted something with some unicity. The icons all have a 1px border with a 1px radius, in a darker color thant the one used for the middle. They also have a -45 ° gradient starting from top-left. The client needed them in 32 and 16px. The php elephant in 16px was particularly hard one.

I saw many icon packs made using Photoshop, but I'm more comfortable using Illustrator with the pixel preview for such a job. Plus the icons are rescalable, in case the client will one day need a bigger version. Do you have any thoughts on using Illustrator or Photoshop for icon design ? What would be the best choice for you ? (and why ?)

Created for Aenoa Systems

posted 4 years ago

Untitled

A piece of the footer I'm working on. Always wanted to try to make a vector version of a character in a picture, I got the occasion here.

A piece of the footer I'm working on. Always wanted to try to make a vector version of a character in a picture, I got the occasion here.