Модульная сетка. At the beginning of a web (or application) development project I always create the sketches first.
While sketching can be done on a blank paper, it’s much better to use a sketch template. For me that is the best and most productive way to work on and improve my ideas before application development begins (and things get more complicated :-)). This way I won’t pay too much attention to some details that should be taken care of later, but stay focused on general layout and functionality.
Below you will find more than 20 resources that you can use in sketching phase of application development. If you have some additional resources to share, please leave a comment so I can add them to the list. And, of course, don’t forget to share your wireframes on I ♥ wireframes :-) Printable sketch templates for websites These are some pretty good, printable sketch templates for website design.
Browser Sketch Pad (PDF) Browser Sketch Pad by Design Commission — see original source 960 grid template Graph paper. Бесшовная текстура. Наташа Клевер Уроки / Новичкам Отличный урок от Designshack в котором очень просто можно самому сделать в фотошопе бесшовную текстуру для заливки фона.
Сначала мы создадим новую кисть с эффектом боке, потом в новом документе создадим сам узор, а потом воспользуемся замечательным фильтром, который, собственно и создает бесшовный паттерн. И уже напоследок вручную подчистим рисунок. Шаг 1. Заливаем его цветом #80ac4b. Шаг 2. Возвращаемся в наш основной документ.
Шаг 3. Шаг 4. Шаг 5. Шаг 6. Шаг 7. Create a Slick and Minimalist Web Layout in Photoshop. In this Photoshop web design tutorial, we’re going to learn how to create a slick and minimal-looking website layout.
We will use the 960 Grid System as a template to make it easy to align the design elements on the layout. Preview Here’s a preview of what we’ll be creating together, click the image to enlarge. Create a new Photoshop document 1 We’ll be using the 960 Grid System (download it at as a starting template. Creating the background 2 First of all, right-click on the Background layer in the Layers Panel and then choose Layer From Background. 3 Now select the Gradient Tool (G), set your Foreground color to #efefef and your background color to #cacaca. Designing the header section 4 We’ll add a new horizontal guide at the 50px mark from the top of the document to set our top borders. 5 We’ll start adding our title and slogan; select the Horizontal Type Tool (T) and type your site’s name and your slogan. "YourName" "some awesome slogan" Creating our navigation Creating the search bar.
Examples. Cicada Principle. Minimalism in Web Design: A Guide. Minimalism is a word that gets tossed around in a lot of different contexts. Whether it be a lifestyle or an art form, saying something is "minimalistic" can take on a variety of meanings. In the web design field, minimalism is carving out an ever-increasing niche among designers that are looking to convey important content in a new way. Like just about any trend or theory in the web design world, minimalism can be easy to get wrong.
So what is minimalism in web design? Just as important, what is it not? It’s easy to see how a minimal web design can be misconstrued as something that requires less effort or time to create. However, saying that it requires less work couldn’t be further from the truth. A Minimal Mindset In order to properly execute minimalism in your design, a focus needs to be established. Take the time to consider what this site is going to be about. The Art of Taking Away Designers are often praised for the ability to create. Smarter Color Typography Layout Structure. Web Designer Wall.