Hi all!

 

Hope you had a good xmas.

 

I'm new to web design...I studied graphic design and illustration (and worked as illustrator for last few years), but have changed course and am getting into web design. I've recently completed a web design online course which was super helpful, and am now in the process of putting together a portfolio of sample web designs. My plan is to have around 5 different sample homepage designs (in tablet, phone and desktop versions reflecting responsive design considerations) for 5 made up brands/businesses etc. I've completed one thus far in photoshop including the text. From now on though I'd like to use other sofware for different aspects of the design photoshop is a bit pants when it comes to rendering text for example. It may be a a daft question, but would anyone suggest what software (out of photoshop, illustrator and indesign) I might be best to use?

 

For example, could I create the layout in indesign (scrolling homepage), use illustrator/photoshop for graphics/images and then indesign for text?

 

Sorry if it's a silly question...just wanting to design it all correctly from the start so they'll look good as portfolio pieces.

 

THANKS!

Welcome to the forums!

 

Mockups are best done using the native web medium, ie a web browser, using HTML and CSS, and possibly some javascript if it's required. That way you can demonstrate user interactions, and how a page adapts for display on various devices and so on.

 

Image editors can only create and manipulate images, you're best starting with a simple code editor and getting stck into HTML/CSS.

In our company the designers use Photoshop for the mockups. We want them to focus their attention on the design and let us developers worry about the code. I as a developer often collaborate with the designer during the design phase to talk about the UX aspect. When the design is finished I get a mobile design and desktop design and I decide what happens in between, where the breakpoints are etc.

 

For initial brainstorming type mockups pen and paper is used before wireframing is implemented on PS

We operate the same as above. Mockups are always produced in Photoshop, I've never heard of mockups being created in HTML, that would usually be the prototype. Mockups are visuals, ie interface and design aspects. Prototype will be a lightweight version of the actual project.

 

Before you get to Photoshop you should draw up concepts on paper, I will try different wireframes on paper then create the best of the bunch using inDesign or Photoshop. I actually find it easier to create wireframes on indesign and design mockups in photoshop.

I use Inkscape (add a .org at the end and you will have the link) for vector creation and Krita plus a drawing tablet for moments in which I do freehand stuff. Occasionally I draw in paper and then scan to start "making it real" too.

 

Anyway, I suggest you not trying so many different software to get one single project designed. You will just get confused if you do.

Welcome

 

For mockups/comps, it's up to you and what you feel is the best way to project your work/how people can access. I've used Balsamiq and liked it but it didn't fit with my workflow. I've also tried Fireworks and InDesign (!). These days I alternate between Sketch or Photoshop and designing in the browser. For the latter, I would go from sketchbook direct to my text editor and upload the site to a temporary address for the client to interact with.

 

If it interests you, the software I use for that method is Hammer for Mac. When you get the hang of it, it can speed you workflow, but it depends on your preferences and skills. Like I say, I like to alternate between comps and direct to text editor.

My work flow is normally

 

 

notepad and pencil ( moleskine note pads )

mind node for understanding my design

Balsamiq for wire framing http://balsamiq.com/

photoshop for a visual mock up

just a plain old fashion text editor for coding ( notepad )

I also use coda ( not coda 2 )

wow there is so many notes about Balsamiq, as a designer and developer, I want to recommend you so others .There are so many other mockup or prototype design tool like Axure, MockupBuilders, Invision and Visio. If you want try all prototype design tool to select a right one for you, you can search out them. Hope this is useful to you.

Firstly, I use Clickcharts Diagram Flowchart Software to map out the website so I understand what is required, what will work, UI, etc.

 

Then I tend to sketch out my ideas with paper and pen just to pull my thoughts together.

 

For wireframing, I use the open-source app, Pencil, which suits my needs perfectly. If I'm using a tablet I've used Mockups and iDraw but find there is not enough fine-point control with a tablet.

 

For a design visual, I will use Photoshop (GIMP is an open-source alternative).

 

Lastly, I'll use Mozilla Firefox and Sublime Text for development.

 

There are loads of options out there and the best you can do is to try as many as you can to find out what works for YOU. At the end of the day, it's all about personal preference.