Category Archives: WebMaster

Wamp – SSL

·  Download & install WampServer.

·  Open a command prompt (WindowsKey + R > cmd > click OK) and enter the following commands.
cd c:\wamp64\bin\apache\apache2.4.41\bin

openssl genrsa -aes256 -out private.key 2048

openssl rsa -in private.key -out private.key

openssl req -new -x509 -nodes -sha1 -key private.key -out certificate.crt -days 36500 -config c:\wamp64\bin\apache\apache2.4.41\conf\openssl.cnf


Note: You can pretty much answer the questions any way you want though real answers are best. The one question that really matters here is the FQDN. It should be: localhost.

·  Move the private.key and certificate.crt files from c:\wamp64\bin\apache\apache2.4.41\bin to the c:\wamp64\bin\apache\apache2.4.41\conf\key\ folder. If the key folder doesn’t already exist, create it.

·  Using a text editor like Notepad, open c:\wamp64\bin\apache\apache2.4.41\conf\httpd.conf and un-comment following 3 lines:
LoadModule ssl_module modules/mod_ssl.so
Include conf/extra/httpd-ssl.conf
LoadModule socache_shmcb_module modules/mod_socache_shmcb.so

·  Using a text editor like Notepad, open c:\wamp64\bin\apache\apache2.4.41\conf\extra\httpd-ssl.conf and apply the following changes:
Below the line: <VirtualHost _default_:443>, check the following parameters to ensure they are configured correctly and not commented.
————————————-
DocumentRoot “c:/wamp64/www”
ServerName localhost:443
ServerAdmin admin@example.com
SSLSessionCache “shmcb:c:/wamp64/bin/apache/apache2.4.41/logs/ssl_scache(512000)”

ErrorLog “c:/wamp64/bin/apache/apache2.4.41/logs/error.log”
TransferLog “c:/wamp64/bin/apache/apache2.4.41/logs/access.log”
SSLCertificateFile “c:/wamp64/bin/apache/apache2.4.41/conf/key/certificate.crt”
SSLCertificateKeyFile “c:/wamp64/bin/apache/apache2.4.41/conf/key/private.key”
————————————-

·  Save the file and close it.

·  You are done. To check the validity of file, at the command prompt, enter:
c:\wamp64\bin\apache\apache2.4.41\bin\httpd -t
and then use your web browse to go to https://localhost/

4 Tips on How to Simplify Your Website Design And Win Over New Customers

4 Changes You Can Implement Today to Simplify Your Website Design and Make It Better 

You will lose clients faster than the speed of light with a terribly cluttered website design.

I mean, just take a look at the next two examples I’m gonna show you.

So here we have a busy website, with no specific focal point, and you don’t really know where to look, and it immediately stresses you out. You lose the client because he clicks off your site.

But then, we compare it to this…

[source]

When I look at this minimalist website design, especially compared to the other, my eyes are immediately set to ease. It’s literally like the inner designer in me just had the most amazing glass of wine and I’m just enjoying myself, admiring the design.

Alright, enough comparisons. Let’s just get things rolling over here.

Into the 4 tips we dive!

1. Simplify the Text

[source]

The most important page of all your website will be your homepage.

It’s the page that will set the tone for the rest of your site.

So it’s important that you get across what you’re trying to say quickly, efficiently, and simply.

There’s no need to clutter your website by writing so much text.

Most people just skim your website anyway! So, write your main text in bold headlines, add some details below, but not too much.

Only a small percentage of people will read the entire thing, so use your headlines to your advantage wisely!

2. Stick To A Color Scheme

[source]

A good color scheme always warms my heart, like grandma’s homemade apple pie on a summer’s day.

Maintaining a color scheme amongst your text, background elements, and images will automatically make you look more organized.

By using a color scheme, you can also bring focus to certain elements and manipulate the eye to go where you want it to.

By no means do you ever want a green font on a bright red background with orange and silver elements floating around the background. Unless you want you website to look like Christmas got a little wild at the Christmas staff party and vomited all over your website.

Go online or on any design inspiration website and type in popular color schemes on 2020, or color palettes, and save time and effort by finding beautiful palettes!

3. Limit Your Homepage To The Essentials

[source]

This kinda goes hand in hand with our first tip about limiting text.

Limit everything on the homepage and only keep what is essential.

Ask yourself, “What am I trying to achieve with this website and the homepage? What am I trying to show the customer?”

When you find the answer to that question, design your homepage accordingly.

Don’t add secondary/tertiary elements to the first bit of the homepage.

That’s what your menu tab and other secondary pages are for!

And speaking of menu tabs…

4. Scale Down Your Menu Tabs

[source]

For the love of simple design, keep your menu bar clean.

You don’t need a menu tab for 👏every 👏single 👏 element 👏of your website.

We’ve seen this way too many times than we’d personally like to admit, but some people give you the option of clicking on 20 different tabs.

As an alternative, create drop-down menu tabs where you have subcategories.

This will keep things squeaky-clean and peaceful for the eyes to look at.

No one will be frantically looking around for what they’re trying to find.

When things on your site and aesthetically pleasing and well-organized, your sales will go up.

Source: webdesignledger.com

Collection of Free Design Rersources

Free Stock Images

Photography has been and will always be a key piece of design. Stock photos are no longer what they used to be, luckily. No longer will you be seeing just those awkward group photos of people laughing or two businessmen shaking hands. 

No, there are so many stock photo sites for you to choose from with quality work from real photographers. Check out these 10 awesome free stock images websites!

Photos generated from AI

https://app.generative.photos/

Unsplash

unsplash free stock images

I want to start this list off with a bang. Unsplash is my personal favorite free stock image website. I use it for everything from article writing to making designs. Unsplash has a huge collection of images, consisting of over 110,000 high-quality free stock images. Just type in a keyword and see hundreds of images that can suit your needs. All images are released under Unsplash’s copyright policy.

Stocksnap

stocksnap website free stock images

Stocksnap has hundreds of new high-quality free stock images added to their library every week. They have stock images to fit just about any occasion you can think of. From website building to brochure making, they having everything you need. You can find any image you need by typing in tag words, and you’ll be presented with hundreds of images that will be perfect for you. All images are free for you to use! 

Pexels

pexels user interface free stock images

Pexels has one of the most beautiful stock images website interfaces I’ve ever seen. Pexels provides tons of high-quality stock images that are free for you to use under their license. With hundreds of thousands of beautiful free images of you to choose from, surely you’ll find what you need here. 

Reshot

reshot free stock images website

Reshot. Uniquely free photos. Handpicked, non-stocky images. Yours to use as you wish”. That’s a pretty self-explanatory and sweet tagline. They work hand-in-hand with amazing professional photographers and give them a great place to display their work and be discovered. Find amazing free stock images on Reshot!

Pixabay

pixa website free stock photos and images

Pixabay has loads of free photos, but not only. They also have art illustrations and vectors. All images, art illustrations vectors, etc are released under Creative Commons CC0.

Life of Pix

life of pix free high quality images stock

Next up, we have Life of Pix. Free high-resolution photography for everyone. Besides having loads of amazing photos to choose from, they also feature a new photographer of the week. Find new photographers whose work you love every week and in turn, have tons of stock photos to choose from! 

Foodiesfeed

food photography free stock images foodies website

Foodiesfeed is for the foodie at heart. Which gorgeous, appetizing stock images that look so delicious that you can almost smell them just by looking at them. If you have a food blog or just need some inspiration, check out this awesome stock image site. 

Gratisography

gratisography website free unique images

Gratisography is for the non-mainstream person. If you’re looking for the complete opposite of the classic boring stock photo, this website is for you. You truly won’t find photos like these anywhere else.

Foca

free stock images foca website

FOCA is a great stock website if you’re looking for a little more than just some stock images. They have everything from free photos to videos and templates! 

Kaboompics

kaboompics website free stock images for blogs

Kaboompics is so aesthetically pleasing, it hurts. The amazing blog pictures are everything. According to their about page, Kaboompics is one of the most popular sources of free images for lifestyle, interior design and specialized bloggers in the world. 

Free Vectors 

Creating your own vectors can take up so much of your precious time, and that’s why finding perfect vector art or vector icons can be a major time-saver, but finding them for free is like finding treasure. That’s why I picked out my 10 favorite free vector websites. Check ‘em out.

Vexels

vexels website vectors free

Vexels has great free vectors for you to use for personal and commercial use. What I really like about their vectors is that many of them are editable. You can get everything from icons to backgrounds and designs that are ready for print. Give them a try!

Vector Stock

free vector stock website

Vector stock has over 300,000 vectors for you to choose from. With such a wide variety of vectors, surely you’ll find something that’ll suit your project and save you loads of time. 

The Noun Project

the noun project website free vectors

The Noun Project can be summed up in icons, icons, icons! They have over 2 million royalty-free vector icons for you to use. And what’s better? You can edit them. That is insane, people. Don’t sleep on the noun-project. They have all those quality things you’re looking for.

Vector 4 Free

vectors 4 free website free vectors

Vector 4 Free has vector art for everyone. Their goal is to share vector art created by professional designers with everyone. They have all sorts of formats, such as .ai format, but also .eps, .pdf, .svg, and even .cdr. All of their vectors are free for personal use, but for commercial use, you have to check each artist’s terms of use, as they all differ. 

Freepik 

Freepik free vector interface

Freepik has over 708,000 free vectors for you to use for personal use and also for commercial use. The styles vary as far as feminine and elegant-looking invitations to vectors that are perfect for backend technology promotion. You’ll find every style you could need here, and you can download everything in .Ai and .EPS formats.

Free Vector

free_vector interface

Free Vector is full of fun and colorful cartoonish vectors. They are basically a world full of free vector art that is simply at your fingertips. Type in your keywords in the search bar to find vectors that suit your style, or scroll to the end of the page and find tons of categories to browse through.

Vecteezy

vecteezy free vectors graphic design

Vecteezy has thousands of gorgeous vector art for you to use. Everything is copyright free, so you never have to worry about that. There are tons of free vectors for you to use, or you can upgrade your account to a pro account and have access to everything at your fingertips. 

Flat Icon

free vector website

Flat Icon is the largest database of free icons that are available in PNG, SVG, EPS, PSD, and BASE 64 formats to date! With a free account, you can access thousands of free icons, or you can upgrade your account and get millions of icons for free. 

Pngtree

png tree website free vectors

Pngtree has wonderful vectors for you to choose from, and with a free account, you have access to 2 daily downloads. Get royalty-free PNG images, vectors, backgrounds, templates, and text effects from Pngtree. 

Free Mockups 

Showing real-life visuals of your work to your client is a vital selling point, and that’s one of the huge reasons that mockups are so crucially important. Here are 10 free amazing mockup websites for you to use for your next project.

Placeit

placeit free mock up platform

Placeit is a site where you can visualize all of your designs on products within seconds. Not only can you just upload your images, but you can also make designs on the platform, and create videos. Create your own design, or try out one of their 32,938 smart templates! 

Smart Mockups

free mockups website

Smart Mockups is the fastest web-based mockup tool out there right now. It’s user-friendly in the manner that advanced designers and beginners alike can use and understand their product. You can use a free account and create 200 mockups and use basic features, or you can upgrade your account and have access to all mockups and features. 

Mockuuups

mockuuups website free mockups

Mockuuups will generate tour product mockups in literally a second. The tool is easy to use, as it is drag-and-drop based. Download the app to your computer to start using. You can use a free account and still have access to lots of features and mockups, or you can upgrade your account to have access to everything! 

Mckups

mckups mockups website free app

Mckups has a beautiful, minimalist interface and beautiful, free mockups for you to use. The mockups are hand-crafted by professional designers and are just waiting for you to use them. 

The Mockup Club

the mock up club website free mockups

The Mockup Club is absolutely free and that might just be my favorite part. It’s a one-stop shop with loads of free mockups for you to use to showcase your lovely designs. 

Psd Repo

free psd mock up website

Psd Repo has every mockup imaginable. From key-chains to shorts, to t-shirts, to protein powder packaging, I think I can safely say they have it all. The mockups are made by talented designers who want to share their work with you for free. Download your favorite mockup as a PSD file and get to designing! 

Mockups Design

mockups design interface free mockup

Mockups Design is an easy-to-use website where designers can find professional mockups for free to use in their next design project. From DVDs and CD to letterheads and brochures. They have lots to choose from.  

Good Mockups

good mock ups website free mock ups

Good Mockups can be summed up about something like this: High-quality, hand-picked, premium mockups for all to use. They strive to have mockups to fit everyone and every design. With an entire list for you to go through, I believe that they are truly well worth your time. 

Mr. Mockup

mr mockups website free mockups

Last but not least, we have Mr. Mockup. They have a team of professional and creative designers working to mockups for everyone. With a vast experience in designing just about anything, you can count on them to find beautiful mockups for your next design project.

Resource: https://webdesignledger.com/free-design-resources/

The Basic Principles of Visual Design

Posted 4 days ago by José Torre

Yesterday I was listening to a podcast and heard someone who was about to ask a question saying something along the lines of “..long time fan, first time caller…” and for some reason that got me thinking about Medium. I’ve been consuming content here for a long time but have never contributed myself with my 2 cents. Today is the day this changes.

As my introduction I decided to write about something close to my heart, Visual Design (aka graphic design), more specifically the basic principles I learned to use which I consider essentials for me to perform my job well.

I want to keep this article short, for that reason I will try to be brief in each of these principles, for the ones that deserve a bit more depth I might dedicate a full length article in the future.

Ok, ready? It all starts with…

#1 Point, Line & Shape

These are the most basic building blocks of any design, no matter what it is. With these you can create anything you want, from simple icons to very complex illustrations, everything is made with the combination of these simple elements.

In geometry a point is a combination of x and y coordinates, add a z axis and you’re in 3D, but let’s stick with 2 dimensions for this article.

Point > Line > Shape

If you connect two points you’ll get a line. A line that is formed by an immensity of points, a bit like a bunch of atoms form molecules which, in turn, form all the objects around you. Then, if you add a third point and connect them all you have a shape, in this case a triangle, but as mentioned before you can use this basic elements to achieve pretty much anything that you want.

Now, to your eyes these shapes don’t really exist until you add something to it…

#2 Color

Visible Color Spectrum.

The human eye can see over 10 million different colours from red to violet, and from young age all of us learn to attribute certain values or meanings to specific colours.

Imagine the traffic lights for instance. They’re just colours but we learn that red means stop, green means go and yellow means step on the metal because you can make it before it turns red. This to say that we take very different actions just based on a colour, sometimes even without thinking about it.

In my opinion this happens simply because we learn these things, not because a colour has an intrinsic meaning attached to it. This is more true if you consider that these meanings will change depending on your culture, where and when you were raised.

“All this to say that you can add meaning, intention and a tone just by picking the right colour, you just need to make sure you understand very well who you’re designing for.”

Now that you can see your triangle, how about making it more interesting…

#3 Typography

From a triangle to an A

This is a big one and I consider one of the most important, and difficult, things for designer to get right. It’s not only about what you write but how you present it. Typography is how your words look like.

With the right typeface you can have a banal piece of text and make it powerful, but that’s not easy to do, what is easy is to completely mess up a powerful statement just by selecting the wrong typeface. Typography, as well as colour, allows you to define a tone.

“Most typefaces are designed with a purpose, you just need to learn what that is and use it in your favour.”

Some typefaces are great for big blocks of text, some work great as titles. Some are merely functional and super clear and others are just meant to be fun or used ironically (you know what I’m talking about).

There are thousands of different typefaces to choose from but unless you need something whimsical or you’re trying to make something very specific I would always advise to stick with the classics. However, if you’re felling bold you can even design your own typeface, although I think that is one of the most challenging things to do properly as a designer, but if you think you’re up for the task one thing that you can’t forget is…

#4 Space

“The way you balance your space can be a maker or a breaker, especially in typography.”

You need to consider how each element/letter relates to each other, give them the precise breathing room they need, this is usually referred to as negative space (positive space are the actual letters).

Adjusting the negative space between letters (aka kerning).

You need to take the negative space as part of your design and use it well, space can be powerful and help your viewer to navigate through your design. It can also be a place to rest the eyes.

“Use it wisely though, too much space and your design will look unfinished, too little space and your design will seem too crowded.”

Managing to find the right ratio between positive and negative space allows you to create…

#5 Balance, Rhythm & Contrast

This is when you’re starting to make a bunch of plain elements into something interesting and appealing. Balance well all the elements on your design by considering their visual weight. A big black square in the your bottom right corner will sink your design from that side. Compensate for that weight or move it to other position.

Adjusting the Visual Weight of the words to create rhythm and contrast.

The way you lay elements in the page is crucial, making some elements heavier than others will help to to create contrast and rhythm and lead your viewer’s eyes through your design gracefully and effortlessly.

Something that may help you with rhythm and balance is also to play with…

#6 Scale

Taking it one step further by adjusting the scale of the words.

Scale helps you not only creating rhythm contrast and balance but also hierarchy. Basically not all the elements in your design should have the same importance, and one of the best ways to convey that is size.

Now, this must serve a purpose. Don’t go for the “make my logo bigger cream” approach and forget about the space I mentioned before.

For instance, take a newspaper page. What’s the biggest thing in the page?

The titles, that are also usually short. Why? So you can scan the page quickly and see if there’s something interesting for you to read. Then we have the subtitles that are smaller but give you a little more information about the article, and finally we have the article that has the smallest font size but also the most comfortable to read a long piece of text.

So, it’s all about making the size serve a purpose and never forget about the person who will consume your design. Speaking of newspaper, is time to bring some order with…

#7 Grid & Alignments

It’s like that oddly satisfying feeling when you’re playing Tetris and you stack that last bar that clears your screen.

Creating some relationship between the elements to make it look more balanced and pleasant.

These are supposed to be invisible but you’ll see them if you open a book or a newspaper, but (no matter what you’re designing) following a grid will structure your design and make it more pleasant and easier to digest.

“Even if you’re making a chaotic design purposefully, there must be an order for that chaos.”

Alignment is specially important with text, there are several ways to align it but my rule of thumb is to align it left. It always depends on what and for whom you’re designing of course, but generally, people read from left to right, top to bottom, which makes text that is center or right aligned much more difficult to read.

#8 Framing

This is a key concept in photography but it also applies in visual design.

Whether you’re using a picture, an illustration or something else, framing something properly makes all the difference.

Reframing the composition to add interest and an extra element.

Try to direct the eye to what matters, crop/frame images to make your subject stand out or to reinforce your message. It’s all about telling the right story and telling it well.

After all this, if you feel there’s something missing, you can play around with…

#9 Texture & Patterns

Trying out a noisy texture.

I personally see texture and patterns like accessories, you don’t have to use them necessarily and you can live without them but sometimes they can, almost on their own, make your design or add that little extra interest it was missing.

Textures are not as trendy as they used to be a while ago but with them you can add another dimension to your design, making it more three dimensional and touchable.

“The texture doesn’t have to be in the composition itself, if it’s something that is going to be printed, picking the right paper, add things like bevel, emboss or UV varnish can make your design pass from banal to something superb. But pick one, don’t go crazy with the special finishings.”

Patterns are all about repetition, and can be almost considered textures depending on how you’re using them. I see them mostly used as a way to inject rhythm and dynamism into a flat design and a way to compensate the excess of negative space.

Last but not least, and this is actually what I personally consider to be the holy grail of visual design…

#10 Visual Concept

This is the idea behind your design. What do you mean with it and what’s the deeper meaning behind the superficial image.

An idea lamp… cliché, I know 🙂

This is what distinguish a great design from something you can download from a stock website.

Design with intent and always have an idea that connects everything in your design. Pick your fonts carefully and with a purpose, think about how every tiny part of your design follows that base concept. Coherence is everything.

“If your concept is strong you’ll be able to defend it and sell the idea to your client/boss or whomever you’re presenting it to.”

Also, a properly thought out design will last for ages. Trendy hipster things are nice and cute but, as the moustaches and the checkered shirts, they come with an expiry date. I really believe that a good design does NOT follow trends, but it creates them instead.

There you have it, “my” 10 Principles to build a good design. Even thought I consider #10 the essential one, you need to pay attention to all the others principles and make sure you really become a master of your craft. You might have a great idea but I think you also need to know how to make it justice (or have someone who does it for you).

They say you can’t judge a book by it’s cover, but most people actually do. If what’s inside the book isn’t well portrayed in the cover that will definitely influence how well it does.

Alright! That is all.

As a final note I must mention: There are, of course, other things I take in consideration for a project/design, like understanding who is it for, and what do we want to achieve with it, however I didn’t make those part of this list of principles because I consider these “constraints” an essential part of defining the visual concept. The idea might be brilliant but if it doesn’t answer the project’s needs it will sooner or later fail.

I hope you find this useful even if you already know all this. I’ve definitely used this set of principles as much as I use my Staedtler pens and it actually was an interesting exercise for me to deconstruct my designs into it’s bare “building blocks”.

This article was originally published on Jose’s Medium page.

Article from: https://blog.marvelapp.com/basic-principles-visual-design/