Main ImageMain Image

A how-to guide for designers wanting to create a completely custom and advanced portfolio website with zero coding experience required.

  • gallery-image
  • gallery-image
  • gallery-image
via semplicelabs.com/showcase
[unex_ce_button id="content_ijwmoe7ie" button_text_color="#c4c4c4" button_font="regular" button_font_size="11px" button_width="auto" button_alignment="center" button_text_spacing="0px" button_bg_color="#ffffff" button_padding="8px 16px 8px 16px" button_border_width="1px" button_border_color="#c4c4c4" button_border_radius="0px" button_text_hover_color="#606060" button_text_spacing_hover="0px" button_bg_hover_color="#ffffff" button_border_hover_color="#606060" button_link="http://www.semplicelabs.com" button_link_type="url" button_link_target="_blank" has_container="1" in_column=""]via semplicelabs.com/showcase[/ce_button]
SketchSketch

A tailored guide on the basics of using Sketch to design responsive websites, and how to setup your files specifically for use with the Semplice framework.

  

SempliceSemplice

Easy to understand run through of every little feature within Semplice and how to use them. Custom fontsets, the Portfolio Grid, Custom Navbars, Buttons, Modules – everything!

DownloadDownload

Downloadable Sketch templates, design elements, resources and other goodies included with every purchase.

BUY NOW – $29
[unex_ce_button id="content_0z7yo8gld" button_text_color="#000000" button_font="regular" button_font_size="14px" button_width="auto" button_alignment="center" button_text_spacing="1px" button_bg_color="#f4d8cd" button_padding="15px 60px 15px 60px" button_border_width="0px" button_border_color="#000000" button_border_radius="0px" button_text_hover_color="#ffffff" button_text_spacing_hover="1px" button_bg_hover_color="#000000" button_border_hover_color="#000000" button_link="https://gum.co/WgcYL" button_link_type="url" button_link_target="_blank" has_container="1" in_column=""]BUY NOW – $29[/ce_button]

Contents

Introduction

1.0 Introducing Sketch

1.1 Setting up Sketch files for Semplice
1.2 Designing your Navigation
1.3 Design the basic layout
1.4 Designing your portfolio grid
1.5 Designing a full screen cover
1.6 Bringing it all together
1.7 Examples

2.0 Introducing Semplice

2.1 Installing WordPress and Semplice
2.2 Adding a Custom Fontset
2.3 Setting up TinyPNG
2.4 Creating your Home Page
2.5 Creating your Navigation
2.6 Setting up your Portfolio
2.7 Adding a Full Screen Cover
2.8 Adding a Footer

3.0 Finishing Touches and Extra Bits

3.1 General Settings: Favicon, Facebook Share, Google Analytics
3.2 Basic and Advanced Styling
3.3 Custom CSS and JS
3.4 Using Dribbble and Instagram Modules

Finishing Up

NotFamiliarNotFamiliar

You need them. Right now.
These two tools have brought so much value to me as a designer. Sketch has made my design workflow insanely fast and Semplice has allowed me to launch several side projects (just like this one) without writing a single line of code!

CHECK OUT SKETCH
[unex_ce_button id="content_5et2k81ox,column_content_lxtlx6dac" button_text_color="#000000" button_font="regular" button_font_size="14px" button_width="auto" button_alignment="right" button_text_spacing="1px" button_bg_color="#f8f8f8" button_padding="20px 60px 20px 60px" button_border_width="2px" button_border_color="#000000" button_border_radius="0px" button_text_hover_color="#ffffff" button_text_spacing_hover="1px" button_bg_hover_color="#000000" button_border_hover_color="#000000" button_link="https://www.sketchapp.com/" button_link_type="url" button_link_target="_blank" has_container="" in_column="1"]CHECK OUT SKETCH[/ce_button]
CHECK OUT SEMPLICE
[unex_ce_button id="content_5et2k81ox,column_content_hx7hohbxr" button_text_color="#000000" button_font="regular" button_font_size="14px" button_width="auto" button_alignment="left" button_text_spacing="1px" button_bg_color="#f8f8f8" button_padding="20px 60px 20px 60px" button_border_width="2px" button_border_color="#000000" button_border_radius="0px" button_text_hover_color="#ffffff" button_text_spacing_hover="1px" button_bg_hover_color="#000000" button_border_hover_color="#000000" button_link="http://www.semplicelabs.com" button_link_type="url" button_link_target="_blank" has_container="" in_column="1"]CHECK OUT SEMPLICE[/ce_button]
Book w descriptionBook w description
ReadytoBuildReadytoBuild
BUY NOW – $29
[unex_ce_button id="content_660k22kvc,column_content_9j2q2melk" button_text_color="#ffffff" button_font="regular" button_font_size="14px" button_width="auto" button_alignment="left" button_text_spacing="1px" button_bg_color="#000000" button_padding="25px 60px 25px 60px" button_border_width="0px" button_border_color="#000000" button_border_radius="0px" button_text_hover_color="#ffffff" button_text_spacing_hover="1px" button_bg_hover_color="#3a3a3a" button_border_hover_color="#000000" button_link="https://gum.co/WgcYL" button_link_type="url" button_link_target="_blank" has_container="" in_column="1"]BUY NOW – $29[/ce_button]
quick-guidesquick-guides

Already a master of Sketch and Semplice? Check out our Quick Guides for tips and advanced techniques.

Gumroad and Semplice
still-not-surestill-not-sure

Sign up to our Mailing List – You'll be updated with exclusive content and guides on Sketch, Semplice and launching side projects! No spam – I promise.

[unex_ce_mailchimp id="content_lg0jmkjd4,column_content_mxr24fnaj" placeholder_text="Email Address" alignment="left" button_position="inline" button_spacing="10px" input_placeholder_color="#dbdbdb" input_width="span3" input_text_align="left" input_text_color="#262626" input_bg_color="#efefef" input_padding="24px 30px 24px 30px" input_border_width="0px" input_border_color="#ddbdb0" input_border_radius="0px" input_placeholder_color_mouseover="#cccccc" input_text_color_mouseover="#000000" input_bg_color_mouseover="#ffffff" input_border_color_mouseover="#caa99c" input_font_size="16px" input_font="regular" button_text="SUBSCRIBE" button_text_color="#ffffff" button_font="regular" button_font_size="16px" button_text_spacing="0.5px" button_bg_color="#303030" button_padding="25px 50px 26px 50px" button_border_width="0px" button_border_color="#000000" button_border_radius="0px" button_text_hover_color="#ffffff" button_text_spacing_hover="0.5px" button_bg_hover_color="#1e1e1e" button_border_hover_color="#000000" has_container="" in_column="1"]//printandstaple.us9.list-manage.com/subscribe/post?u=65e0327de0853f38aae490876&id=efcec272a9[/ce_mailchimp]