Website Design Software

What website design software do you use or prefer to use? Why?

There are so many design software's on the market, it can be difficult to find one that works the way you want it to. I am hoping that this thread will help anyone reading it in either deciding on a design tool or find a new one to try that they were unaware or unsure of.

 

Well most people I know use Photoshop, but it depends what part of the design phase you're talking about?

When it comes to wireframes I like to do those by hand in little thumbnails. When it comes to mockups I like to use Axure but it's a bit of a steep learning curve for some people. Here's a design I did with it, but many beginners wouldn't know how to get there: http://i.imgur.com/z0jHQCh.png

I've been moving to photoshop recently for mockups though and I must say I am definitely enjoying it more than I did previously.

 

This is one of my weak spots in my web development career. I don't really use Photoshop or anything for aesthetics. I'm more a code junkie. Probably doesn't help that I can't draw to save my life. At least not in any manner that would go on a website.

 

I just recently decided to create my blog site using Wordpress... I hated it. I am keeping it for now because it made it faster for me to get it together, but I did not like the way the program was designed. First off, I felt restricted. Like I had to stick within Wordpress parameters and had not breathing room. I like to have control of all aspects of the design when it comes to my sites... I have that capability when dealing with templates or doing it freehand, but I did not feel like I had this with Wordpress. I also noticed that it is not as user friendly as people are lead to believe. I put my boyfriend in front of it and he was a bit lost. I got it because I'm used to working with both complex and simplistic systems... but for someone who has no background in design, they would be a bit lost. So naturally that turned me off to it. I like things that give you a lot of room if you know what your doing, but are simplistic enough that a child can figure it out if you are a beginner at the game. I did not feel that Wordpress gave users those abilities.

 

@ockham Nope, that's in many cases a better way to approach web design - don't use Photoshop, use your code, dude! You see, Photoshop was designed at a time when "liquid design" and "responsive pages" weren't even heard about, so it doesn't cater to those needs. You can only create "static" graphics with it - logos, cartoons, mainly edit photos (from where its name)... Even for icon's it's better using something else - like Illustrator - so that you'll get scalable SVG files instead of bitmap images that "pixelize" when scaled up or lose important information when scaled down.

You should "design", though, with your code itself. I mean, don't just "throw stuff around until it's readable", read some basics about design (what colors you should use with what other colors, what each color is best used for - for example, red "grabs attention", so it's great to add it to a logo, yellow interrupts the viewers line of thought, so you shouldn't use it as a background to important information), and keep doing what you're already doing. "Design" is, among other things, about creating a beautiful Ferrari, or a strange-looking teapot. "Web Design" is (or rather should) be more about "presenting information properly", not doing fancy graphics and have boxes jumping around.

Since you're "more of a coder", take a peek at my own site and look how I've "designed" its theme with almost purely code: choosing to display everything in "vertical slices" was a "web design" choice, so that it would be easier to re-arange the content for different screen sizes. That doesn't have to do with fancy graphics and doesn't need Photoshop - but it is "design", it is something you are already doing, by splitting your content in DIVs. Congrats, you're already a designer my friend!

The more "design-y" thing you'll see in my theme is the use of transparency and shadows, so as to give an illusion of depth. That's also something anyone can do (and "become a dezinerr!" :-D ): change the color and background color of each of your DIVs according to how important their color is. It's like "SEO for the visitors eye" Display your important information with brighter colors, your not-so-important one with darker, or with some added transparency.

So, don't worry for "not knowing Photoshop". You don't have to - and you can do alright by using code and premade graphics to "spice it up".

 

@toradrake I can't understand how you find WordPress "restrictive" as far as design goes. You mean you tried to create your own theme and couldn't do what you wanted with it? Or that you used pre-made themes and you found they don't allow you to easilly change and tweak them to your liking? Those are two veeeery different things! I never found WP as a platform "restrictive" as far as web design goes. What always restricted me in what I wanted to do was my own lack of knowledge on some stuff - for example, by not knowing JavaScript or how to use Node.js I can't "design" parallax-scrolling sites :-(

 

You don't need to know how to draw to work with photoshop for design, you use shapes, text, lines, etc not brushes or pens .

I still design for photoshop but you need to know what is going to change and how to make it work. You can't create a mockup that scales up and down unless you do several or you code it. Either way photoshop is still a really good tool to get your design down. I created this design which is a responsive design and looks freaking awesome on phones and tablets as far as I could understand and code for them as a beginner. If I was more experienced with the framework I was using it would have been much better for sure.

Regardless you have to start somewhere. For me that is on paper with wireframes. I cannot seem to do these on computer but I like my thumbnails for sure. When that is done I pick one and make a mockup on photoshop and I make it for 1024 wide screen but I build it on a 1920 wide and test on all sizes.... so I am always aware what parts move or warp for different sizes....there's never a time where I am like "well crap, now everything is shit cause I made the mockup on Photoshop"....you've got to be intelligent enough to understand it's a mockup - it's what the website will look like in one specific condition and not even exactly. It's an example of the outcome desired.

As for being more of a coder maybe you should look into frameworks that will do the designing for you, such as bootstrap, OR better yet, download free templates. That's what I do for my school projects that are code based. I download a template and whack it in, often times I don't even change anything other than the menu items and copyright.

I found it the same but that was before I learned a little more about its structure and API. I still am not fluent in it but I am learning slowly...I think the best way to do it is to follow a step by step tutorial on building a theme from scratch (or subtheme type deal). I learned Drupal themes that way.

 

@Alunny Yep, I totally agree with everything. I just said "it's better for a coder like him to do his designs with code instead of Photoshop" since he already knows a bit about how to do it and he'd have better results by going all-code than half-code, half-Photoshop (until he learns more about PS).

You have to be waaaaay accustomed to design and PS to be able to imagine how the static content you design there will reflow in a fluid responsive page. I mean, in a "properly responsive theme", its bits and parts won't stay in the same place, won't always have the same size, and Photoshop doesn't help (at - all) in seeing how changes in page size will affect your design.

If you go the other way around, make almost whole of your design with code, then you'll just have some "empty bits" here and there you can "fill" with graphics from PS. It's easier that way for someone who's already used to "doing it with code" like he said he is.

P.S.: Your theme's nice, your gradient... not so much I mean, I like it, since I also love shadows, transparencies, glossy effects, but today people prefer "flatter" designs. Try changing the gradient on your "selected menu entry background" to just flat white, or maybe a rgba(200,200,200,0.9) grey. Other possible additions: "expand" a bit vertically "the blue space under your slideshow" and add social buttons right there, following the... "In Your Face Traditional SEO Technique For Getting Clicks" our grandma's cookbook taught us :-D

 

Word press is not bad if you want a site up fast and you don't have the time or the skills to code your own. I will say that if you learn coding you can add it to your wordpress and that will give you more control.

 

The WP I use (I am currently using it for my blog site) is very restrictive in the design. I have been having difficulty in created a design I like out of the choices that are given. I don't have the money to buy one of their premium ones which are much nicer and the free ones are difficult to manipulate. I am still trying to figure out how to work in the coding for SEO purposes. Maybe it is just me.

 

Never ever use Dreamweaver - that's what my instructor once said. I think the reason why he never recommends the said program is that it's kind of messy. I agree with some of the people here. Wordpress is fine. It makes for an easy-to-use alternative web design software and what's even better is that it's open-sourced. Some would also recommend Template Toaster.

 

I use Photoshop CC/CS6 to design my website and I use Dreamweaver CS6/CC and Brackets to code my website. Dreamweaver it quite interested for the intermediate coders who want to be more efficient when coding their website because coding 1000 lines of code is already stressful, why make it worse? Dreamweaver has a special feature where it will automatically end the tag you started with saving those extra characters. I sometimes use Brackets which is a free software that is suitable for all coding and programming languages.

 

On photoshop you can only design PSD. Most web designers use Dreamweaver and also developers are using dreamweaver and netbeam.

 

Well most people I know use Photoshop. But when it comes to wireframes I like to do those by hand in little thumbnails. When it comes to mockups I like to use Axure but it's a bit of a steep learning curve for some people.

 

I like Aptana Studio 3 best IDE for a lot of languages.

 

In 80's NotePad but since Adobe introduced Dreamweaver... well, my days become longer



fastreplies