This is a very generalized visual design process, may not be applicable to all situations or websites, and I’m leaving out a lot of detail that you gain through experience, but I thought an outline will still be helpful.

Create Wireframes of your main page and your project detail page:

A good process would be to

1. create quick napkin sketches of these wireframes where you try out different layouts—where is your navigation? how dominant in size are project images? should supplementary information (credits, materials, date published, etc.) go at the bottom of the page or in the margins—these types of layout questions.
2. then create a final wireframe that is a bit more polished and uniform, and save this as a PDF document that you can share with me

Create static mockups of your main page and 1 project detail page:

Generally done in Photoshop and illustrator, this is where you do your main visual design work. Here is a good process:

1. Pick 1 to 2 typefaces: one that is for close reading of text, one that is for display and large text. Both embody the personality you are trying to communicate on your site. The less super extravagant flourishes the better—consult your inspiration websites to see how they use typography.
2. Establish your grid:
   1. What is your document width: perhaps start with a document width of 1200px.
   2. If you have them, decide how large your side margins should be and subtract this from your total document width.
   3. Choose a gutter width: usually anywhere between 15–40px.
   4. Choose the number of columns in your grid: A number divisible by 2 or 4 is generally pretty versatile: 12 columns, 8 columns, etc. The number of gutters is 1 less than the number of columns, so use this to create and evenly space your columns/gutters. You can use actual “guides” in the Adobe software or create long, transparent rectangles.
   5. Put in some dummy typography that spans 3 or more columns: is the line length ok (55–75 characters long)? If not, go back to steps 3 and 4, and work on your gutter and column widths.
3. Establish a color palette. It should be diverse enough to handle all your page elements: large typography, links, hovered links, background colors, colors of other graphic elements, etc. But also, it should be restrained enough that multiple colors don’t clash or overwhelm. One helpful tool is Adobe Color CC
4. Design your pages: bring in your content—images and text arranged according to your wireframe. If there is motion or some dynamic elements, show a snapshot of what this may look like: what do links look like when hovered over, for example?
5. Save as a PDF so you can show it off.