nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Child Item

Website mockups..

techguy

Hi Guys,

First off I consider myself more of a developer than a designer which means i'm brutal with Photoshop.

I've often cosidered/tried to learn PS but I just couldn't be arsed really because all I need it for is web design mockups.

Question: Is there any other programs that one could use for website mockups that is easier to use? I've read that Illustrator is easier but I don't have that to try it.

Would you guys recommend Illustrator? What about GIMP?

Any thoughts/suggestions?

Thanks.

Find more posts tagged with

Quick Links

Comments

S.M.B.

Illustrator is for vector graphics so it's not what you are looking for.

Fireworks is what I use. Find it far better/easier than Photoshop.

cormee

When you say mockups do you mean wireframes or full colour designs? I use Illustrator for wireframes and icons or any vector based stuff and Phptoshop for full colour design mockups but since smart objects were introduced in CS2 I'm using Illustrator a lot more during the full colour design stage.

Some people swear by Fireworks but I've never had much time for it.

techguy

cormee wrote: »

When you say mockups do you mean wireframes or full colour designs? I use Illustrator for wireframes and icons or any vector based stuff and Phptoshop for full colour design mockups but since smart objects were introduced in CS2 I'm using Illustrator a lot more during the full colour design stage.

Some people swear by Fireworks but I've never had much time for it.

I suppose I mean wireframes. I would like to be able to do a full colour design that shows the site as it would be displayed in a browser..

Can you do this in fireworks? I've often tried this in photoshop but it appears that before you put each tool to the canvas you need to tweak a few things.

techguy wrote: »

I suppose I mean wireframes. I would like to be able to do a full colour design that shows the site as it would be displayed in a browser..

Which is it, those are two different things completely.

Fireworks is pretty good. I've always seen developers find it easier than Photoshop and other tools to get the hang of because it's mainly aimed at the web.

If you're doing wireframes (e.g. black & white stuff to give to a designer or work with a team) then Axure, Visio or Omnigraffle are suitable.

S.M.B.

As is Fireworks.

cormee

techguy wrote: »

I suppose I mean wireframes. I would like to be able to do a full colour design that shows the site as it would be displayed in a browser...

A wireframe is a 'skeleton' of the design that shows the basic structure of the page without any of the design elements, ie. you'd literally have a box at the top of your page that says 'header' to indicate the header.

I use Illustrator for that.

For what you're looking to do I'd use both Illustrator and Photoshop, Photoshop mostly. As mentioned by a few others Fireworks is popular too, the difference between the two is that Photoshop can be used for most graphic applications - print, web etc. whereas Fireworks is almost exclusively for web.

[Deleted User]

For quick and nasty prototyping, the Pencil plugin for firefox is great, and light on resources.
https://addons.mozilla.org/en-US/firefox/addon/8487

ramayan

I’ve been searching for a clean and realistic Magazine Mockup for ages and finally landed on this one. Honestly, the quality is insane — super high-res and easy to edit. Perfect for showcasing designs to clients without spending hours on presentation. Definitely bookmarking this site for future projects!

pjdarcy

We use balsamiq mockups in work. You might find it useful