My Experiences with Adobe Dreamweaver

Daily Life, Design

As I have set countless times in countless blogs, web developing isn’t easy. It takes a lot of skill to create a website that’s equally attractive and efficient. Because of current technology, the general population is easily able to create websites of their own with companies like Word Press or Wix to help them. But for the professionals, web development doesn’t start with pretty template but HTML and CSS. This requires the proper software to begin coding, and today we’ll be focusing on a particular software. And the software of the hour is Adobe Dreamweaver!

Dreamweaver is an adobe software that specializes in creating and managing websites and web applications. It’s able to produce content suitable for any device and includes a sufficient number of tools and templates to allow web developers to make amazing web pages without much hassle. I’ve had my own experiences with Dreamweaver, using it to create a landing page for a mobile app. And while I lack enough knowledge in HTML and CSS to use the software to its full capacity, I can say that it is a software that gets the job done. There were many features that I was relieved to have access to. The first feature that the most useful was their real-time browser preview. Being able to code and see it appear instantly on the software without having to preview it on a browser every time made developing very time efficient. Another life saver was of course the different templates available. As a beginner at web development, I did try to start coding the web page from scratch. But after countless syntax errors and wonky results, I finally tried by eyes for a template. They’re really helpful at speeding up the process of building a website and allows amateur developers to get used to the different elements of HTML and CSS. And lastly, the pre-codes styles and HTML elements. Having such a convenient tool on hand really cuts the tedious work in half. Because of the simplicity of my landing page, there wasn’t much for me to explore and use but I certainly appreciated its availability.

Now that I’m done giving off the facade of me swooning over the software, let it be known that I had an absolute horrible time using it. This was partially because of my inexperience and partially because Dreamweaver isn’t really amateur-friendly. It took a ton load of tutorials and question forums just to achieve the basic result I was striving for. During my struggle to create a simple landing page, I found certain features of Dreamweaver that needed work. The first feature would be the real-time browser preview. As convenient as it seems, the software’s real-time preview doesn’t match the final result of your web page when uploaded to a web browser. Many fellow students admitted that in order to fix their web page on the web browser, they had to adjust it to the point where it looked wrong on the software’s preview. It’s really counterintuitive and can make a web developer disoriented. Another issue was when encountering errors. With other adobe software, if a user does something incorrect, they would receive an error sign to explain why they won’t achieve what they’re attempting. Now Dreamweaver does have a syntax checker that immediately notifies you when the input codes are wrong. Yet certain elements that you try to embed doesn’t receive said error signs when they’re embedded incorrectly. What may be common sense for the software may not be so common to the user.


As stated before, I had trouble with Dreamweaver simply because I’m bad at it (there, I admitted it). But it is a great software to use for web development, and the satisfaction I got when my landing page was finally coming together was astronomical. I recommending to those who would like to test it out and see what amazing website they create. For more information about Adobe Dreamweaver and its features, check out the link I placed. Enjoy!

The Skill of Making Web Banner Ads

Design

We are in an era of globalization, which is further enabled via technology. Connected through the Internet or social media, every individual wishes for their voice to be heard. Everyone has something to say, something to promote. This goes especially for those trying to sell their brand to people across the world, and boy must they have something important to share! On every web page, social media page, broadcasted media, there you’ll find an advertisement for a company. No one can escape advertisements, more so on the Internet. It’s gotten to the point where ads will take up so much space on a web page, it begins to cover the main content of the website. But enough of my personal laments, because these advertisements or web banner ads are created for grabbing the audience’s attention. So in this post we’re going to cover the make up of these banner ads and who harbors the skills to create them.

What are Web Banner Ads?

Photo by cottonbro from Pexels

To start off, web banner ads are a collection of graphics made to promote a business through digital media. It’s known to be pretty affordable and effective in its use. Banner ads are perfect for increase awareness in a company which leads to an increase of sales. They come in a variety of shapes and sizes that can be placed along the outskirts of the webpage’s main content. A web banner ad usually consists of an image, the business name or logo, a message, and then a Call to Action (CTA) mechanic. These elements help attract users to the ad and eventually compel them to check out more of what the banner ad has to say. Banner ads are very basic in concept and can virtually be created by anyone (if you have the skill, of course). Despite that, many suggest that hiring a professional if you prefer highly attractive and effective banner ads for your business.

Web Banner Ad Specialists

Photo by fauxels from Pexels

If you want to find professional designers for web banner ads, look no further to Marketing designers. These marketing designers work alongside their client and plan out the most effective methods to promoting the client’s brand. Because specializes in most digital and printing designs, web banner ads are no challenge for them. Web banner ads can be static, with only images and icons, or dynamic, with gifs or videos. For these kinds of banner ads, one would need proficient skills in HTML and graphic design since banner ads have to be just as a effective as it if attractive. A gorgeous ad can be just as easily ignored if it doesn’t properly grab the user’s curiosity. But banner ads that are equally attractive and user-friendly promises good results for a business.

Career Path for Banner Ad Designers

Luckily for said businesses, it’s not difficult to find web banner designers and it’s not hard to accept jobs in digital marketing. Many people search for Graphic Designers on websites like Fiver or Monster that have skills in design strategy and digital marketing. On Fiverr people will pay as little as $5 dollars for a Graphic Designer to make them banner ads. On the other hand, companies can rely on job searching sites for Graphic Designers. They would also hire you under the position of a Graphic Designer or a Digital Marketing Designer. There the pay is significantly better, even if it’s not initially specified upon applying for the job. They can either earn over $25 hourly, or have a flat fee between $100-$800 for a collection of banner ads. Of course, it all varies on the quality of banner ads and the demands of the client. There’s a lot to learn about web banner ads, so feel free to do your own research if you’re interested. You can start with the websites I found on Web Banner Ads and their Designers. Enjoy!

The Importance of Wireframes

Design

As I mentioned countless times before, web development takes a lot of skill and planning. Although there’s new ways for anyone to make a website, there’s still techniques that must be mastered to create something functional and appealing. Certain aspects such as design, user-interaction, and effectivity must be taken into consideration when developing a web page for a broad audience. But before a web developer worries about such things, they must start with the web page’s most basic form: its layout. You can’t necessarily think about colors, typography, and CTAs without knowing what the web page or app is going to look like. This is where wireframes steps in, which what I’ll be lightly discussing in this post!

Photo by picjumbo.com from Pexels

Wireframes are simple design layouts meant to show the structure and information that will be displayed, as well as the overall direction of a user’s interaction with it. Wireframes can vary in complexity and style, but most recommend creating low-fidelity outlines instead. They can very easy to design if you already pictured the format of your web page or app and can be altered as you continue to gain more information about your users. You don’t need to add much colors, graphics, or even text that you’ll add in, just simple placeholders resemble what will later on replace it. Use greyscale colors for simplicity and limit yourself to two fonts of different type to portray certain blocks of text (title, headings, paragraphs, etc.). Before you know it, you’ll have multiple wireframes of each aspect of your web page or app, and you’ll be ready to start developing the final product.

Photo by bongkarn thanyakij from Pexels

Wireframes are beneficial for everyone involved in developing the web page or app, including the client. It allows one to communicate the ideas for design and interaction with the rest of the team, so that the developers know what to code and consider what should be responsive. Wireframes also allows you to properly consider the main purpose and goals of the web page or app. This will certainly grant you an efficient website that will quickly receive positive feedback. There are many free software that specialize in helping you create quick and simple wireframes for any device. Hopefully this will encourage you to use wireframes for future development projects. If you wish to learn more about how to create wireframes and why it’s important, check out the links respectively. Good luck!

UX/UI Design & A/B Testing

Design

Remember when the internet and web development was a complicated thing that was only reserved for geeks and nerds. I don’t since I never lived in a time where the internet was a mystical and intricate subject, but we don’t have to have that mindset anymore. Now with user-friendly programs, anyone can access the internet to create their own web pages. This makes it not only easier for people to publicly express themselves but can be an enjoyable activity. However, this is only possible for common citizens who aren’t fully knowledgeable on web development. As mentioned in past blogs, web development is a very complex thing, both in technical and creative aspects. In this post I’m going to elaborate more by discussing what UX/UI designing is, as well as how A/B testing works.

Photo by picjumbo.com from Pexels

When creating a web page, a web developer can’t think of designing as pretty color palettes and fancy decoration fonts. They also have to consider how it interacts with the user, and if it properly accomplishes its goal of attracting the user who lands upon it. This is where UX Design, or User Experience Design steps in. UX Design visualizes all the possible interactions between the user and the web page’s elements. It focuses less on visual appeal and more on functionality and quality, which is why UX design can be used with any product, virtual or not. On the other hand, we have UI Design, or User Interface design. Unlike UX design, UI design is a digital term because it focuses on the user’s experience with the web page via visual appeal instead of technical elements. This is where graphics, typography, layout, and responsiveness come in to web development. UX design and UI design often get mixed up because of how intermingled their tasks are. To make it easy to understand, I like to think of UX design being responsible for an attraction ride functioning properly as it carries their users along, so the users and ride comfortably. And UI design uses visuals to attract the user and help guide their attention through the ride.

Photo by Christina Morillo from Pexels

Along with UX/UI Design, there’s A/B Testing or Split Testing. It’s a simple process that can help a web developer design a web page that works best. They start off by taking their own webpage and creating modifications (big or small) to make a different version of the page. Then a random selection of users will receive either of the versions, similar to an experiment with a control variable and testing variables. From there, how the users interact with the page is recorded and analyzed by a statistical engine which will allow the web developer to see whether each variation brings negative or positive change. These tests can be done each modification at a time until it’s combined to make an overall improved web page. Performing A/B Tests can help increase your webpage’s user-experience and find out what elements are more respondents and why for future projects. There are many companies that are willing to help you test your web page, one of which is who I used for information about A/B Testing.


Since web developing is a digital job, it can be done remotely or at a corporation. Many employers looking for UI/UX Designers are very specific about what they want in their employee. Some hire designers based on skill level (Junior or Senior designer) others on specific platforms (Mobile, Desktop, etc.), and some hire people who are capable of leading the project. Though there’s a lot of programs that allows users to create their own website without proper knowledge of web development, many businesses depend on skill graphic designers for professional products. Some of the qualifications that employers ask of is a portfolio of your work, a certain amount of years of experience, knowledge in web, mobile, and interactive design principles. I hope all of this information assisted in improving your skills and the quality of your web developments. To learn more about UX/UI Designing and A/B Testing, check out the links given respectfully. As always, good luck!

Page Size Optimization & Digital Graphics

Computer Basics, Design

A website is more than just links, graphics, and words. There’s another side of web development that makes the page more user-friendly. A website can’t only look functional, it has to work functional as well. And that includes what is added to the web page. When a web page is slow, it doesn’t matter how amazing it looked (or could’ve looked) because humanity no longer has the time to wait a few seconds for a digital location rich in information. This is what makes Page Size Optimization so important, as it directly effects the size of your web page along with the time it takes to load for a user. I’ll also cover the type of digital graphics that can be inserted in to a web page and how it’s efficiently used.

Managing the Page Weight

Photo by Christina Morillo from Pexels

To start off, we need to know what Page Size Optimization it. It’s the practice of managing the weight or size of a web page by its amount of content in order for it to keep its functionality. Think of it as a wheelbarrow being pushed up a hill. It does its job well at holding objects, but the heavier the items inside the wheelbarrow, the harder it will take to reach the top of the hill. This of course results in a slower time to push the wheelbarrow. A web page can only load so much content at a time, which is something that a user is quick to notice. To reduce the page weight and speed up loading time, try to remove excessive custom fonts. Of course, custom fonts add uniqueness and originality to a web page, but it carries a lot of weight which adds up to your overall page size. Therefore, it’s best to also limit the number of custom fonts you use to at least two. If you can’t bear to let them go, many web developers recommend making WOFF2 files. It converts your custom font to the most efficient format for browsers, which helps reduce the weight of your web page. Another thing that can reduce the page weight would be to limit the sizes of your images. The dimensions of an image should never be bigger than its container. You can make the size to fill up the entire container if you wish, but never make it bigger. To help with the image’s file size, you can also compress the image, which shrinks the image even more.

Digital Graphics for Web Pages

Photo by Tranmautritam from Pexels

To add on to images in a web page, it’s important to know when it’s best to use JPG, GIF, PNG, should be used in a web page. To start off, JPG have always been the first file type to depend on for web images. They allow raster editing and compression, which helps them download easier. Next, there’s GIF, or Graphics Interchange Format. It’s a raster format that is used for animated graphics and comes with customization settings which could help reduce the file size. It’s best to use it when you need a web animation that’s a small file and allows transparency. Lastly, there’s PNG, or Portable Network Graphic. It’s also a raster format that comes with transparency and a higher color depth. PNGs have currently taken the crown for the best file to use when needing high-quality web graphics that are still small in file size. 


Overall, web development can be very methodical, so I hope this collection of information helped clear things up. If you couldn’t tell, I am not a professional web developer, so I too had to research information on it. If you would like to learn more about Page Size Optimization and when to use Digital Graphics, check out the links respectively. Good Luck!

Target Audience

Design

A universal accomplishment is having global internet access available to any user who can afford the resources. What once was a luxury that could only be afforded by the few wealthy is now a privilege for all. And as great as it sounds, we have a tendency of never being completely satisfied with what we acquire. Before, the internet was filled with pages that didn’t have enough information. But now the internet is filled with pages that are…a bit unappealing. It could be the level of vocabulary is too advanced or vague to comprehend, or layout and design is too distracting and makes the information hard to read. Regardless, at times like this where we have abundant access to information, it makes sense to dismiss these types of websites in for something “better”. This is because if a web page is unappealing to you, it either means the site was put together with a certain audience in mind or completely disregarded who their target audience could be. And with that being said, this is how well go into properly determining target audiences for web pages.

Understanding the Purpose or Brand

When making a web page with a specific purpose or brand, you must ask yourself what the web page would be for, and who would need it? Who would be interested in the topic of your web page? Is it offering something that they might need? You can’t expect people against animal cruelty at a site that speaks on trophy hunting. Imagine who would be interested in your topic and brand when formatting and designing the web page. If you feel that your web page will mainly attract enthusiastic sport hunters or even those interested in taxidermy, then narrow down your target audience from there. Once you know what your web page will be about and you get a basic idea of who’d be interested, then it’ll be easier to picture your particular target audience.

Researching Demographics

Photo by Lukas from Pexels

Now that you have a general idea of the audience you’ll likely receive, it’s time to research the demographics of the audience. Finding data on the demographics will better help you determine how to set up and design your web page. This would include one’s age, sex, marital status, occupation, and more. Of course, is isn’t easy to find the exact demographics of your target audience but gaining a few information about who would be interested in your web page will definitely help boost your SEO (Search Engine Optimization). If your target audience falls around men who are middle aged or already retired, ages will range from their 40s to early 60s. This data alone can already make you settle on a text in big and easy-to-read fonts, with colors that are easy on the eyes. But of course, don’t just stop at age ranges. Web designing professionals look into, location, general hobbies, lifestyles, and current trends they may share. Of course, some of that information is closer to psychographics, but the more info the better.


As simple as it sounds, it takes a lot of research and site testing to ensure that the web page is ready for the public. It may take weeks or even a few months before you feel like you’ve matched your web page with your target audience. But even if it’s easier said than done, it can still be done. All it takes is meticulous care and a lot of patience. I hope this information can assist on finding and locking onto your target audience. For more information, feel free to check out this website on honing in on your target audience. Enjoy!

The Wonders of WordPress

Computer Basics, Design

Out of every innovation and advancement made in the 21th century, the one thing that underlines the modern world is globalization. We as humans are more connected than ever before, which in turn rises the need for individualism and self-expression. This is what explains why social media and broadcasting platforms are heavily used. So it’s no wonder Word Press is such a well-respected CMS (Content Management System). Word Press is used to create and manage any digital content that created with it. Because there’s so much you can do with Word Press, it’s could be used for business websites, blogs, portfolios, authors, journalists, and much more. So in this post, we’ll discuss what makes Word Press one of the more efficient CMS you can ever find.

Actions Speak Louder than Words

Photo by Webaroo on Unsplash

Instead of finding ways to revere the greatness of Word Press, I find it more effective to just explain in detail what Word Press is capable of. As a CMS, Word Press allows virtually anyone to create a website without having masterly programming skills to create one. You can acquire the simplified version with WordPress.com or the full version on WordPress.org, but they’re fully functionally and easy-to-use. Word Press guides the user through building their site, providing countless themes and plugins to give them the website they desire. Additionally, it doesn’t take much to manage, especially with the feature that allows multiple users access to the website’s management system.

Photo by Webaroo on Unsplash


Now without knowing about other CMS, it’s difficult to see how Word Press could be so worthy of praise. But unlike other CMS such as Joomla and Drupal, Word Press can be accessed by anyone anywhere, no matter the skill or device used. This makes it very user-friendly. Because of the many available features, it can be used for a wide range of topics. It also has a huge community of users you can find from around the world to connect with. Where else can you find a free system that caters so much to an everyday user?


Overall, Word Press truly is the place to be. A place where someone could present themselves to the world for free shouldn’t be taken for granted. I wouldn’t doubt a service that’s highly recommended by so many people, but don’t take my word for it. For more information on WordPress and how it fairs against competition, check out these websites for each topic respectively. Enjoy!

Designing Web Banners

Design

When browsing the Internet, there’s many things that a user would come across: articles, videos, video games, broadcasting sites, social media, and much more. For companies that depend on advertising for the expansion of their brand (which is virtually all businesses), the Internet is a gold mine of opportunities to promote themselves to the world. But to do that, they need advertisements. And that’s where web banners come in! Across the Internet, thousands of digital ads are found on countless websites. So in this blog, we’ll be discussing the theory and process of these common-and sometimes annoying-elements.

Who Designs Them

Photo by Dylan Gillis on Unsplash

Web banners are digital advertisements that are embedded into web pages of their choice. Though it sounds simple, there’s intricate work involved in making and presenting such banner ads. So, whose responsible for creating them? That is none other than marketing designers, of course! Marketing designers work with companies to brainstorm and design resources that can advertised via print or digital. Additionally, Marketing Designers ear an annual salary of $69,42, which can increase over time as they continue to build on their experience and skill.

The Process

Photo by Startup Stock Photos from Pexels

There are many things to consider when creating a web banner for a company. The first step is considering what would be the best size for the banner ads. There’s statistical evidence on the most effective banner sizes. The most effective banner sizes are listed below:

  • Medium Rectangle 300 x 250
  • Leaderboard 728 x 90
  • Wide Skyscraper 160 x 600
  • Banner 468 x 60
  • Skyscraper 120 x 600
  • Rectangle 300 x 100
  • Half-Page 300 x 600
  • Large Rectangle 336 x 280
  • Mobile Leaderboard 320 x 50
  • Billboard 970 x 250
Photo by Pixabay from Pexels

And when you chose the best size for your banner ad, you need to decide the best placement for it on a website. Of course, options would be limited when you’re paying for a place on someone else’s web page. But it’s best to look for places that closest to the web page’s main content. Something else to consider would be the design of the banner ad. Can it fit in with the web page and still stand out? Many marketing designers focus on design elements that can grab a user’s attention while making the advertisement simple and easy to read. Since people don’t click on websites expecting to look at ads, banner ads must be able to attract the user and get straight to the point for what their brand is. This is where seamless animations, contrasting colors, and compelling headlines with CTAs really come into handy. With all these elements carefully constructed, the banner ads can successfully bring web users to their landing pages.


Overall, Marketing designers have a lot of work cut out for them, especially in times where technology continues to evolve each year. Personally, I believe could do this job and enjoy the work I’d do. I don’t mind tedious work and the creative challenges that comes with each project would keep me engaged in my work. This job could also help build professional social skill from working alongside companies. But enough of this tangent, hopefully this blog helped understand the process of creating banner ads. It took a lot of research to put this together, so for more information on design tips for banner ads check out 99designs and Match2One. Enjoy!

Typography in Web Design

Design

In my earlier post, I showed how web designers use the Joshua Tree Epiphany to tie their website together in a way that’s visually pleasing. No matter how innovative an idea may be, without the proper structure it can look disorganized and unattractive. And this concept also applies to typography, the art of arranging words to evoke emotion and give a message. As a reader, we don’t automatically acknowledge the process of finding the best typefaces and fonts for the website we click on. But typography is an essential technique for designing web designs. So, in this blog, we’ll cover the usage of typefaces: both good and bad.

How are Fonts Used

Photo by Jon Tyson on Unsplash

Before we look at examples of typography in websites, it’s best to understand how fonts are used to convey messages and emotions. Although it may not be comprehended at first glance, the style of a font must be taken into consideration when presenting text to an audience. When publishing magazines or newspapers, the body text is most likely going to be a serif typeface because the ‘serifs’ or extra strokes at the ends of the letter helps with readability. On the other hand, most websites use sans-serif typefaces because it works well with any monitor no matter the screen resolution. And if you want regal invitations, decorative or calligraphy typefaces are the best choice. Furthermore, the font style, size, weight, and more must also be considered. Certain fonts can give your work a sophisticated, modern, or abstract feel. There are fonts that are partially art and fonts that contribute to word play. The possibilities of typefaces and fonts are endless, and with this knowledge let’s see how to use typography well and not so well.

Critiqued Typography Techniques

Up first is a website called Mr. Bottles, an antique bottle collecting resource. The first that’s noticed is the main title and header of the website. And if the font is almost unreadable (as presented), then it will confuse the user. I, in fact, didn’t know what it said until I looked at its URL. It’s good to have a font that matches the theme of the website, but it becomes a waste if it can’t be comprehended. Another critique would be the usage of the same font in the menu. It’s always best to make the font used the menu different than the watermark; something more legible and easier to spot. It ensures that the wordmark logo doesn’t compete with everything else on the website for the user’s attention

Besides the technical aspect of typography, a font has the match the theme of the website. And Penny Juice gives a good example of this in its wordmark. For a website based on children, it does give the child-friendly feel like other child-centered websites. Even though a child wouldn’t click on this website, parents and people who work with kids respond well to websites that look child-friendly. Using vivid or pastel colors with typefaces that are more rounded and cuter can go a long way.

Applauded Typography Techniques

To end on a good note, let’s look at websites that uses typography well. And to start off, we have The Next Rembrandt, a promotion website for said film. In contrast to Mr. Bottles, this website makes the wordmark the center of attention. And simultaneously making sure the menu and header are equally important and therefore legible. The wordmark’s choice of font gives off a mysterious feel that matches the theme of the website and even the film. It definitely shows that a wordmark can be abstract and comprehensible!

Next is this simple and symmetrical website. It really shows that a less can be more. Though the text isn’t anything special like the past websites shown, Mixd, a website designing company, uses typography is other ways. For a website that boasts about “beautiful form” and “perfect function”, it does show it in their word tracking and leading. The way they space out the pieces of text along with the letters themselves reflects the perfection they’re trying to promote.

Using the Joshua Tree Epiphany in Websites

Design

The Joshua Tree Epiphany can easily be seen as the blueprint of basic design. It consists of Contrast, Repetition, Alignment, and Proximity. You can’t have the most unique and flashiest idea, but without these principles, there will always be something…off. It’s always refreshing to see simple designs that flow so well together because of the usage of the Joshua Tree Epiphany. So, in this blog will be highlighting the usage of the Epiphany in web design. And our example will be Lemonade, a Home and Rental Insurance company.

Contrast

To put it simply, if elements aren’t the same, make them stand out. Contrasting items in your design draws attention, which is essential for anything that you want your audience to pay attention. Lemonade uses this principle very well in the way they sparsely use pink in their mainly grey and white landing page. This color pop keeps the audience hooked and makes it easy to find certain links or CTAs.

Repetition

Now if you’re going to make designs specified to grab one’s attention, make sure to repeat them. Consistent elements in a design keeps everything unified and recognizable to any user, no matter how many times they’ve visited the website. In this website’s case, the pink color was used throughout their FAQ. And it wasn’t used randomly, but for hyperlinks to other pages in their website. Which is an ingenious idea, even if it’s a simple.

Alignment

Next is something simple, but equally important. Placing things on the website randomly only brings confusion. Giving the elements in the website some sort of a visual tie keeps things clear and readable. Lemonade shows a good example in their blog page. Center aligning the title and graphics, left-aligning the text, and keeping social media links to the right.

Proximity

And lastly, there’s proximity which is grouping related items together to make visual units. It removes clutter and gives clear structure to your design. Organized designs are more likely to be read and remembered. You can see this in the way the introduction for ‘Making a Change” is close to the title and spaced out from the next piece of text. Using space instead for clear transition instead of graphic designs is much more efficient in easy readability.

As you can see, the Joshua Tree Epiphany is essential for a well-rounded website. Hopefully this quick explanation is enough to quickly use it to practice. Unfortunately, all this information comes straight from my personal notes, but feel free to look for websites like Lemonade that use these principles for a good reference. Enjoy!