48 posts
  • Has been part of the Envato Community for over 3 years
  • Has sold $1+ on Envato Market
  • Has collected 1+ items on Envato Market
  • Sells items exclusively on Envato Market
+1 more
H4run says

Hi, I’m confused about workflow recently and i wonder about your workflow.

Personally If i design a Theme with Photoshop i cannot consider Jquery or css3 at the beginnig. So i build first the divs and code the main css and some jquery elements using Firebug or Developer tools. After all i can start designing in photoshop.

Please tell me about your workflow. it would be very helpful for me and the other Autors to increase our workflow.

Thank you very much.

1034 posts
  • Has sold $100+ on Envato Market
  • Has been a beta tester for an Envato feature
  • Has collected 1+ items on Envato Market
  • Sells items exclusively on Envato Market
+2 more
BenSheppard says

I’m not much of a designer and I feel when I just open up text editor and start adding divs I prefer it, so it’s normally, piece of paper and a pencil then divs

48 posts
  • Has been part of the Envato Community for over 3 years
  • Has sold $1+ on Envato Market
  • Has collected 1+ items on Envato Market
  • Sells items exclusively on Envato Market
+1 more
H4run says

Thank you for replies. Design in the browser means; u create files, in the code editor writing the code and changing them with firebug right ?

145 posts
  • Has sold $10,000+ on Envato Market
  • Has been part of the Envato Community for over 5 years
  • Has referred 1+ members
  • Located in Australia
+3 more
ThemeChills says

Thank you for replies. Design in the browser means; u create files, in the code editor writing the code and changing them with firebug right ?

My understanding of ‘designing in the browser’ is that you bypass Photoshop and begin your design as you code.

Essentially you’re conceptualizing the site as you go along. Some authors may sketch the main structure on paper first, then implement the necessary look/feel of the design on the fly.

657 posts Fuel Your Web
  • Elite Author: Sold more than $75,000 on Envato Market
  • Won a competition
  • Had an item featured on Envato Market
  • Has been part of the Envato Community for over 7 years
+4 more
Pirenko says

I make a rough sketch on a paper and I start coding straight away. All design testing and adjustments is made through coding :grin:

1034 posts
  • Has sold $100+ on Envato Market
  • Has been a beta tester for an Envato feature
  • Has collected 1+ items on Envato Market
  • Sells items exclusively on Envato Market
+2 more
BenSheppard says

Design in the browser for me literally means, google chrome on one monitor and text editor on the other, I can work out what I need with the design in my head, where the divs would go and such and how to code it, when it comes to adding little details I’ll use photoshop to create icons and such

48 posts
  • Has been part of the Envato Community for over 3 years
  • Has sold $1+ on Envato Market
  • Has collected 1+ items on Envato Market
  • Sells items exclusively on Envato Market
+1 more
H4run says

its intresting, in the whole web there is no tutorial of Design in Browser. in all tutorials 1 Photoshop-2 Slicing- 3 Html-css – 4Jqery. Do you know any tutorial to get inspired of ?

As i see you sketcht the Boxes and in code editor build the Divs than comes Color-graphic. Souns good.

1034 posts
  • Has sold $100+ on Envato Market
  • Has been a beta tester for an Envato feature
  • Has collected 1+ items on Envato Market
  • Sells items exclusively on Envato Market
+2 more
BenSheppard says

It’s not something you learn it’s something you teach yourself

498 posts
  • Has referred 10+ members
  • Has sold $40,000+ on Envato Market
  • Has collected 50+ items on Envato Market
  • Sells items exclusively on Envato Market
+2 more
wopethemes says

LOL why you trying to understand “design in browsers” and looking for some tips.
Just think you skip the photoshop step and begin to code the theme to html,css with your imagine.
“design in browsers” is now common because the minimal and highlight line trend so it does not require too much photoshop works.

Helpful Information

  • Please read our community guidelines. Self promotion and discussion of piracy is not allowed.
  • Open a support ticket if you would like specific help with your account, deposits or purchases.
  • Item Support by authors is optional and may vary. Please see the Support tab on each item page.

Most of all, enjoy your time here. Thank you for being a valued Envato community member.

Post Reply

Format your entry with some basic HTML. Read the Full Details, or here is a refresher:

<strong></strong> to make things bold
<em></em> to emphasize
<ul><li> or <ol><li> to make lists
<h3> or <h4> to make headings
<pre></pre> for code blocks
<code></code> for a few words of code
<a></a> for links
<img> to paste in an image (it'll need to be hosted somewhere else though)
<blockquote></blockquote> to quote somebody

:grin: :shocked: :cry: Complete List of Smiley Codes

by
by
by
by
by
by